Реферат: Продвинутая CSS-верстка: шаг за шагом
Начнем с левого навигационного блока – добавим к нему слой "lftBar". Так как мы решили использовать абсолютное позиционирование, то у нас теперь есть относительная свобода в выборе места для кода, определяющего слой. Его можно поставить внутрь "level0", до или после "level1" или даже на один уровень вложенности со слоем "level0" – это не повлияет на его отображение – если, конечно, мы выберем правильные координаты.
Мы попытались вложить "lftBar" в "level0", указав для "lftBar" нулевые координаты top и left, а для "level0" – относительное позиционирование (position:relative), но в IE5.5 слои почему-то перекрывались. Поэтому мы решили установить для "lftBar" абсолютные координаты относительно тела документа. Взгляните. А также – одна ошибка в IE, другая ошибка в IE.
#lftBar {
position:absolute;
width:143px;
top:9px;
left:9px;
}
Для правого навигационного блока мы использовали слой "rgtBar". Нам было важно, что бы его верхний край совпал с верхним краем слоя "main", что содержит основной контент. Поэтому мы решили вложить "rgtBar" в "level2", до или после "level3", установив для "level2" относительное позиционирование, а для "rgtBar" – нулевые координаты top и left и ширину, равную правому полю слоя "level3". Взгляните.
#level2 {
background:#FFF3AC;
position:relative;
}
...
#rgtBar {
position:absolute;
width:143px;
top:0;
right:0;
}
Расставляем по местам
С нашей версией было две проблемы в IE для Windows. Первая проблема состояла в том, что блок с «Советом дня» исчезал, хотя содержимое блока main его исправно огибало. Эту проблему мы разрешили, установив для слоя "tipDay" относительное позиционирование (такая установка привела к повышению z-index и слой автоматически разместился поверх остальных).
Странности наследования: " Auto " против " Inherit "
Второй проблемой в IE/Windows было то, что правый навигационный блок отодвигался максимально вправо. Для решения проблемы нам пришлось явно указать ширину слоя "level2" (в который вложен "rgtBar"). IE не понимает декларацию ‘auto’, но зато понимает ‘inherit’ (хотя и довольно-таки странным образом), и это можно использовать для наших целей. Мы установили для "level0" ширину в 100%, а в качестве ширины для "level2" указали ‘inherit’. Фокус в том, что в IE "level2" наследует значение ширины от "level0" (100%), в то время как в прочих броузерах – происходит наследование от "level1" (‘auto’) (а укажи мы для "level2" ширину в 100%, то у нас возникли бы проблемы с отображением в IE 5.5+, который понимает 100%, как ширину всего окна броузера). Эту ошибку CSS в IE5 вы, кстати, вполне можете использовать для решения сходных проблем – подробности смотрите в разделе использованных приемов. Взгляните
#level0 {
background:#FC0;
width:100%; # - New, outermost DIV
}
#level2 {
background:#FFF3AC;
position:relative;