Верстка блоками DIV - Мои статьи - Каталог статей

Верстка блоками DIV имеет ряд преимуществ по сравнению с табличной версткой. Верстка блоками DIV обеспечивает более быструю загрузку страницы сайта, содержимое блоков DIV отображается по мере загрузки (в отличие от таблицы, в которой содержимое не отобразиться до тех пор, пока все ее содержимое не загрузиться), код страницы удобочитаем. Но и блочная верстка не идеальна, есть и недостатки. Так нельзя получить представление данных как это делает таблица. То есть таблицы нужно использовать для отображения табличных данных. Табличную верстку также можно использовать и для задания структуры страницы, но злоупотреблять все, же не стоит. Давайте посмотрим, как можно управлять положением блока DIV на странице сайта.
Для начала рассмотрим стилевое свойство float, которое управляет позиционированием перемещаемого блока. Свойство float может принимать значения

left - элемент страницы принудительно выравнивается по левому краю;
right - элемент страницы принудительно выравнивается по правому краю;
none - элемент страницы не перемещается, будет отображен там, где он должен быть (значение по умолчанию).

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

left - элемент страницы устанавливается ниже любого предыдущего, перемещенного влево блока;
right - элемент страницы устанавливается ниже любого предыдущего, перемещенного вправо блока;
both - элемент страницы устанавливается ниже любого предыдущего перемещенного блока;
none - ограничений на положение блока относительно перемещаемых блоков не накладывается.

Для иллюстрации работы свойств float и clear, а также для ознакомления с основами, как осуществляется верстка блоками DIV, рассмотрим следующий пример: создадим три блока DIV

Код

<div style="background:#FA911D;">1</div>
<div style="background:#0080C0;">2<br>text<br>text</div>
<div style="background:#80FF00;">3<br>текст</div>

В браузере отобразиться этот HTML-код следующим образом

2
text
text

3
текст

Все три блока располагаются один под другим и имеют ширину равную ширине окна браузера (или ширине HTML-элемента страницы, с этим кодом). Теперь изменим ширину каждого блока DIV.

Код

<div style="background:#FA911D; width:240px;">1</div>
<div style="background:#0080C0; width:150px;">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px;">3<br>текст</div>

Отобразится в браузере этот код следующим образом

2
text
text

3
текст

Ширина блоков будет у каждого своя, но располагаться будут также один под другим. Далее каждому блоку укажем стилевое свойство float со значение left:

Код

Получим следующее представление

2
text
text

3
текст

Ширина у блоков осталась такая же, как и в предыдущем примере, но свое положение они изменили: выстроились в один горизонтальный ряд. Если добавить еще один блок, то он отобразится не под записанными ранее блоками, а по-другому. В общем случае определить, как отобразится его содержимое, нет возможности.

Код

<div style="background:#FA911D; width:240px; float:left;">1</div>
<div style="background:#0080C0; width:150px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px; float:left;">3<br>текст</div>
<div style="background:#36E065;">4<br>контент<br>контент<br>контент</div>

Но в нашем случае он отобразится следующим образом

2
text
text

3
текст

4
контент
контент
контент

Чтобы новый блок располагался ниже предшествующих блоков, нужно задать ему свойство clear, с соответствующим значением, в нашем случае можно задать значение либо both, либо left:

Код

<div style="background:#FA911D; width:240px; float:left;">1</div>
<div style="background:#0080C0; width:150px; float:left; ">2<br>text<br>text</div>
<div style="background:#80FF00; width:130px; float:left;">3<br>текст</div>
<div style="background:#36E065; clear:left;">4<br>контент<br>контент<br>контент</div>

Полученный код отобразится следующим образом (причем в разных браузерах, таких как IE, Opera и Firefox, пример будет отображаться с отличиями)

2
text
text

3
текст

4
контент
контент
контент

С помощью приведенных свойств создают структуры страницы различной сложности, в том числе состоящих из трех столбцов, с резиновыми либо c фиксированными размерами.
Верстка блоками DIV предусматривает также и центрирование блока div в каком-либо элементе HTML-кода. Для центрирования блока в браузерах Opera и Firefox нужно использовать свойства margin-left и margin-top со значением auto, например

Код

<div style="margin-left: auto; margin-right: auto; width: 50%;">
содержимое блока DIV
</div>

Но подобный код не работает в браузере IE6, для этого браузера нужно центрируемый блок DIV поместить в дополнительный блок DIV, в котором будет стилевое свойство text-align со значением center. Например

Код

<div style="text-align:center;">
<div style="width: 50%;">
Содержимое блока DIV
</div>
</div>

То есть в браузере IE6 можно управлять положением блока DIV свойством text-align, используя значения left, center, right. В браузерах Opera и Firefox управлять положением блока DIV с помощью свойства text-align нельзя, только свойством margin.
В общем случае для центрирования блока DIV получим код, который будет одинаково отображаться в различных браузерах

Код

<div style="text-align: center;">
<div style="width: 50%; margin-left: auto; margin-right: auto; ">
Содержимое блока DIV
</div>
</div>

Верстка блоками DIV не обходится без управления положением HTML-элементов с помощью стилевого свойства position, которое определяет схему позиционирования блока. Свойство position может принимать значения

