начало → тема 2 → позиционирование элементов → пример 2

6. Пример 2

На этой странице:

Вверх Постановка задачи

Построим страницу с двумя колонками, заголовочной частью и подвалом.

Макет страницы

Сверху расположим блок H1 — в него поместим логотип и заголовок страницы.

Ниже — две колонки: левая (content) с основным содержанием и правая (sidebar) со вспомогательной информацией.

В самом низу — область, содержащую сведения об авторе и контактную информацию (footer).

Кажется, что реализация этого макета мало чем отличается от реализации макета примера 1 — всего лишь добавлен один блок в самом низу страницы.

Однако, наличие подвала создаёт непреодолимую трудность. В примере 1 все блоки были абсолютно позиционированы, то есть, удалены из потока (блок BODY оказался пустым). В рамках этой модели для блока footer нужно задать вертикальную координату, но она зависит от высоты блока content (или sidebar, смотря что больше) которая нам неизвестна.

Придётся изменить модель вёрстки.

Вверх Модель вёрстки

Модель вёрстки

Все блоки, кроме sidebar, оставим в потоке. Для content зададим большой внешний отступ справа, и в образовавшийся промежуток поместим абсолютно позиционированный блок sidebar.

Подвал будет расположен в потоке сразу за содержанием. Правда, если высота боковой панели окажется больше высоты содержания, то боковая панель перекроет подвал. Будем считать, что на нашей странице такого не произойдёт.

Вверх Без CSS

Запишем HTML-код будущей страницы (предполагаем, что страница будет о Роботландии): 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type" 
          content="text/html; charset=windows-1251">
    <LINK rel="stylesheet" type="text/css" href="main.css">
    <TITLE>Роботландия</TITLE>
  </HEAD>

  <BODY bgcolor="white" text="black">
    <H1>Роботландия</H1> 

    <HR class="none">

    <DIV id="content">Содержание</DIV> 

    <HR class="none">

    <DIV id="sidebar">Боковая панель</DIV> 

    <HR class="none">

    <DIV id="footer">Подвал</DIV> 
  </BODY>
</HTML>

Без CSS

Посмотреть

Так это выглядит без CSS. Горизонтальные линии введены для браузеров, которые CSS не поддерживают — они разделяют страницу на логические части.

Для класса none, которым помечены HR'ы, запишем правило display:none, и линии в браузерах с CSS будут удалены из документа.

Вверх Разметка

Разметка размеров

Все блоки, кроме sidebar, находятся в потоке внутри BODY. Определим для последнего ширину в 760 пикселов (чтобы не было горизонтальной прокрутки в окне шириной 800).

Для блока content зададим правый внешний отступ в 270 пикселов — в него поместим абсолютно позиционированный блок sidebar.

Вверх CSS

В соответствие с разметкой построим набор CSS-определений: 

HTML
{
  text-align:center;  /* Центрирование BODY для IE5 */
  background:#f3f8f6; /* Фон документа */
}
BODY
{
  position:relative; /* Будем позиционировать от BODY */
  margin: 10px auto; /* BODY по центру HTML */
  padding:0;         /* Уберём внутренний отступ  */
  text-align: left;  /* Выравнивание текста слева */
  border:1px solid #638F7B; /* Рамка для страницы */
  width:760px;       /* Определим ширину */
  font:small Georgia, serif; /* Шрифт */
  background:white;  /* Цвет фона   */
  color: #2A3D34;    /* Цвет текста */
}

/* Заголовок */
H1 
{ 
  background:#007143; 
  color:white;
  margin:0;padding:0;
  padding-left:180px;
  font:bold 70px Georgia,serif;  
  letter-spacing:2px; 
  line-height:110px;
}

/* Содержание */
#content 
{ 
  margin-right:270px;
  padding:10px;
}

/* Боковая панель*/
#sidebar
{
  position:absolute;
  left:490px; top:110px; /* Отсчёт от BODY */
  padding:10px;
  width:250px;   /* Для хороших старых по стандарту */
  \width:270px;  /* Обман для IE5 */
  w\idth:250px;  /* Для всех новых хороших по стандарту */
  background:#ffec73;  
}

