Все давно уже сказано, но так как никто не слушает, приходится постоянно возвращаться назад и повторять все сначала.
Андре Жид

Двух колоночная разметка

Примеры разметки web-страниц с фиксированной и плавающей - ограниченной по min/max-width, шириной области контента.

Все представленные примеры, можно смело отнести к классу разметки на основе "Техники Gordi".

Тактико-техническими характеристики:

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

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

Примеров много, чтобы хоть как-то их различать, название примера будет приблизительно таким:

Header(CL)-Middle(CL)-Footer(CR), что расшифровывается следующим образом:

  • header состоит из двух частей - контентная часть и блок для лого
  • middle - Content + левая или правая колонка навигации
  • footer состоит из двух частей - блок копирайта и контент

Фиксированная ширина:

Плавающая ширина:

Изучение примеров из раздела "Фиксированная разметка", позволит вам довольно просто сделать сто процентную высоту страницы.

Большинство примеров публикуются впервые. Боевой раскрас - фоновая заливка и border, дают четкое представление о структуре web-страницы.

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

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

Оставить комментарий.