Ксдыщь!

Дилетантские заметки про XSLT/XPath, HTML/CSS и всякую фигню

Семантическая верстка — советы и решения. Часть IV. Создание «резиновых» макетов с использованием отрицательных полей

1 февраля 2008 · Комментариев: 19 · HTML/CSS, Рецептарий

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

Разберем использование отрицательных полей на примере. Мы сверстаем трехколоночный макет с двумя фиксированными боковыми колонками, тянущейся центральной, шапкой и подвалом.

html:

<div id="header">
    Шапка
</div>
<div id="container">
    <div id="nav">
        Левая колонка
    </div>
    <div id="content">
        Контент
    </div>
</div>
<div id="sidebar">
    Правая колонка
</div>
<div id="footer">
    Футер
</div>

Обратите внимание на то, что левая и центральная колонки объединены общим контейнером. Именно для этого контейнера мы установим отрицательное поле, которое «подтянет» правую колонку.

style.css:

body {
    padding:20px;
    background:#FFF;
    color:#000;
    }
#header {
    padding:10px;
    background:#51CAC8;
    }
#container {
    float:left; /* Делаем контейнер плавающим, чтобы добиться нужного поведения */
    width:100%; /* Указываем контейнеру занимать все доступное пространство */
    margin:10px -170px 10px 0; /* Устанавливаем отрицательное правое поле, чтобы подтянуть правую колонку */
    }
#nav {
    float:left; /* Прижимаем блок налево */
    width:150px; /* Обращаем внимание, что фактическая ширина блока = 170 пикселям */
    padding:10px;
    background:#E73D00;
    }
#content {
    margin:0 150px 0 170px; /* Устанавливаем поля, чтобы контент не «налезал» на боковые колонки */
    padding:10px;
    background:#91CA00;
    }
#sidebar {
    float:right; /* Прижимаем блок направо */
    width:130px; /* Обращаем внимание, что фактическая ширина блока = 150 пикселям */
    margin-top:10px;
    padding:10px;
    background:#F5DC09;
    }
#footer {
    clear:both; /* Ставим подвал ниже самой длинной колонки */
    padding:10px;
    background:#DDDEDF;
    }

ie.css:

* HTML #nav {
    width:170px;
    w\idth:150px;
    }
* HTML #sidebar {
    width:150px;
    w\idth:130px;
    }
#footer {
    height:1%; /* Немного магии для IE5, неправильно считающего отступы */
    }

Это даст нам следующий результат:

Иллюстрация результата

Центральная колонка при этом будет тянуться пропорционально размерам рабочей области окна. Принципиальное отличие такого макета от таблицы с тремя ячейками заключается в том, что наши три колонки не будут одновременно тянуться по высоте, а будут занимать нужное им вертикальное пространство. При этом подвал всегда будет ниже самой длинной из них. Для того, чтобы эмулировать поведение ячеек таблиц, вам придется воспользоваться техникой faux columns.

Материалы для изучения:

Комментариев: 19 ↓

  • FX Poster

    Зря дизайн сменил. Прошлый был лучше.

  • Flack

    Мне лень допилить и сверстать новый, такшта ставлю темы всякие погаже, гг.

  • FX Poster

    Я хоть нифига и не дизайнер, но все же:
    1. Убери нахер лок с изображением вверху и бордер 3-хпиксельный оттуда же.
    2. У h2 там border-top 3-хпиксельный. Сделай однопиксельным и dotted. А лучше – еще один див туда и background-image’м эти точки, которые снизу. Я только что firebug’ом такое сделал – имхо, лучше.

  • FX Poster

    *блок с изображением

  • FX Poster

    Насчет поста – был бы интересен вариант с #content до #nav’а. Как наиболее удачный для SEO.

  • егор

    почему бы не воспользоваться layoutgala?

  • Михаил

    А не лучше ли стили для ie 5.5 выносить в отдельный файл и подключать через CC?
    Или он их не понимает?

  • FX Poster

    Понимает. Лучше/нет – вопрос спорный. Каждый делает как ему нравится.

  • Михаил Валенцев

    Согласен с FX Poster о том, что намного интереснее модель c #content перед #nav, или даже с “any order columns”. %)

  • Flack

    А не лучше ли стили для ie 5.5 выносить в отдельный файл и подключать через CC?

    Мне хватает одного файла для всех IE. Жирно ему будет :)

  • Flack

    почему бы не воспользоваться layoutgala?

    Не уловил суть вопроса.

  • Bинтаж

    егор
    не думаю, что это эффективнее будет :)

  • Костя

    Мне кажется эфективней с какой нибудь оболочки это делать например дремвиер

  • Грин

    Возник вот вопрос, есть трехколоночная блочная модель, в всем основном идентичная приведенной здесь. Внутри блока с контентом ставлю картинку с float:left; справа от нее идет какой-то текст. Он по высоте получается мень??е высоты картинки. После всего этого должна идти полоска разделения. Для нормального вне??него вида мне надо этой полоске поставить clear:both; дабы она ??ла после всего блока. Но из-за флотнутых левой и правой колонок, эта полоска уходит вниз, под них… На ум приходит только задать высоту блоку с картинкой и текстом, но это совсем не универсально. Как-нибудь можно с этим справиться?

  • Александра

    А я этот способ еще два года назад нашла на Webmascon и до сих пор им пользуюсь! Спасибо! :)

  • 1ney

    Проблема остается таже, что и при другой тянущейся блочной верстке.
    Суть – при использовании float контейнеров фиксированной ширины внутри центральной колонки с применение clearfix (примерно так: font-size: 1px; float: none; clear: both;) весь контент после clearfix со свистом съезжает вниз до конца левой/правой колонки.

  • Roger

    Спасибо автору.

  • amxm

    Эх, наверное надо как нибудь выкрасть время на это, а то всё в таблицах верстаю.

  • Григорий

    Превод статьи Faux Columns из материалов по изучению: http://www.clearboth.ru/article/fauxcolumns.html

Оставить комментарий