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

4. Пример 2

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

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

Построим “резиновую” страницу о Роботландии с двумя пропорциональными плавающими колонками (ссылка). Страница должна растягиваться на всю ширину текущего окна.

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

Заголовочная часть (блок header) и подвал (блок footer) должны растягиваться по текущей ширине окна.

Основное содержание (content) и боковая панель (sidebar) — плавающие блоки — должны делить ширину окна в пропорции 65%:35%.

Вверх Без 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">

    <DIV id="header"><H1>Роботландия</H1></DIV> 

    <HR class="none">
                          
    <DIV id="wrapper"> <!-- обертка wrapper -->                         


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

      <HR class="none">


      <DIV id="sidebar">
        <DIV class="wrap">Боковая панель</DIV>
      </DIV>
 
    </DIV> <!-- конец обертки wrapper -->

    <HR class="none">

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

Без CSS

Посмотреть

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

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

Вверх CSS

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

BODY
{
  margin:10px; padding:0;
  font:small Georgia, serif;
  color:#2A3D34;            
  background:white; 
  border:1px solid #638F7B;  
  /* Ограничение ширины */ 
  min-width: 700px;
  width: expression(documentElement.clientWidth < 720 ? '720px' : 'auto'); 
}
/* Заголовок */
#header 
{ 
  border-bottom:1px solid #638F7B;
}
#header H1 
{ 
  color:#8a3700;
  margin:0;
  padding:0 10px 0 150px;
  padding-left:150px;
  font:bold 70px Georgia,serif;  
  line-height:110px;
  text-align:right;
}
/* Обёртка блоков content и sidebar*/
#wrapper
{
  float:left;
  width:100%;
}
/* Содержание */
#content 
{ 
  float:left;
  width:65%; 
  /* По поводу следующего правила смотрите 
     статью Владимира Токмакова 
     "Борьба с прыгающими блоками в IE" на странице:
     www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie/
  */   
  //margin-right:-100%; /* Заклинание для IE */
}
/* Боковая панель*/
#sidebar
{
  float:left;
  width:35%;
  /* По поводу следующих правил смотрите 
     статью Владимира Токмакова 
     "Борьба с прыгающими блоками в IE" на странице:
     www.artlebedev.ru/tools/technogrette/html/fix_floats_in_ie/
  */   
  //margin-left: 65%; /* Заклинание для IE */
  //display: inline;  /* Заклинание для IE */
}
/* Отступы для содержимого блоков sidebar и content */
.wrap
{
  padding:10px;
}
/* Подвал */
#footer 
{ 
  clear:both;
  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

Посмотреть

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

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

Посмотреть

А так — в более широких окнах. Страница, действительно, обладает “резиновым” характером. Область содержания и боковая панель делят ширину окна в пропорции 65%:35%.

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

Заголовок H1 был заранее погружен в блок header: 

<DIV id="header"><H1>Роботландия</H1></DIV>

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

#header 
{ 
  background:white url(pic/h1bg.png) repeat-y right top; /* Паркетная заливка */
  border-bottom:1px solid #638F7B;
}
#header H1 
{ 
  background:url(pic/logo.png) no-repeat; /* Лого */
  color:#8a3700;
  margin:0;
  padding:0 10px 0 150px;
  font:bold 70px Georgia,serif;  
  line-height:110px;
  text-align:right;
}

Заголовок

Посмотреть

Фоновая заливка:

Фоновая заливка

Логотип:

Фоновая заливка

Обратите внимание — текст заголовка выравнивается справа правилом text-align:right.

Чтобы текст не прилипал к границе справа, и не налезал в узких окнах на логотип, предусмотрены соответствующие внутренние отступы: padding:0 10px 0 150px.

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

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

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

Посмотреть 

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

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

Займёмся теперь фоновой полоской, создающей ложные пропорциональные колонки. На самом деле, хочется просто провести разделительную пунктирную линию.

Разделительная пунктирная линия

Слева на иллюстрации показан разделительный пунктир, а справа — увеличенная в 20 раз картинка, которая его строит, укладываясь в паркет по вертикали. Картинка показана на цветном фоне, чтобы были видны белые хвостики сверху и снизу.

Начальное положение картинки смещается по горизонтали на 65%: 

#wrapper
{
  float:left;
  width:100%;
  background:white url(pic/fon.png) 65% top repeat-y;
}

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

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

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

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

Загрузите страницу, щёлкнув по ссылке, и проверьте её работу в окнах разной ширины.

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