Фиксированная разметка

Примеры разметки web-страниц с фиксированной шириной макета.

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

• Область контента - наиболее интересная часть сайта, идет по html-коду раньше всего.
• header и горизонтальное меню по html-коду находяться в самом конце страницы, что тоже немало важно.
• Колонки центральной части разметки обладают иллюзией равной высоты.
• Для наглядности все блоки (колонки) имеют индивидуальную фоновую заливку, а также у каждого блока (колонки) независимый цвет border'a, что в конечном итоге, не является обязательным.
• Все макеты имеют сто процентную высоту.

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

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

а для основного контейнера центральной части шаблона:

  overflow:hidden;

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

Прием позволяющий обойти данное препяствие, описан автором в статье: "Абсолютное позиционирование и колонки равной высоты", но и в нем есть свои нюансы.

Автор не будет утомлять вас детальным описанием html-кода и стилей, возможно в дальнейшем пара-тройка примеров будет разобрана по косточкам в видео-ролике с подробным рассказом - как, что, почему и зачем.

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

Метод впервые рассмотрен в статье - "OPERA и абсолютное позиционирование..." и в ее продолжении "Секрет Полишинеля..."

К бонусам можно отнести и некую ассиметрию в расположении колонок навигации по высоте.

Большинство примеров публикуются впервые и их разнообразия хватит практически на все случаи жизни.

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

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