newtvis

Я нашел только один способ:

HTML:

<div class="wrap">
	<div class="red"></div>
	<div class="green"></div>
	<div class="blue"></div>
</div>

CSS:

                * {
			margin:0;
			padding:0;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}

		html, body {
			height:100%;
		}

		.wrap {
			min-height: 100%;
			height: auto !important;
			height:100%;
			position: relative;
		}		

		.red {
			background: red;
			width:100%;
			height:200px;
			position: absolute;
			top:0;
			left:0;
			z-index: 1;
		}

		.green {
			background: green;
			width: 35%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
			padding-top: 200px;
		}

		.blue {
			background: blue;
			width:65%;
			height:100%;
			position: absolute;
			top:0;
			right:0;
			padding-top: 200px;
		}

Может есть какой-то другой способ, я особо не думая прикинул макет.

P.S. А вообще не рекомендую такую верстку =)

Уважаемые верстальщики, подскажите, пожалуйста, как решить одну проблему. В CSS вставил градиентную картинку в качестве фона для меню, который должен появляться при наведении курсора на определенный пункт. При просмотре в браузере картинка фона не отображается полностью по ширине, а лишь закрывает текст и все.

Сейчас я продемонстрирую современное решение. Если не поймешь что к чему - Гугл в помощь. Гугл все таки лучше Попова в этом плане =)

HTML:

<nav>
	<ul class="nav">
		<li><a href="#">Текст</a></li>
		<li><a href="#">Текст</a></li>
		<li><a href="#">Текст</a></li>
		<li><a href="#">Текст</a></li>
		<li><a href="#">Текст</a></li>
	</ul>
</nav>

CSS:

.nav li{
	display: inline-block;
	/* Для няшного IE */
	*display: inline;
	*zoom: 1;
}

.nav li a {
	text-decoration: none;
	font-family: Arial, sans-serif;
	padding:4px 10px;
	color: #369;
	border: 1px solid transparent;
}

.nav li a:hover {
	color:#fff;
	background: #0080b4;
	background: -moz-linear-gradient(top, #0080b4 0%, #006f98 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0080b4), color-stop(100%,#006f98));
	background: -webkit-linear-gradient(top, #0080b4 0%,#006f98 100%);
	background: -o-linear-gradient(top, #0080b4 0%,#006f98 100%);
	background: -ms-linear-gradient(top, #0080b4 0%,#006f98 100%);
	background: linear-gradient(to bottom, #0080b4 0%,#006f98 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0080b4', endColorstr='#006f98',GradientType=0 );
	border: 1px solid #0080b4;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 1px 0 0 rgba(255,255,255,.5) inset;
	-moz-box-shadow: 1px 0 0 rgba(255,255,255,.5) inset;
	box-shadow: 1px 0 0 rgba(255,255,255,.5) inset;
}

И никаких картинок не нужно.

Если хотите картинкой - то сделайте .psd файл - вставляйте шапку картинкой или бэкграундом. А текст через отрицательный text-indent

От себя посоветую использовать метод от boilerplate, где text-indent задается только для IE ниже 9 версии.

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* Для старых версий IE */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}