начало → тема 2 → плавающие блоки → пример 1

3. Пример 1

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

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

Построим страницу о Роботландии с двумя плавающими колонками фиксированной ширины, заголовочной частью и подвалом (ссылка).

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

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

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

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

Вверх Без 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="wrapper">  <!-- Оболочка для ложных колонок -->

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

      <HR class="none">

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

    </DIV> <!-- Конец оболочки wrapper -->
    
    <HR class="none">

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

Без CSS

Посмотреть

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

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

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

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

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

Для блока content зададим ширину 470 пикселов, для блока sidebar — 250 пикселов. Для обоих этих плавающих блоков установим 10-пиксельный внутренний отступ.

Получается: 10+470+10+10+250+10=760 (ширина BODY).

Вверх CSS

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

HTML
{
  text-align:center; /* Центрирование BODY для IE5 */
  background:#e5e5e5; 
}

BODY
{
  /* Раскладка */
  margin:10px auto;  /* BODY по центру HTML */
  text-align: left;  /* Выравнивание текста слева */
  border:1px solid #638F7B;
  width:760px;  /* Для старых хороших браузеров */ 
  \width:762px; /* Обман для IE5 */
  w\idth:760px; /* Для новых хороших браузеров */ 
  /* Шрифты    */
  font:small Georgia, serif;
  /* Цвета     */
  color:black;
  background:white; 
}

/* Заголовочная часть*/
H1
{
}

/* Оболочка для содержания и боковой панели */
#wrapper 
{
}

/* Общие свойства блока содержания и боковой панели */
#content, #sidebar 
{
  padding:10px;
}

/* Содержание */
#content 
{ 
  float:left;
  width:470px;  /* Для старых хороших браузеров */ 
  \width:490px; /* Обман для IE5 */
  w\idth:470px; /* Для новых хороших браузеров */ 
}

/* Боковая панель*/
#sidebar
{
  float:left;
  width:250px;  /* Для старых хороших браузеров */ 
  \width:270px; /* Обман для IE5 */
  w\idth:250px; /* Для новых хороших браузеров */ 
}

/* Подвал */
#footer
{
  clear:both;
  padding:0 10px 2px;
  white-space:nowrap;
  color:white;
  background:#090;
  font:0.8em "Trebuchet MS",sans-serif;  
}

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

Вместе с CSS

Посмотреть

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

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

Посмотреть

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

Всё хорошо, но если вы смотрите в IE-6, то видите мягкий знак справа выше подвала. Не протирайте глаза, не пытайтесь найти мягкий знак, случайно оброненный в HTML, — это очередной, хорошо известный баг IE.

Этот баг, известный под названием “ошибка дублирования символов браузерами IE6”, проявляется, когда между первым и последним плавающими элементами в HTML есть комментарии. У нас комментарии расположены в других местах: 

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

    <HR class="none">

    <DIV id="wrapper">  <!-- Оболочка для ложных колонок -->

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

      <HR class="none">

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

    </DIV> <!-- Конец оболочки wrapper -->
    
    <HR class="none">

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

Пробуем комментарии убрать — не помогает, мягкий знак в IE-6 упорно отображается на экране. Ладно, оставим решение этой проблемы на потом.

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

Зафиксируем размер шрифта и высоту строки в пикселах. Отодвинем текст заголовка левым внутренним отступом размером в 150 пикселов. В освободившееся пространство поместим логотип в виде фоновой картинки (без укладки паркета): 

H1
{
  background:#fbe7ae url(pic/logo.png) no-repeat; 
  color:#090;
  margin:0;padding:0;
  padding-left:150px;
  font:bold 80px Georgia,serif;  
  line-height:110px;
  border-bottom:1px solid #638F7B;
}

Заголовок

Посмотреть

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

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

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

Картинка сохранялась с фона того же цвета, что и на заголовке.

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

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

Заголовок находится в потоке, а два плавающих блока (content и sidebar) будут расположены ниже, так как в HTML-коде они следуют за заголовком.

Подвал будет располагаться ниже плавающих блоков, так как для него задано clear:both, что обеспечивает прекращение обтекания.

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

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

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

Посмотреть 

/* Приближаем заголовок 
   к своему абзацу */
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);
}

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

Посмотреть

Если нужно написать правило только для IE, записывайте две косых черты // в его начале.

Мягкий знак пропал, но возникла новая проблема. И снова в IE: фон подвала расширяется вверх, если подёргать линейку прокрутки в нижней части или перекрыть окно другим окном. Вылечивается установкой нулевой высоты (реально высота в IE будет устанавливаться по содержимому): 

#footer
{
  clear:both;
  padding:0 10px 2px;
  white-space:nowrap;
  color:white;
  background:#090;
  font:0.8em "Trebuchet MS",sans-serif;  
  //height:0; /* Заклинание для IE */
}

Две косых черты // в начале правила не смущают IE, остальные браузеры правило проигнорируют.

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

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

Эту картинку будем использовать для создания ложной колонки блока sidebar.

Фон BODY совпадает с фоном колонки content, поэтому подготовим картинку только по ширине фона колонки sidebar.

Картинкой будем замащивать справа по вертикали оболочку колонок, блок wrapper: 

/* Оболочка для содержания и боковой панели */
#wrapper 
{
  float:left;
  background:url(pic/bg.png) right repeat-y;
}

Указание float:left необходимо. Если его опустить, блок wrapper окажется пустым (ссылка).

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

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

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

Пример построен. В макете с плавающими колонками нет ограничений на соотношение высот. Любая колонка может быть короче или длиннее соседа, или иметь равную с ним высоту.

начало → тема 2 → плавающие блоки → пример 1