Далек, как прежде идеал,
 Богатый выбор – те же грабли,
 А, что в конце узнаешь вряд ли,
 На эшафот иль пьедестал...
Gordi

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

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

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

В общем случае глобальная разметка страницы состоит из трех слоев и имеет приблизительно такой вид:

  <div id=”header”>HEADER</div>
  <div id=”middle”>CONTENT</div>
  <div id=”footer”>FOOTER</div>

Классика жанра.

И все-таки желание при отключенных стилях получить расположение области контента выше, чем header и footer вполне обоснованно и уместно.

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

Перенос блока header ниже контейнера middle по html-коду, может оказаться полезным и в ряде других случаев.

В качестве анонса.

Статья об интеграции горизонтального меню с вложениями в скрипты Мастера Lasto, остается в планах автора. Есть определенная последовательность в написании постов. Одно вытекает из другого. Статья о центрировании горизонтального меню уже была, теперь данное меню расположенное в header опускаем ниже области контента.

Принципиально исключено применение прокладок типа:

<div class=”clear”></div>

Или аналогичным им, что часто является следствием использования в разметке страницы техники float:left(right).

Исходя из выше сказанного, наш html-код будет выглядеть так:

  <div id=”middle”>CONTENT</div>
  <div class=”header”>
    <div id=”header”>HEADER</div>
  </div>
  <div id=”footer”>FOOTER</div>

Сотворить нечто подобное не составляет никаких проблем.

К сожалению, полноценное использование абсолютного позиционирования, потребует внесения блока footer в контейнер middle, а там есть свои нюансы. Поэтому воспользуемся редко применяемым приемом, как-то - задаем необходимое значение padding-top для body.

Далее, класс header абсолютно позиционируем с нулевыми значениями top и left, задав соответствующую высоту равную или чуть меньше ранее указанного значения padding-top для body.

Естественно, для body в стилях должно присутствовать правило position:relative;

Никаких других контейнеров не предусмотренно. Все будет находиться строго по центру окна браузера. С регурируемой максимальной и минимальной шириной всех блоков. Приблизительно так.

Перейдем к блоку middle:

<div id="middle">
  <div class="main">
    <div class="wrap">
      <div class="content">Center Content</div>
      <div class="left">Center Left</div>
    </div>
    <div class="right">Center Right</div>
  </div>
 </div>

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

Возможно, кому-то html-код покажется избыточным, но в стремлении приблизиться к идеалу, а в это понятие включаю в первую очередь минимум html и css, гибкую, простую настройку всех трех колонок по ширине, центральная колонка должна обладать регулируемым параметром min/max-width, легкое исключение одной из них с объединением ее с областью контента или без, одинаковая высота колонок равная по высоте самой высокой.

Сплошная тавтология… :)

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

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

Структурно блоки header и footer, ничем от выше приведенной секции не отличаются.

И тому есть довольно простое объяснение.

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

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

Стили сгруппированы таким образом, что у каждого слоя все параметры регулируются, не зависимо друг от друга.