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

padding-left:9px;

background:#FFF;

}

В этом новом слое мы указали место для левой колонки и отступ от нее. Цвет отступа задается цветом фона для слоя. Взгляните.

Вложим в "level1" слой под названием "level2"

#level2 {

background:#FFF3AC;

}

С помощью этого слоя мы задаем цвет фона для правой колонки. Теперь левая колонка и отступ отчетливо видны. Взгляните.

Для правой колонки мы по уже описанной методике добавляем в слой "level2" слой "level3"

#level3 {

margin-right:143px;

padding-right:9px;

background:#FFF;

}

#main {

background:#CCC;

}

Слой "main" мы добавили исключительно для того, чтобы сделать цвет фона для центральной колонки отличным от цвета других блоков и отступов между ними. Взгляните.

Добавляем шапку и рекламный блок

Мы пока еще не углублялись в тонкости разметки для боковых колонок, лишь визуально их отделили, но уже сейчас понятна методика по отображению трех колонок одной высоты. Перед тем как двигаться дальше, добавим в разметку верхний навигационный блок и место для рекламы. Мы вложим слой "topBar" в "level1" и перед слоем "level2", а в "topBar" поместим слой "advBar". Взгляните.

...

#topBar {

background:#FC0;

}

#advBar {

background:#FFF3AC;

}

</style>