Неоднородный фон сайта под контентом

25 Июн
2012

Недавно дали задание сверстать сайт у которого немного не обычный фон. И сделать это надо было кроссбраузерно (IE7+) и так, чтобы фон тянулся по вертикали в зависимости от объёма содержимого. Пример макета и мой вариант решения под катом.


Верхняя часть с градиентом и элементами по краям, всё остальное с белым фоном и без лишних элементов. С нижней и верхней частями никаких сложностей, в отличии от верхней. Части поделены линией.

Погуглив некоторое время я не нашёл нормальных примеров того как это можно реализовать и поэтому, думаю, когда кому-нибудь придётся сделать что-то подобное, то ещё один вариант решения этой проблемы не будет лишним.

Итак,
1) надо поделить картинку 3 части сохранив их в разные файлы, хотя тут можно верхнюю и нижнюю части совместить в спрайт, но это кому как нравится больше, я для простоты и наглядности не буду использовать спрайты. Среднюю часть можно сделать высотой в 1 пиксель (заботимся о пользователях с низкой скоростью доступа в Интернет).

2) HTML код:
<body>
<div class="top"></div>
<div class="middle">
<div class="clearfix"></div>
<div class="content">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>...</p>
</div>
</div>
<div class="bottom"></div>
</body>

.top — наш неповторимый фон с градиаентом и рюшечками
.middle — фон с повторяющимся по вертикали фоном
.bottom — низ
.content — блок с каким-нибудь контентом
.clearfix — в представлении не нуждается

3) Решение заключается в том, что к верхней части (.top) мы прописываем абсолютное позиционирование (position: absolute), а к блоку с контентом (.content) z-index > 0
А дальше уже стили по обстоятельствам и не забываем про clearfix.

.clearfix:after, .content:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix, * html .content {
	height: 1%;
}

h1 {
	font-size: 20px;
	font-weight: 100;
}

body {
	margin: 0 auto 0 auto;
	font-family: Tahoma;
	font-size: 12px;
}

body, .top, .middle, .bottom {
	width: 600px;
}

.top, .bottom {
	background-repeat: no-repeat;
}

.top {
	background-image: url(top.png);
	height: 387px;
	position: absolute;
}

.middle {
	background-image: url(middle.png);
}

.bottom {
	background-image: url(bottom.png);
	height: 50px;
}

.content {
	position: relative;
	z-index: 10;
	margin: 28px 48px 0 28px;
	padding-bottom: 60px;
}


clearfix к блоку .content необходимо применить за тем, чтобы margin-bottom у элемента p не создавал промежутка между блоками .middle и .bottom

P.S.: Проверено в IE7 выглядит так же как и в IE9, плюс ко всему в IE6 тоже изменений нет, можно сказать перевыполнили норму по требованиям к кроссбраузерности.
Хотел сначала назвать статью «Фон со смещением под контентом», но подумал, что так будет более корректнее.
Картинки top.png, middle.png и bottom.png соответственно вырезанные картинки по линиям верх, центр и низ.

Спасибо за ванимание.
Жду критику в комментариях.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх