разметка блоков главной страницы в css

Верстка в три колонки как это делается

Если не принимать в расчет верхний навигационный блок, рекламный блок и "Совет дня", то мы имеем дело с версткой в три колонки. Так как центральная колонка будет содержать контент, то от ее высоты будет зависеть высота всего документа. Понятно, что высота всех трех колонок должна быть одинакова. Обратите также внимание на отступы шириной 9px слева и справа от центральной колонки.

Возможно ли воспроизвести эту разметку с помощью CSS? Разумеется. И мы расскажем, как это сделать.

Цветной блок внутри центральной области, содержащийP "Совет дня"

Центральная область, содержащая основной контент

Правый навигационный блок, содержащий текстовые ссылки, отображающие структуру сайта

Левый навигационный блок с логотипом WebReference и текстовыми ссылками

Рекламный блок, содержащий стандартный баннер

Верхний навигационный блок с пятью текстовыми ссылками и формой для поиска

Весной 2001 года WebReference состояла из шести блоков (в основе верстки лежали три таблицы):

Работа велась с прицелом на пятое поколение броузеров, в качестве платформы предполагались Windows и Macintosh. Мы намеревались использовать одни и те же стилевые таблицы для всех броузеров. Это ограничение усложнило нашу задачу, и сделало финальный код куда сложнее и запутаннее, чем если бы мы ориентировались только на броузеры с корректной поддержкой CSS-2 (например, Netscape 6). Понятно, что из-за проблем с совместимостью мы не могли использовать весь спектр возможностей CSS.

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

В статье Andy King бросил вызов читателям, предложив им воспроизвести табличную верстку WebRef с помощью CSS. Kwon Ekstrom предложил , которое работало, но только в ограниченном наборе броузеров. После исследования его проекта я нашел в нем некоторые несообразности, которые попытался решить. Несколько месяцев Andy, Kwon и я не покладая рук трудились над дизайном WebRef.

Kwon Ekstrom предложил свою CSS версию главной страницы WebReference. Rogelio Lizaolo улучшил ее. Через несколько месяцев напряженной совместной работы финальный вариант на CSS полностью повторял прежний, табличный. В процессе мы обнаружили массу ошибок в NN и IE и нашли несколько элегантных уловок для их обхода. Ниже следует наша пошаговая инструкция, с помощью которой вы можете повторить наш подвиг.

Задача: воспроизвести с помощью CSS основную страницу . Инструменты: CSS и много свободного времени.

Краткое содержание

Advanced CSS Layouts: Step by Step автор: WebReference, Rogelio Vizcaino Lizaola, Andy King перевод:

Продвинутая CSS-верстка: шаг за шагом

WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

Продвинутая CSS-верстка: шаг за шагом - Вёрстка - Webmascon