Пример 1

5. Пример 1

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

Постановка задачи

Построим страницу с тремя абсолютно позиционированными блоками.

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

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

Ниже — две колонки: левая (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> 
  </BODY>
</HTML>

Без CSS

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

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

Разметка

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

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

Нужно аккуратно просчитать размеры блоков.

Общая ширина content составляет 490 пикселов:

468 — ширина области содержимого;
20 — внутренние отступы с обеих сторон (по 10 пикселов);
2 — рамки с обеих сторон (по 1 пикселу).

Общая ширина sidebar составляет 260 пикселов:

238 — ширина области содержимого;
20 — внутренние отступы с обеих сторон (по 10 пикселов);
2 — рамки с обеих сторон (по 1 пикселу).

Общая ширина получается как раз 760: 490+260+10. Последние 10 пикселов — это промежуток между левым и правым блоками.

CSS

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

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

/* Заголовок */
H1 
{ 
  position:absolute;
  left:0;top:0;
  width:758px;   /* Для хороших старых по стандарту */
  \width:760px;  /* Обман для IE5 */
  w\idth:758px;  /* Для всех новых хороших по стандарту */
  height:100px;  /* Для хороших старых по стандарту */
  \height:102px; /* Обман для IE5 */
  he\ight:100px; /* Для всех новых хороших по стандарту */
  background:#ffdf5e; 
  border:1px solid #638F7B;
  margin:0;padding:0;
}

/* Содержание */
#content 
{ 
  position:absolute;
  left:0; top:112px;
  padding:10px;
  border: 1px solid #638F7B;
  width:468px;  /* Для хороших старых по стандарту */
  \width:490px; /* Обман для IE5 */
  w\idth:468px; /* Для всех новых хороших по стандарту */
  background:white;  
}

/* Боковая панель*/
#sidebar
{
  position:absolute;
  left:500px; top:112px;
  padding:10px;
  border: 1px solid #638F7B;
  width:238px;  /* Для хороших старых по стандарту */
  \width:260px; /* Обман для IE5 */
  w\idth:238px; /* Для всех новых хороших по стандарту */
  background:#b4e637;  
}
/* Для устранения элементов при включённом CSS */
.none{display:none}

Вместе с CSS

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

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

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

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

Набор стилевых определений кажется длинным в основном из-за трюка с шириной и высотой, связанного с отличием коробочной модели IE от стандарта (см. проблемы размеров).

Для BODY трюк не потребовался, так как для этого блока не задан внутренний отступ и рамка.

Вспомним проблему с размерами и способ её решения на примере блока content.

Блок content

Для этого блок заданы внутренние отступы и рамка:

padding:10px;
border: 1px solid #638F7B;

Надо указать ширину блока. По стандарту это ширина области содержимого, то есть 468 пикселов.

IE считает шириной блока ширину области содержимого плюс ширину внутренних отступов, плюс ширину рамок, то есть 490 пикселов.

Чтобы задобрить IE приходится использовать следующий трюк:

width:468px;  /* Для хороших старых по стандарту */
\width:490px; /* Обман для IE5 */
w\idth:468px; /* Для всех новых хороших по стандарту */

Первая строка уловки — для тех браузеров, которые работают по стандарту, но не понимают модификатора “\” (к ним относится, например, браузер Opera 5). Эти браузеры будут рассматривать символ “\”, как обычный знак, входящий в состав имени свойства, не “узнают” width и пропустят строки 2 и 3.

Вторая строка — для браузера IE5, который работает не по стандарту, не считает обратную косую черту модификатором в середине слова, но, по счастью, считает этот знак модификатором, если с него слово начинается. Таким образом, IE5 (и IE6, если он работает в режиме IE5) сначала прочитает 468px в первой строке, потом изменит это значение на 490px из второй строки, а третью строку проигнорирует.

Третья строка — для совсем хороших браузеров: тех, которые работают во всём по стандарту, в том числе правильно понимают символ обратной косой черты.

Где BODY?

Кстати, а где у нас BODY, предок всех наших блоков? Давайте временно зададим для него рамку потолще (в 4 пиксела) и посмотрим BODY в “лицо”.

Где BODY?

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

Наши блоки лежат вне BODY, но остаются его потомками, значит, наследуют от него все CSS-свойства, которые передаются потомкам (в нашем случае: шрифт и цвет текста).

А вот задавать, например, фон для BODY не имеет никакого смысла: его всё равно не будет видно, BODY пуст.

Заголовок

Определимся с темой проекта. Пусть страница будет о Роботландии. Соответственно, сменим текст в H1 и заголовке окна:

<!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> 
...    
  </BODY>
</HTML>

Зададим в блоке H1 левый внутренний отступ размером в 130 пикселов и в освободившееся пространство поместим логотип в виде фоновой картинки (без укладки паркета):

Заголовок

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

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

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

В связи с введением внутреннего отступа, придётся изменить правила для ширины блока:

padding:0;
padding-left:130px;
width:628px;   
\width:760px;  
w\idth:628px;

Размер шрифта зафиксируем в пикселах (на 20 пикселов меньше высоты блока): font-size:80px. Кроме того, зададим высоту строки, равную высоте блока: line-height:100px. Такое указание добавит межстрочные интервалы по 10 пикселов сверху и снизу и выровняет текст заголовка по середине блока H1 в вертикальном направлении (см. устройство строки).

Определение для H1 будет теперь таким (изменения выделены цветом):

H1 
{ 
  position:absolute;
  left:0;top:0;
  width:628px;   /* Для хороших старых по стандарту */
  \width:760px;  /* Обман для IE5 */
  w\idth:628px;  /* Для всех новых хороших по стандарту */
  height:100px;  /* Для хороших старых по стандарту */
  \height:102px; /* Обман для IE5 */
  he\ight:100px; /* Для всех новых хороших по стандарту */
  background:#ffdf5e url(pic/logo.png) no-repeat 5px 5px; 
  border:1px solid #638F7B;
  margin:0;padding:0;
  padding-left:130px;
  font-size:80px;
  line-height:100px;
}

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

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

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

страницу

файл CSS

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