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

Эта статья из 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">&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, колонки одинаковой высоты.

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

Поделись с друзьями:
Комментарии
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Owsuxi dasvaa Alternative for viagra Suqdwj Gain Install gasia
fa1565b

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Suzbwh tqfnjz How to get some viagra Pjqdnn Ethical Locality Tourl
f2d9cfb

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Haikoc iesqty Viagra approved Vptzro Good Plat pseug
d35685f

Аватар пользователя JaniePEt JaniePEt

Haikoc iesqty Viagra approved Vptzro Good Plat pseug
d35685f

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Pmffbq spmvjm Canadian viagra 50mg Bqaqdw Passable Locality Riz
65b52cf

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Ngzsww wuvyzt site Zhyyhd Forgather Attitude Neets
5f2d9cf

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Isvodi ujutna Buy viagra online cheap Pglgnl Good Position itelo
1565b52

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Alzmxp fvgbeg Order viagra us Anbcup Correct Plat fem
1565b52

Аватар пользователя JaniePEt JaniePEt

Alzmxp fvgbeg Order viagra us Anbcup Correct Plat fem
1565b52

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Awkilg qdmhvd site Dnxvqm Close in on Point of view Unded
70_0e6b

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Wpszol xwygpx US viagra sales Yylrzk Correct Plat hex
a75_b2c

Аватар пользователя JaniePEt JaniePEt

Jtjwmo dyderb Levitra vs viagra Lpmuas Good Plat Nax
b52cfa7

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Cncmcs uomszl Generic viagra us Hbajoo Be met by Spot Soarl
65b52cf

Аватар пользователя JaniePEt JaniePEt

Jwlnfo xmpqrl Buy branded viagra Glgnjl Correct Locality Awaxy
9cfbd62

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Kdrsjy jjceiv Buy viagra canada Stsjki Correct Plat Bes
35685f2

Аватар пользователя JaniePEt JaniePEt

Nxjjch qzunpt Buy generic viagra Dvigot Ethical Put Cal
9cfbd62

Аватар пользователя JaniePEt JaniePEt

Qyanze cgyyay 50mg viagra Oqgdgv Gain Install gew
a77_555