3.8. Основы css-верстки. Создание «резинового» шаблона.

3.8.1. Создание макета из одной колонки

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

body {

  margin-left:20%;

  margin-right:20%;

}

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

body {

  width:600px;

}

При этом колонка будет выровнена по левому краю окна браузера. И если нам необходимо вновь отцентрировать ее, то без дополнительного блока не обойтись.

<div id="content">

... содержимое блока ...

</div>

и далее вот такой css код:

body {

  width:600px;

  padding-left:50%;

}

#content {

  width:600px;

  margin-left:-300px;

}

Чтобы понять суть этого приема, надо хорошо понимать основы модели визуального форматирования. В частности точно представлять, из каких именно величин складывается общая ширина (высота) блока. При этом еще необходимо учитывать различия в реализации блочной модели конкретных браузеров. Особенно того, названИЕкоторого Вы и так знаете.

В элементе body, который имеет ширину 600px мы задали левый отступ в 50%, добавив таким образом к ширине элемента половину ширины окна браузера. При этом левый край блока content расположился бы точно по центру окна, но мы предусмотрительно сдвигаем его ровно на половину ширины, на 300px влево, задавая отрицательное значение левого поля.

Теперь блок content расположен точно в центре экрана и ширина его фиксирована. Этот прием работает во всех популярных браузерах.

3.8.2. Макет из двух колонок

Попробуем теперь создать макет страницы с двумя колонками, изменяющими свою ширину в зависимости от ширины окна браузера, т.е. «резиновый» макет. И сначала создадим HTML-разметку, форматировать которую будем с помощью стилевых таблиц.

<div id="header">

... шапка страницы ...

</div>

<div id="content">

... основное содержимое страницы ...

</div>

<div id="sidebar">

... колонка меню ...

</div>

<div id="footer">

... подвал ...

</div>

А теперь css код, который сформирует нужное нам визуальное представление:

#content {

float:left;

width:67%;

background-color:#CCC;

}

#sidebar {

margin-left:67%;

background-color:#FFC;

}

#header {

background-color:#FCF;

text-align:center;

}

#footer {

clear:both;

text-align:center;

background-color:#CFF;

}

Мы используем свойство float для того, чтобы задать положение блока content на странице и задаем ширину этого блока равной двум третям окна браузера. В соответствии с правилами CSS, последующее содержимое включенное в «плавающую модель», а в нашем случае это блок sidebar, будет «обтекать» блок content со стороны, противоположной направлению выравнивания, т.е. Справа.

Свойство float работает примерно как атрибут align, который применяется в HTML, но дает больше возможностей управления отображением элементов за счет использования полей, рамок и отступов.

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

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

Правда такой вариант имеет недостаток. При наличии в блоке sidebar содержимого большего объема, чем в блоке content, «лишнее» содержимое перестает обтекать блок content и занимает всю ширину окна браузера.

Устранить недоразумение возможно, если подкорректировать значения левого отступа или левого поля элемента sidebar. Для этого мы используем свойство margin-left:67%.