Трех колоночная разметка
Примеры разметки web-страниц с фиксированной и плавающей - ограниченной по min/max-width, шириной области контента.
Все представленные примеры, можно смело отнести к классу разметки на основе "Техники Gordi".
Тактико-техническими характеристики:
- Область контента - наиболее интересная часть сайта, выводится по html-коду раньше колонок навигации.
- Колонки центральной части разметки обладают иллюзией равной высоты.
- Для наглядности все блоки (колонки) имеют индивидуальную фоновую заливку, а также у каждого блока (колонки) независимый цвет border'a, что в конечном итоге, не является обязательным.
Автор не будет утомлять вас детальным описанием html-кода и стилей, возможно в дальнейшем пара-тройка примеров будет разобрана по косточкам в видео-ролике с подробным рассказом - как, что, почему и зачем.
Примеров много, чтобы хоть как-то их различать, название примера будет приблизительно таким:
H(LCR)-M(LCR)-F(LCR), что расшифровывается следующим образом:
- H(header) состоит из трех частей - (Left-Content-Right)
- M(middle) - контент и колонки навигации - (Left-Content-Right)
- F(footer) состоит из трех колонок - (Left-Content-Right)
В примерах колонки меняют свое расположение.
Фиксированная ширина:
- H(LCR)-M(LCR)-F(LCR)
- H(LCR)-M(CLR)-F(LCR)
- H(LCR)-M(LRC)-F(LCR)
- H(LRC)-M(LCR)-F(LCR)
- H(LRC)-M(CLR)-F(LCR)
- H(LRC)-M(LRC)-F(LCR)
- H(CLR)-M(LCR)-F(LCR)
- H(CLR)-M(CLR)-F(LCR)
- H(CLR)-M(LRC)-F(LCR)
- H(LCR)-M(LCR)-F(LRC)
- H(LCR)-M(CLR)-F(LRC)
- H(LCR)-M(LRC)-F(LRC)
- H(LRC)-M(LCR)-F(LRC)
- H(LRC)-M(CLR)-F(LRC)
- H(LRC)-M(LRC)-F(LRC)
- H(CLR)-M(LCR)-F(LRC)
- H(CLR)-M(CLR)-F(LRC)
- H(CLR)-M(LRC)-F(LRC)
- H(LCR)-M(LCR)-F(CLR)
- H(LCR)-M(CLR)-F(CLR)
- H(LCR)-M(LRC)-F(CLR)
- H(LRC)-M(LCR)-F(CLR)
- H(LRC)-M(CLR)-F(CLR)
- H(LRC)-M(LRC)-F(CLR)
- H(LRC)-M(LCR)-F(CLR)
- H(LRC)-M(LCR)-F(LRC)
- H(CLR)-M(LRC)-F(CLR)
Плавающая ширина:
Список примеров с плавающей шириной области контента можно продолжить, но и представленных вполне достаточно, чтобы понять, как это функционирует и делается.
Примеры из раздела "Фиксированная разметка", позволят вам довольно просто сделать сто процентную высоту страницы.
Большинство примеров публикуются впервые. Боевой раскрас - фоновая заливка и border, дают четкое представление о структуре web-страницы.
Естественно, автор демонстрирует возможности только его методов и приемов глобальной разметки web-страницы и абсолютно не претендует на то, что они единственно верные и правильные, и есть истина в последней инстанции.
Все приведенные примеры разметки легки для изучения - html-код и css максимально оптимизированы и любой интересующийся этой областью верстки, даже не обладая достаточными знаниями и опытом, при известном желании, сможет найти и взять, что-то полезное для себя.