CSS | Позиционирование: Введение

Позиционирование. Основные свойства → ← Блоки

Позиционирование: Введение.

Введение

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

Рассмотрим два способа верстки веб-страницы:

Табличная верстка

Это именно то, чем мы заниматься не будем. Но рассмотреть стоит хотя бы для того, чтобы понять, почему так верстать не стоит.

Во время зарождения HTML никаких средств позиционирования (в том числе и CSS) не существовало. Видимо, это и дало толчок использовать в качестве разбиения страницы на области таблиц HTML (тег <table>). Такой подход позволил размещать информацию в две, три колонки и больше.

В принципе, никаких особых знаний для такой верстки здесь не нужно - достаточно лишь представить, что страница - это одна большая таблица, и отдельные ее области - это отдельные ячейки. Далее все это нужно преобразовать в HTML и разместить содержание страницы по ячейкам. Все очень просто. Но если вы захотите изменить дизайн, структуру таблицы, придется изменять HTML код. А разве дизайнер при внедрении в сайт очередного шаблона обязан затрагивать логическое разбиение страницы?

К тому же вероятнее всего при табличной верстке информация о ширине ячеек и расстояниях между ними будет содержатся в атрибутах тегов, потому что перенос ее в CSS при таком подходе не дал бы ничего.

Давайте рассмотрим пример трехколоночного шаблона, сделанного с помощью таблиц (примерный вид, атрибуты опущены):

...
<table>
    <tr>
        <td>
            //Первый блок информации
        </td>
        <td>
            //Второй блок информации
        </td>
        <td>
            //Третий блок информации
        </td>
    </tr>
</table>
...

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

Блочная верстка

Верстка при помощи блоков спасет нас от правки HTML. Рассмотрим такой код страницы:

...
<div id="main">
    <div id="block-1">
        //Первый блок информации
    </div>
    <div id="block-2">
        //Второй блок информации
    </div>
    <div id="block-3">
        //Третий блок информации
    </div>
</div>
...

А теперь, изменяя CSS, мы получим несколько шаблонов:

...и так далее.

Ясно, что при использовании таблиц нам бы пришлось каждый раз исправлять HTML страницы. Здесь же мы обходимся одним CSS.

Примечание

Вы можете подумать: "Ну и что такого плохого в том, что я исправлю HTML страницы? Не каждый же день я меняю дизайн, в конце концов." Вы, конечно, правы. Я и сам для себя не нашел особо веских доводов в пользу блочной верстки, кроме того, что "так гласит идеология, так советуют стандарты, так правильней". Единственная причина, почему мы расматриваем блочную верстку, - это тематика сайта, CSS. Поэтому здесь я агитирую за соблюдение стандартов :).

Позиционирование. Основные свойства → ← Блоки
cssing