Блочная верстка в 3 колонки (fluid layout)

Источник: webmagazine

Эта статья из A List Apart послужила большим источником вдохновения для меня. После "тест-драйва" указанного в ней метода, я решил применить отрицательные внешние полоски (negative margins) с точностью до наоборот.

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

  • Ссылки в правой колонке не работают в Opera 6
  • Возникают проблемы с прорисовкой фона в MSIE
  • В разметке отсутствует структурный хак, который не позволяет очистить место после левой колонки в Netscape Navigator 6

Мой новый метод не использует:

  • CSS хаки
  • Структурные хаки для очистки плавающих элементов
  • IE/Win условные комментарии
  • Загадочные CSS правила
  • Длинные таблицы стилей
  • Надписи "Best viewed in..." (см. список поддерживаемых браузеров)

Эта страница показывает основную технику, но я создал "более сложный" проект, основанный на этом решении: это - вызов CSS.

Логика

Изображение ниже показывает, как работает макет. Я сдвигаю блок #container влево вместо правой стороны (противоположность тому что сделано в статье ALA), и самая важная часть - то, что я не делаю плавающим блок #sidebar.

Разметка

 

<body>

<div id="outer_wrapper">

<div id="wrapper">

<div id="header">

<h2>Header</h2>

<p>...</p>

</div><!-- /header -->

<div id="container">

<div id="left">

<h1>Left</h1>

<ol>

<li>...</li>

<li>...</li>

<li>...</li>

<li>...</li>

<li>...</li>

</ol>

</div><!-- /left -->

<div id="main">

<h1>Main</h1>

<p>...</p>

</div><!-- /main -->

<!-- This is for NN6 -->

<div class="clearing"> </div>

</div><!-- /container -->

<div id="sidebar">

<h1>Sidebar</h1>

<p>...</p>

</div><!-- /sidebar -->

<!-- This is for NN4 -->

<div class="clearing"> </div>

<div id="footer">

<h2>Footer</h2>

<p>...</p>

</div><!-- /footer -->

</div><!-- /wrapper -->

</div><!-- /outer_wrapper --&;gt;

</body>

CSS файлы

Я привожу здесь только стили относящиеся к разметке. Названия картинок и пути упрощены для наглядности.

Таблица стилей для современных браузеров (подключаем через @important):

#outer_wrapper {

/* т.к. min-width не поддерживается IE, мы будем использовать скрипт написанный PVII */

min-width:740px;

/* Правило для решения бага прорисовки фона в IE, но т.к. оно создает промежуток

   под футером, мы добавим такое же правило в блок #footer */

width:100%;

/* Техника ложных колонок (faux-column), левая колонка */

background:#fff url(left.gif) repeat-y left

}

#wrapper {

/* Техника ложных колонок (faux-column), правая колонка */

background:url(right.gif) repeat-y right

}

#header {

border:1px solid #b0b0b0;

background:#b0b0b0;

/* Задаем "определение позиции" для элемента и устраняем

   peek-a-boo баг в IE (v6 sp2) */

width:100%;

/* Предыдущее правило создает горизонтальную прокрутку в IE,

   избавимся от нее */

margin:0 -1px

}

#container {

float:left;

width:100%;

/* IE удваивает внешние полоски (margins) у плавающих элементов,

   позаботимся об этой проблеме */

display:inline;

/* Тут мы расходимся во мнениях с Ryan Brill (автором статьи в ALA) */

margin-left:-200px

}

#left {

float:left;

width:150px;

/* IE удваивает внешние полоски (margins) у плавающих элементов,

   позаботимся об этой проблеме */

display:inline;

margin-left:200px

}

#main {

/* ширина левой колонки #left (150px) + отрицательное поле (negative margin)

   у блока #container (200px) */

margin-left:350px

}

/* Примечание: если блок #sidebar будет короче чем блок #main,

   тогда можете удалить это правило */

#sidebar {

/* Для сохранения контента блока #sidebar справа от блока #main,

   если контента в #main меньше */

padding-left:100%;

/* Возвращаем блок #sidebar на место, который был вытеснен

   из вьюпорта из-за отступа */

