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

Опубликовано 05.07.2007 14:33 пользователем Mike Khasaya

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

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

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

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

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

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

Содержимое

1 Логика
2 Разметка
3 CSS файлы
4 Список поддерживаемых браузеров

Логика

Изображение ниже показывает, как работает макет. Я сдвигаю блок #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">&nbsp;</div>
</div><!-- /container -->
<div id="sidebar">
<h1>Sidebar</h1>
<p>...</p>
</div><!-- /sidebar -->
<!-- This is for NN4 -->
<div class="clearing">&nbsp;</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, колонки одинаковой высоты.

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

Теги:

Поделись с друзьями:

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

Вася

29.11.2007

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

Логика

Разметка

CSS файлы

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

Или войдите с помощью...