WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

«Резиновая вёрстка»: используем отрицательные поля

Creating Liquid Layouts with Negative Margins
автор: 2004.06.15 © Райан Брилл (Ryan Brill) и A List Apart
перевод: 2004.07.24 Максим Россомахин

Я недавно столкнулся с задачей, в которой надо было создать двухколоночный макет страницы с "шапкой" и "подвалом", причём в коде страницы контент должен был быть расположен перед блоком боковой колонки. Я решил воспользоваться возможностью продемонстрировать малоизвестный приём CSS-вёрстки: отрицательные поля (negative margins). Отрицательные поля позволяют нам сместить область контента за границы окна браузера, освободив место для боковой колонки.

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

Итак, чтобы показать, как полезны могут быть отрицательные поля для создании резиновой вёрстки, давайте-ка сделаем резиновый двухколоночный макет с "шапкой" и "подвалом". Область основного содержимого (контента) будет слева, вторая колонка - справа. Сделать это, в общем-то, довольно просто, но мы пойдем немного другим путем, потому что по условиям задачи код страницы у нас будет иметь определенную структуру.

Зная, как работают "плавающие" блоки, проще всего было бы разместить боковую панель перед блоком контента, позволив ей обтекать (float) контент с правой стороны. Однако, раз уж нам так важно, чтобы в текстовых браузерах, программах для чтения с экрана и старых браузерах, не понимающих наши таблицы стилей, сначала был виден контент, а потом уже боковая панель, значит нам надо найти такое решение, которое бы позволило разместить контент в начале кода. Причем это решение должно ещё и работать в большинстве браузеров.

Исходный код

Давайте-ка взглянем на код двухколоночной страницы с "шапкой" и "подвалом", с которым мы будем работать:

<div id="header">header</div>

<div id="container">
  <h1>content</h1>
  <p>Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit.
  Phasellus varius eleifend.</p>
  <p class="last">Donec euismod.
  Praesent mauris mi, adipiscing non,
  mollis eget, adipiscing ac, erat.
  Integer nonummy mauris sit.</p>
</div>

<div id="sidebar">
  <h1>sidebar</h1>
  <ul>
    <li>link one</li>
    <li>link two</li>
  </ul>
</div>

<div id="footer">footer</div>

Посмотрите на Примере 1, каким будет содержимое, не обработанное стилевыми правилами. Увидев пример, вы поймете, почему мы хотим расположить контент перед боковой панелью - так отобразят страницу те браузеры, которые не способны правильно понять наши таблицы стилей.

Понятно, что левая область, содержащая контент, должна занять всю свободную ширину страницы минус пространство, необходимое для боковой панели. Хорошо было бы, если бы мы могли задать ширину следующей формулой "100% минус 200 пикселей"? Используя отрицательные границы, мы можем добиться нужного эффекта. Нет, честно!

Необходимые стили

Теперь примемся за CSS. Как мы и сказали, зададим нашему блоку с контентом ширину, равную 100%, включаем "левое обтекание" (float: left;), и устанавливаем отрицательное правое поле, равное "-200px". Включение обтекания (float) здесь очень важно, так как поля (раз уж мы работаем с отрицательными величинами) у плавающих (float) и строчных (inline) элементов обрабатываются броузерами совсем не так, как у "неплавающих" блочных элементов.

Отрицательное правое поле у блока контента нужно скорей для того, чтобы боковой блок "всплыл" в освободившееся место, нежели для изменения вида самого блока контента. Посмотрите, что получилось в результате, на Примере 2. Мы "сплавляем" боковую панель вправо (float: right;) и задаем ей ширину, равную тем самым оставленным для неё 200 пикселям. Наконец, мы задаём для нашего "подвального" блока свойство "clear: both", дабы он располагался ниже контента и бокового блока, независимо от того, какая из колонок окажется длиннее. Также мы пропишем фоновые цвета для "шапки" и "подвала", чтобы они выделялись на странице.

