В тот момент, когда я стал переходить на дивовую верстку, а произошло это почти год назад (как быстро летит время), одним из серьезных уроков, которые я должен был освоить, был простой и удобных способ верстки трехколоночного макета страницы с использованием <div>‘ов и каскадных таблиц стилей. ...
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3. Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю ...
Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так: Ее особенность заключается в том, что вся видимая часть формы — это поле ввода текста и нужно учесть, что его ...
Комментарии (39)
Возможно, единственным недостатком, является то, что колонки не одинаковой высоты.
В своих шаблонах, решал эту проблему иначе.
Но там тоже минус сложности с резиной.
Да, если в моем примере, в случае с резиновостью, будет нужна одинаковая высота колонок, то придется использовать некоторые хитрые приемы.
А твое решение высоты колонок мне очень понравилось (помню статью), только, действительно, оно подходит лишь для фиксированной ширины.
Отличный способ. Небольшое замечание: 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, а вот ниже колонки — как подставить?
Пробовал ставить в контент и указывать отступ фона, но, само собой не вариант, ибо при растягивании плывёт. (по рецепту www.communitymx.com/content/article.cfm?page=2&cid=AFC58)
ПОМОГИТЕ, плиз!
gordi, ты наверное линк попутал. Та статья не об этом. Может дашь, который ты имел ввиду? Спасибо.
Я видел ту страницу, но там всё немного не то. 3-хколоночный шаблон там не резиновый по ширине. :-(
Нашёл по-моему именно то: www.pmob.co.uk/temp/3coltest-2.htm,
Но надо ещё проверить.
Вот здесь еще рассматривается этот вопрос — 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.
В чем вы смотрите?
Все примеры изначально работают.
Не однократно проверены в боевых условиях.
Аккуратность и внимательность не повредит :)
Спасибо огромное! Давно искал хороший дивовый шаблон и тут — такой подарок:)
Жаль, фоны колонок не растягиваются на всю высоту центрального блока…
Наприклад:
www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp