При использовании CSS макет делится на ряд прямоугольных областей,называемых разделами(divs).
Создание макета начнем с эскиза.
| logo | |
|---|---|
| menu | content |
Для создания данного макета потребуется три прямоугольных области:
1)Logo шириной 800пикселов
2)Menu шириной 200пикселов
2)Content шириной 600пикселов
Листинг
<div id="logo">Заголовок</div>
<div id="menu">Меню</div>
<div id="content">Содержимое</div>
CSS файл
#logo{position:absolute;widht:800px;}
#menu{position:absolute;widht:200px;}
#content{position:absolute;widht:600px;}
Для улучшения согласованности дизайна в различных браузерах атрибуты leftmargin, marginheight, topmargin и marginwidth,длч тега body,нужно установить в 0.
Далее размещаем данные прямоугольные области на документе.Расположение элементов считаем от левого верхнего угла страницы.
Первый элемент,"Зоголовок",не имеет смещения,поэтому пишем:
#logo{position:absolute;width:800px;height:100px;
top:0px;left:0px;}
Второй элемент,"Меню",не имеет смещения слева,а сверху его смещение равняется ширине элмента "Заголовок".
#menu{position:absolute;width:200px;top:100px;
left:0px;}
Для третьего элемента необходимо смещение сверху равное ширине элемента "Заголовок"(100px),а смещение слева равно ширине элемента "Меню"(200px).
#content{position:absolute;width:600px;top:100px;
left:200px;}
Не забывайте
—разделяйте составные имена дефисом,например,background-color,а не backgroundcolor.
—всегда указывайте единицу измерения после числового значения и не всавляйте пробел,например,800px,а не 800 или 800 px.
