Главная или честный способ заработка в сети Зачем мне это? Всё начинается с идеи

Абсолютное позиционирование блоков

В главе Позиционирование блоков. Нормальный поток был рассмотрен пример создания веб-страницы, располагая на ней блоки в нормальном потоке. Вот она, страница. Чего же в ней не хватает? Определённо, боковой колонки, которая имеется на большинстве сайтов в наши дни, иногда и не одна. При помощи позиционирования блоков в нормальном потоке и относительного позиционирования невозможно сверстать страницу с образца с боковыми колонками. А вот, используя абсолютное позиционирование, можно. Абсолютное позиционирование применяется в тех случаях, когда заранее известны размеры блоков. Что ж, сверстаем страницу!

<html>
 <head>
  <title>Пример абсолютного позиционирования</title>
  <link rel="stylesheet" type="text/css" href="style10.css">
 </head>
 <body>
  <div id="header">Это шапка сайта. Обычно здесь размещают баннер и ещё что-нибудь.</div>
  <div id="topmenu"><a href="#">Главная</a> | <a href="#">Новости</a> | <a href="#">О нас</a> | <a href="#">Контакты</a></div>
  <div id="content">Это блок с контентом (основным содержимым страницы). На этом месте должна располагаться статья или список ссылок на что-нибудь. Может быть также страница с блоком новостей.</div>
  <div id="sidebar"><a href="#">Статья 1</a> <a href="#">Статья 2</a> <a href="#">Статья 3</a> <a href="#">Статья 4</a> <a href="#">Статья 5</a> <a href="#">Статья 6</a> <a href="#">Статья 7</a></div>
  <div id="footer">Это подвал. Здесь пишут чаще всего: © Все права защищены и информацию о том, как можно связаться с администрацией ресурса.</div>
 </body>
</html>

Теперь таблица стилей:

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 и разместить блок, сдвинув его в определённых направлениях на некоторое количество единиц измерения. Сдвигается блок в четырёх направлениях:

  1. left - смещение левого края блока относительно левого края контейнера, в котором этот блок расположен;
  2. right - смещение правого края блока относительно правого края контейнера, в котором этот блок расположен;
  3. top - смещение верхнего края блока относительно верхнего края контейнера, в котором этот блок расположен;
  4. bottom - смещение нижнего края блока относительно нижнего края контейнера, в котором этот блок расположен;

Блок с идентификатором content необходимо было разместить так, чтобы он был слева от боковой колонки с навигацией. Это мы и сделали, применив к блоку относительное позиционирование. Заметим, длина боковой колонки (sidebar) - 150 пикселей, а высота заголовка (header) и верхнего меню с навигацией (topmenu) в сумме равна 130 пикселей. Именно на эти две величины был смещён блок с идентификатором content. Также в самом html-документе блок с идентификатором content расположен раньше, чем sidebar, а фактически разместился справа, то есть за ним. При абсолютном позиционировании неважно, какой блок на странице размещён раньше, находиться он будет там, где указано в таблице стилей. Ну и ссылки в блоке sidebar сделали блочными элементами при помощи свойства display и задали нижний отступ для них, чтобы смотрелись красивее.

Ну а то, что получилось в конечном итоге смотри здесь.


<<Предыдущая | В раздел | Следующая>>