Ошибка: Failed to parse the Currency Converter XML document.
$49 372.14


Ошибка: Failed to parse the Currency Converter XML document.
$20 228.02


Ошибка: Failed to parse the Currency Converter XML document.
$3 250.80


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

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

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


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


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

header

content

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.

Phasellus varius eleifend.

Donec euismod.

Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.

Integer nonummy mauris sit.

sidebar

link one

link two

footer

Посмотрите на Примере 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 код:

content

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.

Phasellus varius eleifend.

Donec euismod.

Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.

Integer nonummy mauris sit.

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

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

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

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

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

content

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.

Phasellus varius eleifend.

Donec euismod.

Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.

Integer nonummy mauris sit.

sidebar

link one

link two

Теперь, сделав это, мы можем добавить к охватывающему блоку фоновое изображение. Мы зададим фоновому изображению свойство «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.

navbar

link one

link two

content

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.

Phasellus varius eleifend.

Donec euismod.

Praesent mauris mi, adipiscing non,
mollis eget, adipiscing ac, erat.

Integer nonummy mauris sit.

sidebar

Here be your sidebar.

Add whatever content you may desire.

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

Как вы можете видеть в вышеприведённом XHTML-коде, мы добавили: общий обрамляющий блок
, блок левой колонки
, а так же блок
вокруг центрального текста страницы. Наш новый обрамляющий блок будет содержать фоновую картинку для левой колонки, и это фоновое изображение будет повторяться вниз до нижнего «подвального» блока. Ещё мы перенесли фон из блока
в блок
.

#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 нужно добавить...

border: 1px solid transparent;...или туда же вписать

height:100%;Вуаля! — вот она — исправленная страница!

 

Интересное

Основы позиционирования блоков
Блоки — прямоугольные области, используемые в CSS для формирования и отображения документов. Это упрощенно, очень сильно упрощенно, но на первом этапе вполне может и хватить.С появлением нового...
Подробнее...
Используем Cron
Данная заметка предназначенна для тех, кто собирается работать с cron, но еще не знает как все это делается. Я в кратце попробую объяснить что такое cron, для чего он нужен да и как вообще с ним...
Подробнее...
12 языков...
Существует около 8 500 языков программирования (не удивляйтесь, данные не преувеличены), однако, несмотря на такое разнообразие, число языков, на которых пишет большинство, с трудом переваливает...
Подробнее...
Голосование на базе
«А зачем на базе?» — спросите Вы и будете абсолютно правы. В принципе незачем. Просто делая как-то систему управления, я столкнулся с необходимостью дать абсолютно некомпетентному в кодинге...
Подробнее...
10 причин медленной работы...
Пользователи редко жалуются на работу новых ПК. Немудрено, ведь и система, и программы запускаются мгновенно. Однако со временем они начинают замечать, что система работает всё медленнее и с...
Подробнее...
SSH - доступ. Crontab....
Закачивать сайт можно по протоколу FTP, соединяясь с сервером, где расположен ваш сайт, с помощью FTP-клиента. Но бывают ситуации, когда нужно отладить работу скрипта непосредственно на сервере...
Подробнее...
Руководство по TCP/IP для...
Большинство из нас знает TCP/IP как «клей», связующий Internet. Но не многие способны дать убедительное описание того, что этот протокол представляет собой и как работает. Итак, что же такое...
Подробнее...
Поиск файлов с расширением...
Чтобы убедиться в этом, создайте текстовый файл и запишите в него одно слово (например, «поиск»). Сохраните этот файл с расширением log или cpp. Теперь запустите поиск файлов (Пуск > Поиск),...
Подробнее...
Какой софт нужен для...
Что нужно настоящему веб-мастеру для полноценной работы? Совсем немного. В этой статье я опишу весь soft, который нужен для нормальной работы web-мастеров.1) Правильный выбор HTML-редактора.В наше...
Подробнее...
О Windows Vista
<img src=«http://i-faq.ru/uploads/posts/2007-09/1189807052_[b]windows[/b]_vista_logo.png» align=«left» style=«border: none;» alt=«О Windows Vista» />О Windows Vista слышали если не все, то, как...
Подробнее...