#header {
  background: #d7dabd;
}
#container {
  width: 100%;
  float: left;
  margin-right: -200px;
}
#sidebar {
  width: 200px;
  float: right;
}
#footer {
  background: #d7dabd;
  clear: both;
}

Данный CSS даст нам то, что изображено в Примере 2. Как видите, нам нужно теперь отодвинуть контент от правой стороны документа. Поэтому мы решили воспользоваться ещё одним div-блоком - этот метод понимается браузерами намного лучше, чем любой другой способ. Итак, мы внесли следующие изменения в наш XHTML код:

<div id="container">
  <div id="content">
    <h1>content</h1>
    <p>Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit.
    Phasellus varius eleifend.</p>
    <p class="last">Donec euismod.
    Praesent mauris mi, adipiscing non,
    mollis eget, adipiscing ac, erat.
    Integer nonummy mauris sit.</p>
  </div>
</div>

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

#content {
  background: #f1f2ea;
  margin-right: 200px;
}

Наводим лоск

Прежде чем перейдем к визуальному оформлению страницы, давайте решим ещё одну проблему. Нам нужно задать нулевое верхнее поле первому элементу в нашем блоке контента, равно как и нулевое нижнее поле для последнего элемента. В нашем конкретном случае мы просто зададим для заголовка h1 margin-top: 0, и создадим класс для последнего абзаца в блоке контента, у которого будет нулевое нижнее поле. Мы это сделали - теперь можно и на Пример 3 посмотреть.

Уже значительно лучше, но, конечно, вы обратили внимание на то, что правая панель не заполняет всё пространство, доступное ей по высоте. Спасибо Дэну Цедерхолму (Dan Cederholm) за небольшой трюк с использованием фоновых изображений, с помощью которого мы легко решим возникшую проблему (статья Дэна "Faux Columns").

Во-первых, создадим вот такую картинку. Ее ширина 200 пикселей, т.е. такая же как и ширина нашей боковой панели.

Согласно трюку Дэна, добавим обрамляющий блок, охватывающий блоки "container" и "sidebar", а также добавим еще один блок со стилем clear: both прямо под ними. Наш XHTML код будет выглядеть так:

<div id="wrapper">
  <div id="container">
    <div id="content">
      <h1>content</h1>
      <p>Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit.
      Phasellus varius eleifend.</p>
      <p class="last">Donec euismod.
      Praesent mauris mi, adipiscing non,
      mollis eget, adipiscing ac, erat.
      Integer nonummy mauris sit.</p>
    </div>
  </div>

  <div id="sidebar">
    <h1>sidebar</h1>
    <ul>
      <li>link one</li>
      <li>link two</li>
    </ul>
  </div>
  <div class="clearing"> </div>
</div>

Теперь, сделав это, мы можем добавить к охватывающему блоку фоновое изображение. Мы зададим фоновому изображению свойство "repeat-y" и прижмём его к правому краю. Чтобы побороть один баг в Internet Explorer, нам также нужно добавить такое же фоновое изображение и к блоку "container".

#wrapper {
  background:
    #f1f2ea url(background.gif) repeat-y right;
}
#container {
  width: 100%;
  background:
    #f1f2ea url(background.gif) repeat-y right;
  float: left;
  margin-right: -200px;
}

Не забудем мы и про стили для нашего выключающего блока (с классом "clearing"), для того чтобы "подвал" расположился сразу под обеими колонками, а также для того, чтобы они отображались корректно:

.clearing {
  height: 0;
  clear: both;
}

Всё это даст нам отлично смотрящийся "резиновый" двухколоночный макет страницы, не теряющий привлекательность даже при отключенных CSS. Взгляните на Пример 4. Добавьте к элементам границы и отступы, и у вас получится отличная отправная точка для своего резинового макета. Само собой разумеется, что если бы нам потребовалось разместить боковую панель слева, то мы бы просто поменяли значения для float: и margin: на противоположные. Было "float: left" - стало "float: right"; было "margin-right: 200px", стало - "margin-left: 200px", и так далее.

