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

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

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

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

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

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

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

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

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

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

Скриншот.

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

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

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

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

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

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

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

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

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

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