Трехколоночный макет на CSS с одинаковой высотой колонок
Представляю Вашему вниманию еще один 3-хколоночный макет страницы, реализованный с помощью XHTML и CSS.
Вот так он выглядит в миниатюре:
Особенности:
- Оба сайдбара (левая и правая колонки) расположены с правой стороны. Такой тип страницы сейчас очень популярен, он используется на многих блогах.
- HTML-код основной колонки расположен до начала кода обоих сайдбаров.
- Все 3 колонки визуально растягиваются одинаково по вертикали при увеличении высоты одной из них. При этом не используются изображения.
- Универсальность - макет можно использоваться как в случае с фиксированной шириной страницы, так и в случае с “резиновой” шириной. Для этого необходимо применить соответствующие CSS-свойства у 3-х блоков (в примере есть комментарии).
- Кроссбраузерность проверена в основных популярных браузерах: Opera 9.23, FireFox 2.0, IE 6, IE 7, Safari/Win.
- Валидный XHTML, валидный CSS.
HTML-код
Основа макета выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="sub-container"> <div id="wrpr"> <div id="content"> <div id="text"></div> </div> <div id="left"></div> </div> </div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> |
В связи с тем, что в “резиновом” варианте в Internet Explorer 7 наблюдался небольшой отступ справа от правой колонки, пришлось задействовать дополнительный контейнер #wrpr. При фиксированной верстке данный контейнер не нужен.
CSS-код
Здесь публикую только код, отвечающий за расположение и визуализацию колонок. Все остальное в примере.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | #wrapper { /* для фиксированной ширины */ width: 900px; margin: 0 auto; /* для "резиновой" ширины width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':''); min-width: 1000px; */ } #container { width: 100%; background: #D5FFD5; /* фон основной колонки */ } * html #container {height: 1%;} #container:after { /* закрываем плавающие блоки */ content: '.'; display: block; clear: both; visibility: hidden; height: 0; line-height: 0; } #sub-container { float: left; border-right: 200px solid #BFF2FF; /* фон правого сайдбара */ /* для фиксированной ширины */ width: 700px; /* для "резиновой" ширины width: 100%; margin-left: -200px; */ } #wrpr { /* для "резиновой" ширины margin-left: 200px; */ } #content { width: 100%; float: left; } #text { border-right: 200px solid #FFF2BF; /* фон левого сайдбара */ } #left { float: left; width: 200px; margin-left: -200px; background: #FFF2BF; /* фон левого сайдбара */ position: relative; } #right { float: left; width: 200px; margin-left: -400px; background: #BFF2FF; /* фон правого сайдбара */ border-left: 200px solid #FFF2BF; /* фон левого сайдбара */ } |
Примеры
Смотрим готовый пример страницы, сверстанной описанным методом. Также можно посмотреть пример на реальном сайте, который я недавно верстал.
Для удобства можно скачать архив с примером универсальной трехколоночной страницы на CSS.
* * *
Украинский интернет-провайдер “Гигатранс” осуществляет комплекс работ по строительству ВОЛС, в том числе: прокладка, монтаж, сварка оптического волокна, а также предоставляет доступ к Интернету по выделенным каналам и сопутствующие услуги для любых категорий пользователей.
Звучит дико :)
Лично я против использования раскраски через border. По эстетическим причинам и по причинам проблемного редизайна таких макетов.
Не вижу ничего проблемного в редизайне макетов такого типа.
Я, конечно, тоже поддерживаю мысль, что, по сути, использование бордера как места под колонку нелогично и вообще (действительно) дико. Но на практике мы действительно имеем проблему с кроссбраузерной версткой трехколоночной страницы. Те же отрицательные отступы аналогично должны быть названы “дикими”. Поэтому, пусть каждый для себя решает, что он будет использовать в жизни. Я думаю и этот способ имеет право на жизнь если он реально работает. А вам, Dimox, спасибо за хорошо описанный вариант.
Я, конечно, понимаю нелогичность такого метода разметки. Но дивовая верстка не дает возможность использовать такие же средства представления страницы, как с помощью таблиц (виной все та же пресловутая кроссбраузерность), например, вытягивание на вcю высоту экрана, поэтому, используя дивы приходится применять различные трюки, чтобы получить нужный эффект. ИМХО, с CSS2 это неизбежно. И в этом нет ничего страшного.
ASh, пожалуйста ;).
Это конечно оригенально, но я не думаю, что подобный макет подойдет не под любой контект. Поэтому массово использовать я бы его не советовало, да и трудности с ним будут, но если ваш контент идеально вписывается в такой расклад, то почему бы и нет!
Мангуст, не все, что предлагается - для массового использования.
А если сделать ширину не фиксированного размера а 100%, все колонки останутся на своих местах? Не люблю, когда меня искусственно ограничивают и загоняют в определенные рамки…, это всеравно что написать на сайте: “сайт нормально отображается только через Internet Explorer”
Да, конечно колонки останутся на своих местах.
Что-то подобное делал не давно, но без кидания на бордюр :)
Получается, чуть проще, с минимальным количеством контейнеров.
http://trifler.ru/blog/post_1195143636.html
Наезд текста на картинку на реальном сайте надо поправить :)
gordi, я когда и верстал, и писал эту статью, вспоминал тебя, потому что у меня практически то же самое получилось :)
И еще. Я хотел показать этот вариант именно с использованием бордюров.
Как ты наверно помнишь, делал с border-ом дизай для LastoBlog :)
Мороки там было не меряно :)
Сейчас думаю на резиновый контент переходить.
С Вадимом, уже обсуждал этот вопрос.
Слишком уж у него дизайн узнаваем :)
Да, помню, конечно. Бордюров там немеряно ))). Так у него еще в самом начале типа резинового и был диз.
На счет узнаваемости - как он может быть не узнаваем, если блог популярен? Или ты имешь в виду, что схожие дизы используются на многих других сайтах?
>Так у него еще в самом начале типа резинового и был диз.
Так то еще на таблицах было :)
Практически все используют диз по дефолту.
Клонов пруд пруди, лень наверное самим, что либо менять
или не могут, работает и ладно :)
Во всем сказанном согласен с тобой.
Это все хорошо, конечно, но…
Столкнулся сейчас с такой же проблемой, но ещё осложненной тем, что футер должен быть всегда прилеплен к низу.
Может подскажете, что-нибудь?
Владимир, в этой статье описаны возможные способы.
И здесь можно посмотреть:
http://trifler.ru/blog/post_1213471601.html
Продолжение:
http://trifler.ru/blog/post_1213870726.html
Не без нюансов, но все рабочее.
Спасибо, почитаем!
Спасибо - скачал оба дизайна. С версткой на DVD у меня пока не очень(
Васек
Посмотите и здесь: http://trifler.ru/blog/comment_1223575204.html
Даже, Димирию понравилось :)
делать раскраску блоков рамкой это жесть)) согласен, зачем так мучиться чтобы сделать каркас страницы на дивах мне непонятно, что мешает сделать каркас таблицей?
В IE 5.5 криво отображается правая колонка
Извините, вы в каком веке живете? =)
Да простит их гуру вёрстки, ибо не ведуют дети, что лепечут :)
А способ реальный. Сам его давно юзаю. Есть другое решение: использовать бэкграунд для родителя, который уже 100% в высоту (например body). Но способ с бордерами мне, лично, больше нравицо. Во первых не нужен лишний файл-бэкграунд. Во-вторых, кошерней смотрицо в режиме “без графики”.
Пример, где я использовал: laysa.ru