Gaist-Endruy
( off
)
* (
08:25 01-09-2009
)
Таким образом, ширина footer и content составляет 100% от родительского блока main, который в свою очередь занимает 100% от body. Нюанс - внешние отступы margin составляют по 20% с каждой стороны, внешние отступы блока прозрачны, т. е. цветом не заливаются. CSS блоки content и footer занимают всю ширину окна и пока не совсем понятно, где взять место для боковых меню.
[цит] Gaist-Endruy
( off
)
* (
08:25 01-09-2009
)
#leftmenu {
position: absolute;
top: 0px;
left: 0px;
width: 18%;
margin: 0px;
padding: 1%;
}
#rightmenu {
position: absolute;
top: 0px;
right: 0px;
width: 18%;
margin: 0px;
padding: 1%;
}
[цит]
Прикрепленный файл .txt:
скачать
(204b)
Gaist-Endruy
( off
)
* (
08:25 01-09-2009
)
Ответ в position: absolute. Для абсолютного позиционирования не имеют значения нормальный поток и другие CSS блоки. Необходима точка отсчета, величина смещения по вертикали и горизонтали и ширина блока. Точкой отсчета может быть окно браузера, абсолютно или относительно позиционированный родительский CSS блок. Теперь ясно, зачем для блока main мы использовали position: relative и нулевое смещение.
[цит] Gaist-Endruy
( off
)
* (
08:26 01-09-2009
)
Блок leftmenu (левая навигационная панель) позиционируется от CSS блока main, смещение сверху и слева - по 0 пикселей. Для rightmenu то же смещение, но сверху и справа. Ширина обоих блоков - по 20% (1% padding-left + 18% width + 1% padding-right) от родительского main. Фактически, leftmenu и rightmenu налагаются на блоки content и footer - точнее, на их прозрачные внешние границы margin!
[цит] Gaist-Endruy
( off
)
* (
08:26 01-09-2009
)
Высота боковых меню зависит от содержимого. Меню не имеют фонового цвета, поэтому фоном для них служит серая заливка блока main. Margin'ы у content и footer прозрачны. Благодаря этому визуально боковые меню имеют одинаковую высоту и залиты серым цветом.
[цит] Gaist-Endruy
( off
)
* (
08:26 01-09-2009
)
#content p, #leftmenu p, #rightmenu p {
margin-top: 0px;
}
#header p, #footer p {
margin-top: 0px;
margin-bottom: 0px;
}
[цит]
Прикрепленный файл .txt:
скачать
(128b)
Gaist-Endruy
( off
)
* (
08:27 01-09-2009
)
Последние штрихи. Внутри блоков информация разбивается на абзацы тегом < p >. < p > - блочный элемент, у которого есть свои внешние поля. Internet Explorer 6 совмещает margin и padding наших CSS блоков. А Opera и Mozilla их суммируют, в результате получается слишком большая «отбивка» текста сверху и снизу от границ блока. Этот код убирает вертикальные внешние отступы для элементов , вложенных в CSS блоки макета.
[цит] Gaist-Endruy
( off
)
* (
08:27 01-09-2009
)
CSS стиль для Internet Explorer 5
[цит] Gaist-Endruy
( off
)
* (
08:28 01-09-2009
)
Наш макет без проблем отображается в Internet Explorer 6 и в последних версиях Mozilla и Opera. Однако у Internet Explorer 5 свой взгляд на CSS.
[цит]
Прикрепленный файл .gif:
скачать
(14.1Kb)
Gaist-Endruy
( off
)
* (
08:29 01-09-2009
)
Решение очевидно - для неправильного браузера делаем неправильный CSS и подключаем этот стиль только для 5-ой версии пациента.
[цит]
)