Как придавить подвал к низу экрана. Вариант 2

21.08.2009 | Рубрики: Верстка | 1 комментарий
Тэги: , ,

В описанной мною ранее версии мы использовали пустой блок по имени empty. Валидатор, как известно, весьма недружелюбно относится к пустым блокам. Поэтому веб-мастера ищут и находят более лояльные решения. Одно из таких я и хочу вам сегодня представить. Нашел я его на сайте cssstickyfooter.com (название говорит само за себя).

Принцип действия достаточно прост. Всей тушке задается высота в 100%. Подвал так же, как и раньше, отделен от основного контейнера, и ему задано относительное позиционирование (relative) и отрицательный отступ margin-top, равный высоте самого подвала. У основного же контейнера наоборот – задано нижнее поле padding-bottom на точно такую же высоту.

Все бы ништяк, но непослушный ослик IE не понимает правила вида:

{height: auto; min-height: 100%;}

Поэтому мы от него этот набор скрыли вот таким простеньким хаком:

body > #wrap {height: auto; min-height: 100%;}

Здесь запись body > #wrap означает, что блок wrap является прямым наследником тэга body. Все добропорядочные браузеры понимаю эту запись и следуют ей, игнорируя все остальное. Для IE мы прописали другой набор:

html, body, #wrap {height: 100%;}

Это он понимает и выполнит с радостью.

Остается лишь привести полный код страницы со стилями. Их (стили) я не стал выносить в отдельный файл, чтобы не размазывать сопли по тарелке. Думаю, все понятно и так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title></title>
<style type="text/css">
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 50px;}
#footer {position: relative; margin-top: -50px; height: 50px; clear:both;}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<p>Здесь размещается основной контент. Причем без разницы, сколько колонок вы используете. Короче, здесь лежит контент. Все!</p>
</div>
</div>
<div id="footer">
<p>Подвал с мышами и бомжами :)</p>
</div>
</body>
</html>

На сайте авторов в оригинальной статье представлен расширенный код с использованием дополнительного хака под браузер Google Chrome. При желании можете сами поковырять его и добавить в ваш код. Называется этот хак Clearfix. Обратите внимание, что прикручен он в коде непосредственно к самому основному блоку в виде дополнительного класса:

<div id="main" class="clearfix">

Тени для заголовков средствами CSS

14.08.2009 | Рубрики: Верстка | Комментарии (3)
Тэги: ,

shadowtext.gif
Вот такую любопытную фишку обнаружил на днях у Tyssendesign. А именно: заголовки статей там красиво обрамлены легкой тенью. Думал вначале, что это что-то из модной нынче автозамены шрифта каким-нибудь флэшем, но оказалось все намного проще и приятнее. В спецификации CSS уже давно есть любопытное свойство text-shadow, которое позволяет задать тексту симпатичную тень, выбрав необходимый цвет и смещение. Выглядит запись очень просто.

Например, зададим тени заголовкам поста в блоге:

#content h2 {
text-shadow: 2px 2px 1px #C3DBE5;
}

Первые два значения задают, соответственно, смещение по горизонтали и по вертикали. Третье — размытие. Ну а цвет, он и в Африке цвет.

Работает такая фишка практически во всех современных браузерах кроме IE. Ну… да и шут с ним.

Подробнее про данный эффект можно почитать у dimox-а

Стр. 36 из 67«...«33343536373839»...»