Двух колоночная разметка
Примеры разметки web-страниц с фиксированной и плавающей - ограниченной по min/max-width, шириной области контента.
Все представленные примеры, можно смело отнести к классу разметки на основе "Техники Gordi".
Тактико-техническими характеристики:
- Область контента - наиболее интересная часть сайта, выводится по html-коду раньше колонок навигации.
- Колонки центральной части разметки обладают иллюзией равной высоты.
- Для наглядности все блоки (колонки) имеют индивидуальную фоновую заливку, а также у каждого блока (колонки) независимый цвет border'a, что в конечном итоге, не является обязательным.
Автор не будет утомлять вас детальным описанием html-кода и стилей, возможно в дальнейшем пара-тройка примеров будет разобрана по косточкам в видео-ролике с подробным рассказом - как, что, почему и зачем.
Примеров много, чтобы хоть как-то их различать, название примера будет приблизительно таким:
Header(CL)-Middle(CL)-Footer(CR), что расшифровывается следующим образом:
- header состоит из двух частей - контентная часть и блок для лого
- middle - Content + левая или правая колонка навигации
- footer состоит из двух частей - блок копирайта и контент
Фиксированная ширина:
- Header-Middle(LC)-Footer
- Header-Middle(CR)-Footer
- Header(LC)-Middle(LC)-Footer
- Header(LC)-Middle(CR)-Footer
- Header(CR)-Middle(CR)-Footer
- Header(CR)-Middle(LC)-Footer
- Header-Middle(LC)-Footer(LC)
- Header-Middle(CR)-Footer(LC)
- Header-Middle(CR)-Footer(CR)
- Header-Middle(LC)-Footer(CR)
- Header(LC)-Middle(LC)-Footer(LC)
- Header(LC)-Middle(CR)-Footer(LC)
- Header(CR)-Middle(LC)-Footer(CR)
- Header(CR)-Middle(CR)-Footer(LC)
- Header(CR)-Middle(CR)-Footer(CR)
- Header(LC)-Middle(LC)-Footer(CR)
- Header-Middle(L-topC)-Footer
- Header-Middle(CR-top)-Footer
- Header-Middle(L-topC)-Footer(LC)
- Header-Middle(L-topC)-Footer(CR)
- Header-Middle(CR-top)-Footer(LC)
- Header-Middle(CR-top)-Footer(CR)
Плавающая ширина:
- Header-Middle(LC)-Footer
- Header-Middle(CR)-Footer
- Header(LC)-Middle(LC)-Footer
- Header(LC)-Middle(CR)-Footer
- Header(CR)-Middle(CR)-Footer
- Header(CR)-Middle(LC)-Footer
- Header-Middle(LC)-Footer(LC)
- Header-Middle(CR)-Footer(LC)
- Header-Middle(CR)-Footer(CR)
- Header-Middle(LC)-Footer(CR)
- Header(LC)-Middle(LC)-Footer(LC)
- Header(LC)-Middle(CR)-Footer(LC)
- Header(CR)-Middle(LC)-Footer(CR)
- Header(CR)-Middle(CR)-Footer(LC)
- Header(CR)-Middle(CR)-Footer(CR)
- Header(LC)-Middle(LC)-Footer(CR)
- Header-Middle(L-topC)-Footer
- Header-Middle(CR-top)-Footer
- Header-Middle(L-topC)-Footer(LC)
- Header-Middle(L-topC)-Footer(CR)
- Header-Middle(CR-top)-Footer(LC)
- Header-Middle(CR-top)-Footer(CR)
Изучение примеров из раздела "Фиксированная разметка", позволит вам довольно просто сделать сто процентную высоту страницы.
Большинство примеров публикуются впервые. Боевой раскрас - фоновая заливка и border, дают четкое представление о структуре web-страницы.
Естественно, автор демонстрирует возможности только его методов и приемов глобальной разметки web-страницы и абсолютно не претендует на то, что они единственно верные и правильные, и есть истина в последней инстанции.
Все приведенные примеры разметки легки для изучения - html-код и css максимально оптимизированы и любой интересующийся этой областью верстки, даже не обладая достаточными знаниями и опытом, при известном желании, сможет найти и взять, что-то полезное для себя.