Абсолютное позиционирование блоков
В главе Позиционирование блоков. Нормальный поток был рассмотрен пример создания веб-страницы, располагая на ней блоки в нормальном потоке. Вот она, страница. Чего же в ней не хватает? Определённо, боковой колонки, которая имеется на большинстве сайтов в наши дни, иногда и не одна. При помощи позиционирования блоков в нормальном потоке и относительного позиционирования невозможно сверстать страницу с образца с боковыми колонками. А вот, используя абсолютное позиционирование, можно. Абсолютное позиционирование применяется в тех случаях, когда заранее известны размеры блоков. Что ж, сверстаем страницу!
Теперь таблица стилей:
body{
margin:0px;
}
#header{
background:#ff6633;
width:800px;
height:100px;
}
#topmenu{
text-align:center;
background-color:#ffcc66;
width:800px;
height:30px;
}
#topmenu a{
color:blue;
text-decoration:none;
}
#topmenu a:hover{
color:blue;
text-decoration:underline;
}
#content{
background-color:#ffccff;
position:absolute;
left:150px;
top:130px;
width:650px;
height:400px;
}
#sidebar{
background-color:#ff9966;
width:150px;
height:400px;
}
#sidebar a{
display:block;
padding-bottom:3px;
color:blue;
text-decoration:none;
}
#sidebar a:hover{
color:blue;
text-decoration:underline;
}
#footer{
background-color:#ffff33;
width:800px;
height:50px;
}
Ну и комментарии.
В этой таблице стилей первым идёт элемент body. Он необходим, для того, чтобы убрать поля в html-документе, так как в каждом браузере размер полей может быть своим. Блоки header, topmenu, sidebar и footer расположены на странице в нормальном потоке, то есть друг под другом. С блоком content разговор другой. К нему было применено абсолютное позиционирование.
При абсолютном позиционировании в таблице стилей к блоку нужно приписать свойство position со значением absolute и разместить блок, сдвинув его в определённых направлениях на некоторое количество единиц измерения. Сдвигается блок в четырёх направлениях:
- left - смещение левого края блока относительно левого края контейнера, в котором этот блок расположен;
- right - смещение правого края блока относительно правого края контейнера, в котором этот блок расположен;
- top - смещение верхнего края блока относительно верхнего края контейнера, в котором этот блок расположен;
- bottom - смещение нижнего края блока относительно нижнего края контейнера, в котором этот блок расположен;
Блок с идентификатором content необходимо было разместить так, чтобы он был слева от боковой колонки с навигацией. Это мы и сделали, применив к блоку относительное позиционирование. Заметим, длина боковой колонки (sidebar) - 150 пикселей, а высота заголовка (header) и верхнего меню с навигацией (topmenu) в сумме равна 130 пикселей. Именно на эти две величины был смещён блок с идентификатором content. Также в самом html-документе блок с идентификатором content расположен раньше, чем sidebar, а фактически разместился справа, то есть за ним. При абсолютном позиционировании неважно, какой блок на странице размещён раньше, находиться он будет там, где указано в таблице стилей. Ну и ссылки в блоке sidebar сделали блочными элементами при помощи свойства display и задали нижний отступ для них, чтобы смотрелись красивее.
Ну а то, что получилось в конечном итоге смотри здесь.