Сверстать страницу при помощи CSS очень легко. Если раньше вы делали это при помощи таблиц, то CSS способ поначалу может показаться вам несколько более сложным, но это не так, он просто другой и, между прочим, имеет смысл использовать именно его.
Нужно рассматривать каждую часть страницы как отдельный кусок, который можно поместить куда угодно. Вы можете поместить эти части абсолютно, либо относительно других частей страницы.
Позиционирование
Свойство position используется для определения расположения элемента относительно других элементов. Оно может быть абсолютным (absolute), относительным (relative), статичным (static) и фиксированным (fixed).
Значение static – это значение по умолчанию. Оно формирует позицию элемента в нормальном порядке, так, как элемент появляется в коде HTML.
Значение relative во многом похоже на static, однако при этом элемент может быть смещен от своей исходной позиции при помощи свойств top, right, bottom и left.
Значение absolute выводит элемент из нормального потока элементов HTML и отпускает его в вольное плавание. В этом самом плавании элемент с абсолютным позиционированием, используя свойства top, right, bottom и left, может быть помещен в любое место страницы.
Значение fixed ведет себя как absolute, но элемент будет абсолютно позиционирован относительно окна браузера, а не веб-страницы, таким образом, теоретически, элементы с фиксированным позиционированием всегда остаются на заданном месте и не сдвигаются даже при прокрутке веб-страницы. Почему теоретически? Потому что это прекрасно работает в браузерах Opera и Mozilla и совсем не работает в IE.
Компоновка при помощи абсолютного позиционирования
Имея следующий код, при помощи абсолютного позиционирования можно создать традиционный двух колоночный макет веб-страницы:
<div id="navigation">
<ul>
<li><a href="//msiter.ru/this.html">Этот</a></li>
<li><a href="//msiter.ru/that.html">Тот</a></li>
<li><a href="//msiter.ru/theOther.html">Другой</a></li>
</ul>
</div>
<div id="content">
<h1>Тра-ля-ля тру-лю-лю</h1>
<p>Добро пожаловать на страницу тра-ля-ля и тру-лю-лю.</p>
<p>(Тра-ля-ля тру-лю-лю)</p>
</div>
Для этого достаточно подключить следующие стили CSS:
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
Вы увидите, что панель навигации будет отображаться шириной в 10em и в левой части страницы. Так как панель навигации имеет абсолютное позиционирование, нам ничего не нужно делать с остальным кодом страницы. Только задать левый отступ зоны контента, чтобы вместить панель навигации.
Просто, не так ли? А ведь вы не ограничены двумя колонками. Умея пользоваться позиционированием, можно иметь дело с любым количеством блоков. Например, если вы хотите добавить третью колонку, то нужно всего лишь добавить блок "navigation2" в код HTML и изменить CSS следующим образом:
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
/* устанавливаем верхний и нижний отступы в 0, а правый и левый – в 10em */
margin: 0 10em;
}
Единственным минусом абсолютно позиционированных элементов является то, что, так как они существуют в своем собственном мире, невозможно точно определить, где они заканчиваются. Так, если вы на практике решите использовать компоновку, описанную в приведенных выше примерах, то пока у вас будут небольшие навигационные панели и большая зона контента, никаких проблем не возникнет. Но вам придется отказаться от желания поместить какой-либо блок под ними, особенно, если вы используете относительные значения размеров. Если же вы все же хотите осуществить подобные вещи, то вам придется обратиться не к абсолютному позиционированию, а к обтеканию элементов.
Обтекание
Концепция обтекания или свободного перемещения состоит в возможности сдвигать элемент в правую или в левую часть строки. При этом окружающий контент будет "обтекать" этот элемент.
Обычно обтекание используется для позиционирования небольших элементов, однако его также можно применять и для позиционирования больших частей страницы, таких, например, как панель навигации. Для применения обтекания используется свойство float, которое может принимать три значения: left (смещение влево), right (смещение вправо) и none (запретить обтекание).
Возвращаясь к предыдущему примеру компоновки веб-страницы, можно применить следующий CSS код:
#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
Если вы не хотите, чтобы следующий элемент обтекал элемент, то вы можете использовать свойство clear. Значение left запретит элементу обтекать слева, right – запрет на обтекание справа, both – запрет на обтекание и слева, и справа. Таким образом, если вы, например, хотите создать нижний колонтитул, вы можете создать блок HTML с идентификатором "footer" и затем применить следующий стиль:
#footer {
clear: both;
}
И вы получите нижний колонтитул, который будет располагаться под всеми колонками, не зависимо от их размеров.
При помощи позиционирования, обтекания, отступов, полей и рамок можно создать любую компоновку веб-страницы. И нет ничего такого, что можно было бы сделать при помощи таблиц, и нельзя при помощи CSS.
Единственной причиной, оправдывающей использование таблиц для верстки страницы, является стремление достичь совместимости со старыми браузерами. При этом не существует такой задачи, которую нельзя было бы решить при помощи тегов <span> и <div>.
