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

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

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

1. Grail Gordi
2. Grail-Border
3. margin-bottom:-32767px;padding-bottom:32767px;

Для всех трех, краткости ради, привожу только html-структуру слоя #middle, на котором собственно и построена блочно-модульная концепция глобальной разметки:

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

Это необходимый и достаточный минимум, для создания полноценной web-страницы. Причем сдвиг на один уровень вверх, достигаемый переназначением стилей контейнера #middle на body, позволит избавиться от одного блока.

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

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

Естественно, стили для каждого метода свои, но они довольно хорошо оптимизированы и многие из них кочуют в неизменном виде из одного в другой

Вы можете убедиться в этом, посмотреть примеры на их основе.

"Техника Gordi" это не только взгляд автора на структуру web-страницы, но и комплекс мер направленный на оптимизацию html-кода и стилей, легкую трансформацию в разные варианты визуального представления макетов по упомянутым техникам. Все многообразие расположения колонок навигации относительно области контента вы сможете найти, перейдя на страницы с примерами по ссылкам указанным в начале поста.

Теперь поговорим о достоинствах и недостатках той или иной техники.

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

Разметка на основе "Grail Gordi" самая простая и в некотором смысле самая надежная.

Недостатками сводящим на нет все преимущества, является отсутствие возможности задать колонкам, отведенным под навигацию раздельную фоновую заливку или background:url(…) repeat-y, все определяется фоном контейнера #middle.

Разделительные вертикальные линии, в общем случае border, отделяющий область контента от боковых колонок, может быть присвоен только .wrap

Вариация на тему "Grail-Border" решает проблему различной фоновой заливки, но оставляет не решенным вопрос с background:url(…) repeat-y; и border-ами.

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

Идеальной, на взгляд автора, разметкой является разметка на основе техники:

margin-bottom:-32767px;padding-bottom:32767px;

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

Проблем с background-ом заданным любым способом и вертикальными линиями нет никаких. Пример там же.

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

Добавив несколько стилевых правил учитывающих ширину картинки, вам не придется тупо рисовать и подгонять общий background:url(…) repeat-y, если в этом возникнет необходимость. Все раздельно, что дает возможность, делать практически все, что вашей душе угодно.

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

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

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

В последующих частях цикла, вам будет представлены полноценные страницы и даны линки на реальные ресурсы, где "Техника Gordi" нашла свое применение.

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

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

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

В общем никаких компромиссов. Контент, информационная составляющая любой web-страницы, впереди планеты всей.

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

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

  <div id="middle">
    <div class="wrap">… </div>
  </div>
  <div id="footer">… </div>
  <div class="header">
    <div id="header">… </div>
  </div>

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

Контейнер с классом wrap служит для тех же целей, подготавливая место для header-а, а также позволяет создавать необходимую структуру области контента и колонок навигации, в данном конкретном случае, не рассматривается.

Стили описывающие поведение нашей разметки:

* {margin:0;padding:0;}
html,body {height:100%;}
body {background-color:#eee;position:relative;}
#middle,#header,#footer {margin:0 auto;width:930px;}
*html #middle {overflow:visible;height:100%;}
*html .wrap {zoom:1;}
#middle {
  background-color:#fff;
  border:#000 solid;
  border-width:0 1px;
  margin-top:-41px; /* height footer */
  min-height:100%;
}
.wrap {margin-top:151px;} /* height #header+#footer */
.header {position:absolute;top:0;left:0;width:100%;}
#header {
  background-color:#aaf;
  border:#000 1px solid;
  height:110px;
}
#footer {
  background-color:#eef;
  border:#000 1px solid;
}

Скриншот.

Опаньки, а что с OPERA? А почему собственно появился не запланированный отступ сверху и вертикальная прокрутка? Причем, это происходит в OPERA9.xx, FF2(3), IE8 beta2. Зато IE6 просто молодец.

Вопрос, даже не в том, кто прав, а что делать? Остановитесь, подумайте. Ответили? Нет, тогда читаем дальше.

Ответ на вопрос содержится в заголовке поста, да именно, указание стилевого правила:

body {position:relative;}

вводит в заблуждение крутые и продвинутые браузеры. А вот всенародно "любимый" IE6 на высоте.

Удаляем.

Скриншот.

Что-то опять не так. Вертикальная прокрутка и поверьте на слово, примеры само собой будут приведены, другие неприятности.

Поведение перечисленных выше браузеров аналогично.

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

Догадались? Если нет, то еще раз внимательно читаем заголовок поста.

Необходимо в стили добавить:

#middle,#header,#footer {overflow:hidden;}

Очередной скриншот.

Спасло ли это действо, положение? Нет вертикальной прокрутки уже плюс.

А если вернуть:

body {position:relative;}

Во как, часть header-а улетела вверх.

Отыграем назад.

Визуальные разночтения заметны.

Если поменять

.wrap {margin-top:151px;}

на

.wrap {padding-top:151px;} 

Картина поменяется на обратную:

Кто виноват, не известно, но вот что делать в данной ситуации?

Ответ ищем в заголовке.

Сместим акцент :

.wrap {border-top:151px solid;}

Вот теперь, полный фен-шуй.

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

Переходим на страницу с примерами

P.S. Именно по этой методике прибивается footer к нижней границе окна браузера в одной из последующей частей цикла "Техника Gordi"

Новый год не за горами.

Время итогов и планов на будущее.

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

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

Частично многое из того, что будет изложено, повторяет мысли озвученные в цикле "Иллюзия идеала" и берет с него свое начало. Также цель данной публикации - более полно сформулировать принципы, которыми стоит, на мой взгляд, руководствоваться при верстке глобальной разметки.

Не уверен, что мне удастся полностью раскрыть суть предлагаемой вам концепции.

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

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

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

Перейдем от слов к делу.

Скриншот.

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

Главная фишка, соль концепции в двух словах заключается в том, что шапка, центральная часть и подвал описываются одним и тем же html-кодом и стилями. А основой слоев как-то - #header, #middle, #footer является тот самый пресловутый контейнер #middle с начинкой, которому в последнее время на страницах блога было уделено так много внимания.

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

Поведение макета, в каком-то смысле, напоминает обычную таблицу, но в отличие от нее обладает большим потенциалом.

Области, обозначенные на скриншоте белым цветом с условными названиями – "Header Center", "Middle Content" и "Footer Center" резиновые, с настраиваемыми параметрами min/max-width, для IE6 используется эмуляция через width:expression.

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

А говорить о том, что колонки независимо от наполнения информацией обладают иллюзией одинаковой высоты даже не стоит, с этого все и начиналось. И это проблема не без известного изящества, нашла свое решение при минимуме html-кода и css.

Не которые варианты контейнера #middle были представлены ранее. Любому из них присущи, как достоинства, так и недостатки, но у вас есть выбор и под каждую конкретную ситуацию можно найти максимально подходящее и устраивающее вас решение.

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

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