Верстка трехколоночного макета страницы с помощью CSS
В тот момент, когда я стал переходить на дивовую верстку, а произошло это почти год назад (как быстро летит время), одним из серьезных уроков, которые я должен был освоить, был простой и удобных способ верстки трехколоночного макета страницы с использованием <div>‘ов и каскадных таблиц стилей.
Хорошо, когда кто-то уже сделал подобное до тебя, не приходится заново “придумывать колесо”. Достаточно найти готовое решение, которое следует хорошенько запомнить и адаптировать под себя, если потребуется. Моим замечательным помощником по данному вопросу стал уже не однократно упоминаемый мной сайт Layout Gala, на котором предлагается множество хороших макетов для верстки страниц со всевозможными вариантами представления контента.
Оный макет хорошо зарекомендовал себя, поэтому я его постоянно использую на практике.
Особенности данного макета:
- Текучая (резиновая) верстка - растяжка происходит за счет контентной части, левая и правая колонки фиксированные. Я так полагаю, что этот макет можно изменить и под одновременное растяжение всех 3-х частей. Но пока мне этого не приходилось делать.
- Используется фактор внутренней поисковой оптимизации - блок с контентом расположен в коде до начала левой и правой колонки. Этот один из моих любимых моментов в дивовой верстке. Контент начинается практически в самом начале разметки страницы. При желании можно и хэдер, если он достаточно большой, разместить ниже кода контента.
Реализация в этом макете трех нужных колонок достигается за счет использования плавающих блоков (контент, левая и правая колонки) и отрицательных отступов для левой и правой колонок.
Структура HTML-кода
При использовании оригинального кода макета с Layout Gala в нашем “любимом” IE наблюдался следующий баг - при быстром сужении окна браузера левая колонка съезжала к центру. Чтобы от этого избавиться, я поместил блоки контента и обоих колонок в дополнительный контейнер с id=”container” и указал ему ширину в 100%.
- <html>
- <body>
- <div id="wrapper">
- <div id="header"></div>
- <div id="container">
- <div id="content">
- <div id="text">
- </div>
- </div>
- <div id="left"></div>
- <div id="right"></div>
- <div class="clear"></div>
- </div>
- <div id="footer"></div>
- </div>
- </body>
- </html>
CSS-таблицы
Приведу здесь только ту часть CSS-кода, которая формирует 3 колонки в блочном варианте верстки (остальное будет в примере). Прошу обратить внимание, что для того, чтобы сработало CSS-свойство #container {width: 100%;} для устранения бага в IE, необходимо одновременно задействовать правила минимальной ширины для основного блока (width: expression и min-width).
- #wrapper {
- width: 100%;
- width: expression((documentElement.clientWidth||document.body.clientWidth)<;995?'1000px':'');
- min-width: 1000px;
- }
- #container {width: 100%;}
- #content {
- width: 100%;
- float: left;
- }
- #text {margin: 0 250px;}
- #left {
- float: left;
- width: 250px;
- margin-left: -100%;
- }
- #right {
- float: left;
- width: 250px;
- margin-left: -250px;
- }
Пример
Можно посмотреть на готовый пример макета страницы в три колонки с использованием блочной верстки (2 колонки фиксированные).
автор: Dimox | рубрика CSS-верстка | TrackBack
Возможно, единственным недостатком, является то, что колонки не одинаковой высоты.
В своих шаблонах, решал эту проблему иначе.
Но там тоже минус сложности с резиной.
Да, если в моем примере, в случае с резиновостью, будет нужна одинаковая высота колонок, то придется использовать некоторые хитрые приемы.
А твое решение высоты колонок мне очень понравилось (помню статью), только, действительно, оно подходит лишь для фиксированной ширины.
Отличный способ. Небольшое замечание: width: 100%; для #wrapper и #container ,
лишнее. И так растянется)
webvector, для #wrapper, возможно, и не обязательно, но для #container требуется. Причину я описал в статье.
Классно, спасибо за советы!
Нигде не могу найти , что значит конструкция
* {margin: 0;padding: 0; font: 14px/17px “Trebuchet MS”, Tahoma, Arial}
в определении стиля.
Если не сложно, скиньте ссылку, где это можно почитать на мейл losk@onego.ru
Звездочка говорит о том, что следующие правила нужно применить для всех элементов страницы. Т.е. данной конструкцией мы везде обнуляем отступы (поскольку по умолчанию у разных браузеров они отличаются) и задаем параметры шрифта по умолчанию.
Ссылку не знаю, поищите по ключевым словам “обнуление стилей”.
Спасибо! Только что воспользовался, за полчаса переверстал старый проект, стало гораздо лучше :)
Неплохой шаблон, кратко и заточено под раскрутку. А проблема с разной высотой цветных колонок легко решается использованием графического бэкграунда для блоков container и/или body/html. Задается бэкграунд для левой и правой частей отдельно, с шириной картинки равной ширине боковой колонки.
Подскажите, пожалуйста, как можно сделать колонки одинаковыми по высоте?
Леву без проблем - подставляю рисунок фона #left и #container.
Для правой подставляю её фон #right, а вот ниже колонки - как подставить?
Пробовал ставить в контент и указывать отступ фона, но, само собой не вариант, ибо при растягивании плывёт. (по рецепту http://www.communitymx.com/content/article.cfm?page=2&cid=AFC58)
ПОМОГИТЕ, плиз!
Можно так
http://trifler.ru/blog/post_1213207881.html
gordi, ты наверное линк попутал. Та статья не об этом. Может дашь, который ты имел ввиду? Спасибо.
Gruz, gordi дал правильную ссылку. В той статье есть ссылка на страницу с примерами - http://trifler.ru/blog/layouts2.html
Я видел ту страницу, но там всё немного не то. 3-хколоночный шаблон там не резиновый по ширине. :-(
Нашёл по-моему именно то: http://www.pmob.co.uk/temp/3coltest-2.htm
Но надо ещё проверить.
Вот здесь еще рассматривается этот вопрос - http://blog.sjinks.org.ua/css/209-cross-browser-liquid-three-column-layout-full-height/
Большое спасибо! По-моему то, что надо. Читаю.
Gruz>Я видел ту страницу…
А с чего вы взяли что она не резиновая?
Область контента резиновая и это параметр регулируется.
Или вам надо чтобы все колонки были резиновые?
Она в Лисице резиновая, а в ИЕ - нет (или наоборот). Я пробовал с разными параметрами.
В IE6(7), OPERA9.23, OPREA9.5, FF2.014, FF3
Все, как и заявлено в статье.
На странчке примера, специально показан блок с фиксированной шириной больше заданного min-width.
В чем вы смотрите?
Мы говорим про этот пример?
http://trifler.ru/blog/i/layouts/example/left_content_right.htm
В этом виде он фиксированный.
уменьшил min-height до 770 пкс.
А максимальный убрал. Вроде в ИЕ7 и ФФ3 нормально.
Перед тем была проблемма, наверное что-то другое поменял. Спасибо большое!
Все примеры изначально работают.
Не однократно проверены в боевых условиях.
Аккуратность и внимательность не повредит :)
Спасибо огромное! Давно искал хороший дивовый шаблон и тут - такой подарок:)