Мои любимые CSS-приемы
Опубликовал Александр Шабуневич — 22 Апрель 2008, 23:34
Я уже писал, что не пользуюсь чужими CSS-фреймворками, но конечно же, во время верстки, я часто повторяю определённые действия, включающие в себя приёмы по установке минимальной ширины или разбивки макета на три колонки и т.д. Каждый из этих приёмов прошел проверку временем и применяется мной почти в каждом проекте. Профессионалы конечно ничего нового не узнают, но может быть новички смогут что-то почерпнуть.
Три колонки
Чаще всего я пользуюсь простым и надежным способом: обычные плавающие блоки. Другие способы (типа Holy Grail), которые используют negative margins и другие хитрые способы позиционирования, в большинстве своем оказались довольно глючными или плохо работали с другими техниками.
Для получения трех колонок возьмем следующий код:
<div id="content-wrapper">
<div id="content">...</div>
<div id="right">...</div>
</div>
<div id="left">...</div>
Здесь я назначил ID left и right, но на реальных сайтах лучше использовать смысловые обозначения, наподобие sidebar и navbar.
Теперь, чтобы привести этот код в надлежащий вид, применим следующие стили:
#content-wrapper {
float: right;
width: 75%;
}
#left {
float: left;
width: 25%;
}
#content {
width: 70%;
float: left;
}
#right {
float: right;
width: 30%;
}
Как всегда у веб-стандартов больше преимуществ, чем кажется на первый взгляд
Плюс данного подхода в том, что содержимое находится «выше» боковых колонок, что положительно сказывается на SEO и доступности. Минус же в том, что боковые колонки должны иметь динамическую ширину, что не всегда подходит по дизайну — иногда требуются фиксированные колонки. Тогда уж отрицательных полей (negative margins) не избежать.
Также минусом можно считать лишний обёртывающий <div> — #content-wrapper.
Другие варианты
Минимальная ширина
Нормальные современные браузеры понимают инструкцию min-width
, но это не касается IE6. А так как еще довольно много людей им пользуется, в коммерческих проектах приходится применять различные хаки для задания минимальной ширины (чтобы сайт не схлопывался). Одним из самых популярных способов является использование проприетарных expression-ов в CSS.
Мне данный способ не нравится, так как он иногда подглючивает и требует JavaScript. Это означает, что пока документ не догрузился, минимальная ширина не работает и дизайн «будет прыгать». Поэтому я предпочитаю метод на чистом CSS — автором которого является Сту Николс.
Способ заключается в том, что для нормальных браузеров (включая IE7) указывается свойство min-width
, а для IE6 заводится дополнительный обёртывающий <div>, которому назначается широкая граница (border), а внутренний блок смещают влево на ширину этой границы.
<div id="wrapper"><div id="min-width">
<div id="content-wrapper">
<div id="content">...</div>
<div id="right">...</div>
</div>
<div id="left">...</div>
</div></div>
CSS для IE6 лучше вынести в отдельный файл, подключив его при помощи условных комментариев:
* html #wrapper {
border-left: 950px solid #fff;
zoom: 1;
}
* html #min-width {
margin-left: -950px;
position: relative;
zoom: 1;
}
Другие варианты
«Прилепленный» подвал
Часто бывает нужно прилепить подвал к низу страницы, если ее содержание не растягивается на всю высоту окна. Для этого есть довольно много способов, но я выбрал один наиболее надежный и постоянно использую его. Автором оригинального метода является Кэмерон Адамс.
<div id="wrapper">
...
</div>
<div id="footer">
...
</div>
и сопутствующий код CSS:
html,
body {
height: 100%;
}
#wrapper {
position: relative;
min-height: 100%;
}
* html #nonFooter {
height: 100%;
}
#footer {
position: relative;
margin: -7.5em auto 0 auto;
}
Условные комментарии
Добавьте этот код в документ:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
<![endif]-->
и ваш CSS-файл будет подключен только для Internet Explorer. Используя эти условные комментарии, вы сможете подключать CSS и Javascript файлы для определённых версий Internet Explorer. Подробнее про conditional comments.
Очистка плавающих блоков
Когда элементам назначается свойство float
, их высота не учитывается в родительском элементе и он «схлапывается». Чтобы этого не произошло, можно добавлять в разметку специальные элементы (например <br>
), которым назначено свойство clear:both
. А можно решать этот вопрос только при помощи CSS:
#parent-element:after{
content: "";
display: block;
clear: both;
}
Для IE это правило не работает. Я обычно добавляю в ie.css следующую конструкцию, которая включает свойство hasLayout и решает проблему:
#parent-element{
zoom: 1;
}
Всё вместе
Я собрал все перечисленные приемы в единый файл. Обычно я начинаю новые проекты примерно с такого вот шаблона:
Комментарии
я недавно открыл для себя min-width max-width, поэтому сайт теперь полудинамичный – разъезжается в зависимости от размеров
Тебе правда удобно(глазами) открывать закрывать див как
<div id=„blabla“>
</div> <!--end of blabla -->
?
Мне просто этого например не хватило, и я начал писать комментарии START of blabla и END of blabla =)
Да, вполне достаточно. При открытии же написано какой это id, а вот при закрытии этого не видно. Вот одних отступов, которых достаточно другим, мне не хватает.
К сожалению, так. Но если нужно сделать три колонки с резиновой центральной, то замену отрицательным margin-ам найти трудно.
Да, я как раз про это написал в тексте. Вот сейчас нужно будет верстать как раз такой вариант — с фиксированной левой клонкой и резиновыми остальными. Придется использовать негативы…
Спасибо за статью! Только начинаю заниматься версткой и ваши приемы очень даже кстати :)
Спасибо, отличная статья
Спасибо Александр за примерчики, очень полезная статья
А как же
#left {float: left; width: 200px;}
#right {float: right; width: 150px}
#content {margin: 0 150px 0 200px}
vonica, этот вариант работает только при условии расположения контента после боковых колонок в коде. Если это не критично, то можно делать и так.
Если необходимо сверстать html-страницы сайта так, чтобы обеспечить их одинаковое отображение во всех браузерах, то это возможно сделать только с помощью верстки на таблицах (тэг TABLE).
Бред
Действительно бред. Таблицы – это каменный век, код получается громоздким и неудобно читаемым. Вёрстка на слоях имеет много преимуществ. Если вам это не известно, читайте и читайте. Извиняюсь за дерзость.
< table >
< tr >
< td >1< /td >
< td >2
где здесь неудобно читать? или куева туча дивов с идентификаторами – эт конечно удобно. все доводы дивоводов – это современно. а что современно? на три колонки по быстрому удобнее и быстрее разделить таблицей, а потом уже дивами оформлять, здесь не спорю. ещё один довод – удобно править. вы так часто правите? прям каждый день садитесь, читаете и правите одну и ту же страницу?
головой-то думать тоже нужно. не нужно отказываться, нужно объединять.