Колдуем дальше: трёхколоночная версия

А что если пойти дальше и попробовать создать трёхколоночный макет с гибкой областью контента посередине? Мы не просто сделаем это - мы сделаем это в два счета! Нам понадобится внести несколько последних мазков в наш XHTML-код, добавив в него ещё несколько блоков - теперь мы готовы дописать ещё чуть-чуть CSS.

<div id="outer_wrapper">

  <div id="wrapper">
    <div id="container">
      <div id="content">

        <div id="left">
          <h1>navbar</h1>
          <ul>
            <li>link one</li>
            <li>link two</li>
          </ul>
        </div>

        <div id="main">
          <h1>content</h1>
          <p>Lorem ipsum dolor sit amet,
          consectetuer adipiscing elit.
          Phasellus varius eleifend.</p>
          <p class="last">Donec euismod.
          Praesent mauris mi, adipiscing non,
          mollis eget, adipiscing ac, erat.
          Integer nonummy mauris sit.</p>
        </div>

      </div>
    </div>

    <div id="sidebar">
      <h1>sidebar</h1>
      <p>Here be your sidebar.
      Add whatever content you may desire.</p>
    </div>

    <div class="clearing">&nbsp;</div>
  </div>

</div>

И снова псевдо-колонки

И вот вновь, с тех пор как нам требовалось сделать высоту всех колонок на странице визуально одинаковой, мы создаём ещё псевдо-колонки. И вот мы сделали две таких картинки:

Как вы можете видеть в вышеприведённом XHTML-коде, мы добавили: общий обрамляющий блок <div id="outer_wrapper">, блок левой колонки <div id="left">, а так же блок <div id="main"> вокруг центрального текста страницы. Наш новый обрамляющий блок будет содержать фоновую картинку для левой колонки, и это фоновое изображение будет повторяться вниз до нижнего "подвального" блока. Ещё мы перенесли фон из блока <div id="container"> в блок <div id="wrapper">.

#outer_wrapper {
  background: #fff url(background_3.gif) repeat-y left;
}
#wrapper {
  background: url(background_2.gif) repeat-y right;
}

Там, где нет фоновой картинки, будет виден белый цвет, окрашивая тем самым фон нашей средней колонки. Добавим также фоновые картинки во внутренние элементы, чтобы избежать досадных глюков в некоторых версиях браузера Internet Explorer.

#container {
  width: 100%;
  float: left;
  margin-right: -200px;
  background: url(background_2.gif) repeat-y right;
}
#content {
  margin-right: 200px;
  background: url(background_3.gif) repeat-y left;
}

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

#main {
  margin-left: 150px;
}
#left {
  width: 150px;
  float: left;
}

Наконец, мы добавили следующие стили "шапке" и "подвалу", придав им более законченный вид:

border: 1px solid #cecea5;

Посмотрите на Пример 5 и не стесняйтесь заглянуть в его код.

Конечно, не забудьте в своем сайте использовать директиву @import, чтобы старые броузеры не изуродовали ваш сайт.

В заключение

Как вы видите, отрицательные поля - малоизвестный аспект CSS-вёрстки, который дает еще один импульс для творчества тем из нас, кому так важен порядок расположения элементов в коде страницы, и кто не против добавить для этого несколько дополнительных обрамляющих div-блоков.

Райан Брилл

Ryan Brill has a passion for design, especially when XHTML and CSS are involved. He's fully devoted to doing his part to push the web in the right direction, not only when writing for his blog, but also when developing sites through his web development company, Infinity Web Design.

* * *

Лечим очередной баг IE (примечания коллектива Webmascon.com)

Наблюдается следующая картина: если боковое меню содержит больше определенного количества пунктов, то фоновое изображение не множится до конца соответствующего блока (смотрите пример). Ошибка наблюдается лишь в Internet Explorer для Windows (проверяли в 6-ой версии), качественно сделанные браузеры ведут себя адекватно.

Баг лечится очень просто (2 варианта решения):

В стили для #outer_wrapper нужно добавить...