/* Подвал */
#footer 
{ 
  padding:5px 10px;
  border-top:1px solid #638F7B;
  white-space:nowrap;
  font:0.7em Tahoma,sans-serif;
  color:white;
  background:#828377;
}

/* Для устранения элементов при включённом CSS */
.none {display:none;}

Вместе с CSS

Посмотреть

Так это выглядит в окне шириной 800 пикселов.

В окне шириной 1000 пикселов

Посмотреть

А так — в более широких окнах. Вся композиция расположена внутри BODY, для которого задано центрирование по горизонтали.

Если вы забыли, как выполняется центрирование блоков, посмотрите раздел горизонтальное форматирование.

Вверх Заголовок

В блоке H1 задан левый внутренний отступ размером в 180 пикселов. В это пространство поместим логотип в виде фоновой картинки (без укладки паркета): 

H1 
{ 
  background:#007143 url(pic/logo.png) no-repeat -60px -62px; 
  color:white;
  margin:0;padding:0;
  padding-left:180px;
  font:bold 70px Georgia,serif;  
  letter-spacing:2px; 
  line-height:110px;
}

Заголовок

Посмотреть

Внутренний отступ слева

Фоновая картинка:

Фоновая картинка

Для фоновой картинки заданы отрицательные координаты, поэтому она видна не полностью (так задумано).

Вертикальный размер блока H1 определяется высотой строки, которая зафиксирована в пикселах: line-height:110px.

Размер шрифта на 40 пикселов меньше высоты блока: font:bold 70px Georgia,serif. Эти 40 пикселов (межстрочный интервал) разделяются на две части по 20 пикселов, сверху и снизу, центрируя текст заголовка по вертикали (см. устройство строки).

Для абсолютно позиционированного блока sidebar задано вертикальное смещение в 110 пикселов (top:110px) — это как раз высота блока H1.

Текст заголовка записан выверткой — светлые буквы на тёмном фоне.

Вверх Наполняем страницу содержимым

Наполним страницу реальным содержимым и опишем дополнительные оформительские стили.

Наполнение содержимым

Посмотреть 

/* Приближаем заголовок 
   к своему абзацу */
H2, H3, H4, H5, H6 
{margin-bottom:0.2em;}
P {margin:0.2em 0 1em;}
/* Размеры заголовков */
H2 {font-size:1.4em;}
H3 {font-size:1.2em;}
/* Выделение */
EM {font-weight:bold;}
/* Рисованный маркер списка */
UL LI
{
  list-style-image:url(pic/marker.gif);
}

Вверх Ложные колонки

Получилось неплохо, кроме одной неприятности: на страницу с колонками это не похоже — колонки по определению должны иметь одинаковую высоту!

Проблема имеет решение под названием “ложные колонки”. Оно было описано Дэном Седерхольмом (Dan Cederholm) в статье “Faux Columns” (ссылка) на сайте A List Apart (ссылка).

Ложные колонки

Суть метода в следующем: для контейнера колонок (в нашем случае для BODY) задаётся фоновая полоска, которая замащивает блок по вертикали, “продлевая” тем самым, высоту колонок до конца контейнера. Высоты колонок, конечно, остаются прежними, но визуально они уравниваются.

Подготовим фоновое изображение и подправим стилевое определение для BODY: 

BODY
{
  position:relative; /* Будем позиционировать от BODY */
  margin: 10px auto; /* BODY по центру HTML */
  padding:0;         /* Уберём внутренний отступ */
  text-align: left;  /* Выравнивание текста слева */
  border: 1px solid #638F7B;  /* Рамка для страницы */
  width:760px;       /* Определим ширину */
  font:small Georgia, serif; /* Шрифт */
  background:white url(pic/fon.png) repeat-y; 
  color: #2A3D34;    /* Цвет текста */
}

Окончательный вариант

Посмотреть страницу

Посмотреть файл CSS

Пример построен. Напомним ограничение используемой модели: предполагается, что содержимое боковой панели короче блока с основным содержанием.

Если это не так, боковая панель перекроет подвал и даже может вылезти вниз за пределы BODY — ведь блок sidebar абсолютно позиционирован, а значит, не подчиняется правилам потока.

начало → тема 2 → позиционирование элементов → пример 2