Бузочок

В процессе подготовки второй статьи по азам CSS, мне захотелось поделиться с вами часто используемыми приёмами в HTML/CSS-вёрстке.

Когда-то меня вводила в ступор необходимость прилепить футер к нижней границе браузера, или разместить какой-нибудь блок строго по центру экрана. И я думаю, что не один такой :)

Макет с одной колонкой по центру

Стандартная задача — разместить контент в середине экрана. Контентная часть может быть фиксированной или резиновой, а еще надо вытянуть центральный блок в высоту на весь экран…

<div class="wrap">
<div class="contentdiv">
Этот блок фиксированного или относительного размера всегда будет горизонтально отцентрирован. <br /><br />
А еще он растянут на всю высоту экрана.
</div>
</div>

html, body {height: 100%;}
.wrap {
/*центрируем*/
position: relative;
width: 50%; /*могут быть и пиксели*/
margin: 0px auto ;

/*вытягиваем в высоту*/
height: auto !important;
height: 100%;
min-height: 100%;

/*украшательства*/
border-left: 1px solid #69b401;
border-right: 1px solid #69b401;
}

.contentdiv {padding: 10px;}

Тут два вложенных блока, наружный — обёртка, который позиционирует контентную часть, внутренний — сам контент. Выдвигаем его на середину, указываем ему отступ margin: 0px auto; и ширину width: 50%; размеры могут быть как в px, так и в %. Растягиваем по высоте: для IE и для всего остального, как обычно, разные способы, поэтому высоту указываем 4 раза — 3 раза в блоке и 1 раз в html, body.

Почему именно так?
Чтобы контент не проваливался в нормальных браузерах, пишем height: auto !important, а ниже — height: 100%. Нормальные браузеры понимают !important как более высокий приоритет и используют его, а IE6, в следствие своей безумности, переписывает «нижним значением» «важное значение»…

Для обёртки нельзя использовать вертикальные отступы, это даст ненужный скролл, поэтому все необходимые отступы используем во внутреннем блоке.

Наглядный пример.

Футер

Футер, который находится всегда внизу, тоже одна из тривиальных задач, которая у многих вызывает ступор. Способ растягивания контента на всю страницу, описанный выше, прекрасно дополняется правильным футером.

Внутри блока-обёртки — wrap:

<div class="empty_inner" style=""> </div>

И сам footer после этого блока:

<div id="footer">
Копирайты всякие
</div>

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

#footer {
position: relative;
height: 20px;
margin-top: -21px;
line-height: 20px;
vertical-align: middle;
border-top: 1px solid #e8e9e8;
width: 100%;
text-align: right;
}

Указываем высоту блока и поднимаем блок на эту высоту вверх с помощью верхнего отрицательного margin. В данном случае высота на единицу больше из-за бордера, также если использовать для футера еще и паддинги, то они сплюсуются с высотой, и в margin, соответственно, надо будет указывать общее значение.

Также его можно поднять с помощью отрицательного нижнего margin для блока обёртки .wrap:

margin:0 auto -21px;

Смысл блока, который находится в контентной части — не дать содержанию сайта залезть на футер когда страница растянется, просто указываем высоту нашего блока:

.empty_inner {
height:20px;
}

Пример.

Попап

Довольно часто встречающийся вопрос, как разместить небольшой блок фиксированного размера по центру экрана:

<div class="popup">Какой-то контент</div>

Вот такой css для блока:

.popup {
position: absolute;
top: 50%;
left: 50%;
width: 360px;
height: 180px;
margin-left: -180px;
margin-top: -90px;
border: 1px solid #69b401;
padding: 5px;
}

Что мы тут видим? Позиционируем абсолютно и отправляем в центральную точку экрана — 50% 50%. Получается, что блок висит левым углом чётко по центру экрана. Естественно это нас не устроит. Поскольку размеры блока нам известны, то мы просто отодвигаем его влево и вверх на нужное нам число пикселей. Для этого лучше всего подойдет margin, он может принимать отрицательные значения, которые нам и нужны.

Пример.