Web-Anatomy.Ru

Десятилетию Рунета посвящается

К выпуску № 20 («Свобода выбора или выбор свободы?»)

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

Вот наиболее яркий случай такого противоречия. Во всякой таблице, состоящей из двух ячеек, расположенных в одну строку, обе ячейки при любом раскладе будут иметь одинаковую высоту. Когда же речь заходит о верстке слоями, мы теряем возможность «увязки» высот соседних блоков между собой, если, конечно, этот параметр не задан жестко в пикселях, что при произвольном количестве контента в блоках неприемлемо.

(Загляните на главную страницу сайта W3C — на ней отчетливо видно, что левый, средний и правый блоки различны по высоте.)

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

Другой симптоматичный случай. Великим соблазном для новичков становится возможность абсолютного позиционирования блоков. Но эйфория от успешных экспериментов с расположением на пространстве страницы «шапки», панели навигации и области основного текста быстро улетучивается, когда дело доходит до «подвала». Ибо блок основного текста обычно не нормируется по высоте, и абсолютные координаты его нижней границы в большинстве случаев неизвестны. Верхи не могут, а низы не хотят — попытка спозиционировать «подвал» при помощи свойства bottom тоже терпит крах, ибо блок при этом «привязывается» к нижней границе области просмотра, то бишь, окошка браузера. Опыты откладываются до лучших времен…

Открою страшный секрет. Абсолютное (и фиксированное) позиционирование как основная тактика верстки страниц при помощи слоев используется достаточно редко. Куда чаще применяются более простые схемы позиционирования — статическая и относительная, в особенности в сочетании с идеологией обтекаемых элементов.

Я подготовил для вас два простейших примера полноценных страниц, каждая из которых состоит из четырех функциональных областей: «шапки», вертикально ориентированного навигационного блока, области основного текста и «подвала». Ни один из элементов в этих примерах не спозиционирован в абсолютных координатах.

Прошу полюбоваться кодом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Твердое совершенство</title>
<style type="text/css">
<!--
* {margin: 0px; padding: 0px; border: none}
body {font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; text-align: center; color: #000; background-color: #666}
div {position: relative}
#common {width: 760px; margin: auto; background-color: #fff0cc; text-align: left}
#header {width: 100%; height: 100px; background-color: #9cf}
#main {width: 560px; float: right; clear: right; background-color: #fff}
#navbar {width: 200px; float: left; clear: left}
#footer {width: 100%; height: 50px; clear: both; background-color: #fc0}
h1, h2, p {padding: 10px}
-->
</style>
</head>

<body>
<div id="common">
<div id="header"><h1>Твердое совершенство</h1></div>
<div id="main"><!-- Здесь располагается основной текст страницы --></div>
<div id="navbar"><!-- Сюда помещаются ссылки навигационного меню --></div>
<div id="footer"><p>Это финал.</p></div>
</div>
</body>

</html>

В первой строчке листа стилей я обнулил все поля, границы и рамки, чтобы чистота эксперимента не страдала от вольнодумства браузеров. Лучше сделаем ненулевой padding у заголовков и абзацев, слагающих нашу страницу — см. последнюю строку листа стилей.

Для разнообразия мы отцентрировали содержимое страницы — обратите внимание, чтобы это работало, нужно указать margin: auto для блока common (который является той самой «подложкой» для всех остальных функциональных блоков.)

Код альтернативного варианта (с «резиновым» дизайном) еще проще — там не нужно ничего центрировать. В целях экономии места после ссылки на собственно страницу мы приводим лишь листинг модифицированного листа стилей. Все остальное остается без изменений.

* {margin: 0px; padding: 0px; border: none}
body {font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; color: #000; background-color: #666}
div {position: relative}
#common {width: 100%; background-color: #fff0cc}
#header {width: 100%; height: 100px; background-color: #9cf}
#main {width: 75%; float: right; clear: right; background-color: #fff}
#navbar {width: 25%; float: left; clear: left}
#footer {width: 100%; height: 50px; clear: both; background-color: #fc0}
h1, h2, p {padding: 10px}

В заключение, по просьбам трудящихся — бонус.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Простор для контента</title>
<style type="text/css">
<!--
* {margin: 0px; padding: 0px; border: none}
body {font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; color: #000; background-color: #666}
div {position: relative}
#common {width: 100%; background-color: #fff0cc}
#header {width: 100%; height: 100px; background-color: #9cf}
#navbar {float: left; top: 0px; width: 200px}
#main {top: 0px; margin-left: 200px; background-color: #fff}
#footer {width: 100%; height: 50px; clear: both; background-color: #fc0}
h1, h2, p {padding: 10px}
-->
</style>
</head>

<body>
<div id="common">
<div id="header"><h1>Простор для контента</h1></div>
<div id="navbar"><!-- Сюда помещаются ссылки навигационного меню --></div>
<div id="main"><!-- Здесь располагается основной текст страницы --></div>
<div id="footer"><p>Это финал.</p></div>
</div>
</body>

</html>

Полагаю, теперь вы без особых усилий сможете сверстать при помощи CSS2 страницу с произвольным количеством функциональных областей.

[Перейти к оглавлению]

© Артемий Ломов, 2004, 2005.