Интернет › 10.03.2008

Ключевые слова: CSS, Internet Explorer, дизайн

Резиновые изделия

Вот тут советуют как делать резиновые блоки (по вертикали) с подложкой. Конечно, видел я разные варианты, но с нижним фоном в виде <img /> — не встречал. Кроме того, оно не работает в IE7.

Мне сразу же захотелось упростить и улучшить исполнение. Задача тривиальная, исходные данные оставим, как есть — три картинки для фона, один растяжимый по вертикали блок и пару параграфов текста. За минуту был сделан вариант с тремя вложенными дивами с background. Не очень семантично, зато минимально и везде работает.

* {
	margin: 0;
	padding: 0;
}

.block {
	width: 210px;
	background: url("middle.jpg") 0 0 repeat-y;
}

.block p {
	font-size: 75%;
	font-family: Georgia;
	padding: 0 20px;
}

.block .top {
	width: 210px;
	background: url("top.jpg") top left no-repeat;
	padding-top: 30px;
}

.block .bottom {
	width: 210px;
	background: url("bottom.jpg") bottom left no-repeat;
	padding-bottom: 30px;
}

<div class="block">
	<div class="top">
		<div class="bottom">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Aenean dictum, neque id ornare porttitor, nisl odio sollicitudin arcu,
			eu scelerisque nibh lorem in ipsum. Suspendisse dolor lacus, vulputate eu…</p>
		</div>
	</div>
</div>

Предлагаю поупражнятся в оптимизации и изящности :)

Комментарии

10.03.2008 // 22:46
kirionis.blogspot.com написал(а):
Почему не работает в IE7?
У меня сработало все, как задумано...
Ответить
10.03.2008 // 22:49
Slaver написал(а):
А мой IE7 вот такую красотищу показывает: http://clip2net.com/clip/m3842/1205182111-clip-8kb.png :)
Ответить

Добавить комментарий

Разрешены теги: <a>, <strong>, <em>, <del>, <blockquote>