Каждый год 9 апреля — CSS Naked Day! Это когда на сайте отключаются все таблицы стилей и сайт виден посетителям во всей своей красе :) Как и в прошлом году, я с радостью поддерживаю эту чудесную акцию, которая помогает посмотреть на сайт и код с другой стороны. Цель понятна — популяризация и продвижение веб-стандартов.
За минувший год этот блог поменял дизайн и вёрстку. Все проблемы, выявленные в прошлом году, как мне кажется, устранены. Польза очевидна.
Сегодня — CSS Naked Day 2008! Ай-да, блогеры, раздеваемся и ходим голыми!
Принять участие в акции может любой, кому нечего скрывать, кроме своих тэгов. Для этого необходимо:
P.S. За одноузрел недостатки своей верстки. Поправлю в ближайшее время :)
Вот тут советуют как делать резиновые блоки (по вертикали) с подложкой. Конечно, видел я разные варианты, но с нижним фоном в виде <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>Предлагаю поупражнятся в оптимизации и изящности :)
4 комментариев »