Отрицательные поля, пожалуй, самый мощный инструмент для семантической верстки сложных макетов. Овладеть этой техникой просто необходимо, потому как благодаря ей вы во многих случаях сможете отказаться от таблиц для разметки макета.
Разберем использование отрицательных полей на примере. Мы сверстаем трехколоночный макет с двумя фиксированными боковыми колонками, тянущейся центральной, шапкой и подвалом.
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.
Материалы для изучения:
Зря дизайн сменил. Прошлый был лучше.
Мне лень допилить и сверстать новый, такшта ставлю темы всякие погаже, гг.
Я хоть нифига и не дизайнер, но все же:
1. Убери нахер лок с изображением вверху и бордер 3-хпиксельный оттуда же.
2. У h2 там border-top 3-хпиксельный. Сделай однопиксельным и dotted. А лучше – еще один див туда и background-image’м эти точки, которые снизу. Я только что firebug’ом такое сделал – имхо, лучше.
*блок с изображением
Насчет поста – был бы интересен вариант с #content до #nav’а. Как наиболее удачный для SEO.
почему бы не воспользоваться layoutgala?
А не лучше ли стили для ie 5.5 выносить в отдельный файл и подключать через CC?
Или он их не понимает?
Понимает. Лучше/нет – вопрос спорный. Каждый делает как ему нравится.
Согласен с FX Poster о том, что намного интереснее модель c #content перед #nav, или даже с “any order columns”. %)
Мне хватает одного файла для всех IE. Жирно ему будет :)
Не уловил суть вопроса.
егор
не думаю, что это эффективнее будет :)
Мне кажется эфективней с какой нибудь оболочки это делать например дремвиер
Возник вот вопрос, есть трехколоночная блочная модель, в всем основном идентичная приведенной здесь. Внутри блока с контентом ставлю картинку с float:left; справа от нее идет какой-то текст. Он по высоте получается мень??е высоты картинки. После всего этого должна идти полоска разделения. Для нормального вне??него вида мне надо этой полоске поставить clear:both; дабы она ??ла после всего блока. Но из-за флотнутых левой и правой колонок, эта полоска уходит вниз, под них… На ум приходит только задать высоту блоку с картинкой и текстом, но это совсем не универсально. Как-нибудь можно с этим справиться?
А я этот способ еще два года назад нашла на Webmascon и до сих пор им пользуюсь! Спасибо! :)
Проблема остается таже, что и при другой тянущейся блочной верстке.
Суть – при использовании float контейнеров фиксированной ширины внутри центральной колонки с применение clearfix (примерно так: font-size: 1px; float: none; clear: both;) весь контент после clearfix со свистом съезжает вниз до конца левой/правой колонки.
Спасибо автору.
Эх, наверное надо как нибудь выкрасть время на это, а то всё в таблицах верстаю.