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

RogelioVizcainoLizaola, AndyKing

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

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

Вступление

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

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

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

Условия задачи

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

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

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

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

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

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

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

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

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

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

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

1. Сперва зададим нужные нам поля и отступы для тела документа. Обратите внимание, что мы задаем для него нулевой отступ, потому что в Opera он по умолчанию не равен нулю. Также мы задаем #FFF в качестве цвета фона, так как в Netscape 6 для Macintosh фон по умолчанию серый.

body {

margin:9px 9px 0 9px;

padding:0;

background:#FFF;

}

2. Теперь мы определим наш первый DIV (назовем его "level0"). Для него мы только лишь укажем цвет фона – это будет цвет нашей левой колонки. Взгляните

#level0 {

background:#FC0;

}

3. Вложим второй слой внутрь нашего level0 и назовем его "level1".

#level1 {

--> ЧИТАТЬ ПОЛНОСТЬЮ <--