margin-left:-200px

}

#sidebar p {

/* Удостоверимся что IE (v6 sp2) отображает элемент (та же проблема что и

   с блоком #header, но решение другое) */

position:relative

}

#footer {

/* См. блок #outer_wrapper  */

width:100%;

/* Для очистки #container */

clear:both;

border-top:1px solid #b0b0b0;

border-bottom:1px solid #b0b0b0;

background:#b0b0b0}

/* Этот класс применяется к 2-м структурным хакам в разметке. Первый

   "бессмысленный" элемент используется для очистки блока #left в NN6,

   а последний для очистки #container в NN4 */

.clearing {height:0;clear:both}

Вы заметили, что несколько правил используются только для MSIE/Win, поэтому я советую вам убрать их из основной таблицы стилей CSS и включить в документ с помощью условных комментариев IE.

Стили для старых браузеров 4 версий:

Т.к. мы решили сделать поддержку NN4, необходимо указывать корневые относительные пути к картинкам в таблицах стилей.

 

#outer_wrapper {

/* Техника ложных колонок (faux-column), левая колонка */

background-image:url(/корневой относительный путь/outer_wrapper.gif);

background-repeat:repeat-y;

border:1px solid #b0b0b0

}

#header,#footer {

/* Заставим блоки расшириться до 100% ширины  */

width:150%;

/* Данный трюк позволит закрасить блок целиком, а не только область под контентом */

background:#b0b0b0 url(/корневой относительный путь/clear.gif)

}

#container {

/* Удостоверимся что NN4 не отрисует фон в этом элементе */

background-image:none;

float:left;

width:auto;

/* Внешняя и внутрянняя полоски нужны чтобы оставить место для блока #sidebar */

margin-right:160px;

padding-right:160px

}

#left {

float:left;

width:140px

}

#main {

/* В NN4, очень важно корректно определить background для позиционированных

элементов. Если NN4 не найдет картинку, то разметка разрушится */

background-image:url(/корневой относительный путь/clear.gif);

/* это правило сохранит оболочку внутри вьюпорта */

margin:0

}

#sidebar {

/* Определяем фоновый цвет для блока #sidebar; я также удостоверился чтобы он

не наследовал фоновые картинки */

background:#ccc none;

margin:0;

padding:10px 0;

/* В современных браузерах этот элемент не плавающий, а вот в NN4 он должен

быть плавающим  */

float:right;

width:180px

}

/* Этот класс используется для структурных хаков в разметке */

.clearing {clear:both}

Современные браузеры проигнорируют эти стили, т.к. я использую специальный скрипт:

 if (!document.getElementById)

    document.write('<link rel="stylesheet" type="text/css" href="/css/v4.css">');

Список поддерживаемых браузеров

Windows:

  • NN 4.7*
  • FireFox 0.8
  • FireFox 1.0.7
  • Opera 6.05
  • Opera 7.23
  • Opera 8.5
  • Netscape 6.2
  • Netscape 7.1
  • Netscape 8.0
  • IE 5.00
  • IE 5.01
  • IE 5.5
  • IE 6.0
  • Mozilla 1.4.1
  • Mozilla 1.7.5

Mac OS:

  • NN 4.7*
  • FireFox 1.0
  • Mozilla 1.7.3
  • Camino 0.8.2
  • IE5.0 (OS9)
  • IE5.2 (OSX)
  • Safari 1.2.4

Mandrake:

  • Mozilla 1.7.5
  • Konqueror 3.3

Red Hat 9:

  • Mozilla 1.21
  • Konqueror 3.1-12
  • Netscape 7.2
  • Opera 8 Beta

Ubuntu 5.10 breezy badger:

  • Epiphany 1.8.12
  • Firefox 1.0.7
  • Mozilla 1.7.12
  • Opera 8.5

* - макет жидкий, но колонки разные по высоте. В версии вызов CSS, колонки одинаковой высоты.

Если у Вас установлен другой браузер и макет выглядит нормально, пожалуйста дайте мне знать и я включу его в этот список.

Страница сайта http://185.71.96.61
Оригинал находится по адресу http://185.71.96.61/home.asp?artId=16501