static - задает обычный блок, который не позиционируется индивидуально, а позиционируется в обычном потоке. Свойства top, left, bottom и right не учитываются. Является значением по умолчанию;
relative - задает относительное позиционирование блока. Заключается в следующем. Сначала положение блока рассчитывается как при обычном потоке (то есть не берется во внимание относительное позиционирование). Затем блок смещается относительно своего нормального положения в соответствии со значениями свойств top, left, bottom и right. Последующее содержимое выводится в поток так, как будто блок, относительно позиционированный, не был смещен;
absolute - задает абсолютное позиционирование блока. Абсолютно позиционируемые блоки изымаются из общего потока и не влияют на выводимое последующее содержимое. Положение абсолютно позиционируемого блока задается свойствами top, left, bottom и right относительно родительского элемента (блока);
fixed - задает фиксированное позиционирование блока. При фиксированном позиционировании положение блока рассчитывается, как и при абсолютном позиционировании, но в дальнейшем блок фиксируется и относительно окна браузера и не прокручивается вместе с остальным содержимым страницы. Данное свойство поддерживается браузерами Opera и Firefox.

Для задания положения блоков, у которых свойство position имеет значение relative, absolute или fixed, используются свойства top, left, bottom и right. Познакомимся с ними.

top - задает смещение верхней границы позиционируемого блока вниз относительно верхней границы родительского элемента;
left - задает смещение левой границы позиционируемого блока вправо относительно левой границы родительского элемента;
bottom - задает смещение нижней границы позиционируемого блока вверх относительно нижней границы родительского элемента;
right - задает смещение правой границы позиционируемого блока влево относительно правой границы родительского элемента.

Задавать величины перечисленных выше свойств можно в абсолютных значениях (например, пиксели), в процентных величинах относительно размеров родительского элемента, и также могут принимать значение auto (является значением по умолчанию).
При абсолютном, относительном и фиксированном позиционировании блоки могут накладываться друг на друга, и в этом случае может появиться вопрос, какой из них окажется "выше"? То есть, какой элемент будет отображаться, а какой будет перекрываться находящимся "выше" блоком. Решить этот вопрос поможет свойство z-index. Оно определяет позицию уровня, которую будет занимать блок. Его значением может быть любое положительное или отрицательное целое число. При этом элементы с большим значением z-index будут перекрывать блоки с меньшим значением этого свойства.
Для иллюстрации описанных выше свойств рассмотрим пример. Создадим несколько блоков без свойств позиционирования.

Код

<div style="background:#A485B8;">1<br>text</div>
<div id="dopoln_block">
<div style="background:#66AAD7; width:200px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>

Для ознакомления с относительным позиционированием добавим в один блок свойства относительного позиционирования

Код

<div style="background:#A485B8;">1<br>text</div>
<div id="dopoln_block">
<div style="background:#66AAD7; width:200px; position: relative; top:10px; left:10px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>

Для ознакомления с абсолютным позиционированием посмотрите, как отобразится следующий код в браузере

Код

<div style="background:#A485B8;">1<br>text</div>
<div style="position:relative;" id="dopoln_block">
<div style="background:#66AAD7; width:200px; position: absolute; top:10px; left:10px;">2<br>текст</div>
</div>
<div style="background:#C6C600;">3<br>содержимое</div>

В последнем примере, для того чтобы положение абсолютно позиционируемого блока можно было задавать свойствами top и left относительно того места где он был бы расположен при обычном позиционировании, в код был добавлен относительно позиционируемый блок с id="dopoln_block".
В завершение темы "Верстка блоками DIV", приведу шаблон, который позволяет получить очень распространенную схему верстки: вверху страницы заголовок, далее три колонки с основным содержимым страницы и внизу страницы блок, обычно содержащий информацию о копирайте. Причем нижний блок будет находиться внизу страницы даже при малом количестве содержимого на странице. Также две колонки (левая и правая) из трех с основным содержимым будут с фиксированными размерами, а средняя будет "резиновая", то есть она будет менять ширину в зависимости от разрешения экрана монитора. Пример можно посмотреть на странице шаблон.

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Шаблон верстки страницы из 3 колонок</title>
<style type="text/css">

* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#9393FF; height:70px; width:100%; }

#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 800 ? "100%" : "800px"); overflow:hidden; }

#container1 { width:100%; float:left; margin-right:-180px; }
#container2 { background:#000000; margin-right:180px; }
#container3 { width:100%; float:right; margin-left:-200px; }

#left { background:#AEAE00; width:200px; float:left; }
#center { background:#D86927; margin-left:200px; }
#right { background:#C0C0C0; float:right; width:180px; }

#min_width { width:800px; }

#footer { position:absolute; bottom:0px; background:#8F9EB1; width:100%; height:60px; }

</style>
</head>
<body>
<div id="header">Заголовок страницы</div>

<div id="content">
<div id="container1">
<div id="container2">
<div id="container3">
<div id="center">Центральная колонка</div>
</div>
<div id="left">Левая колонка</div>
</div>
</div>

<div id="right">Правая колонка</div>

</div>

<div id="footer">Копирайт</div>
</body>
</html>

Верстка блоками DIV позволяет верстать разные по сложности сайты с использованием приведенных выше свойств каскадных таблиц стилей. Надеюсь, эта статья поможет Вам разобраться с версткой и сделать много хороших и красивых сайтов. Удачи!