Что нужно для того чтобы сверстать сайт, кроме ПО???

Вёрстка сайтов с использованием тега div является одновременно и простой, и сложной. Простота её заключается в легкости чтения итогового html-кода при том условии, что названия классам даны удобочитаемые, а не представляют из себя набор несвязных букв. Сложность же её в том, что приходится бороться с несколькими браузерами за идентичное отображение в каждом.

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

Зачем нужно делать так, чтобы подвал был "прибит" к низу страницы? Обратите внимание на страницу с контактной информацией на моём сайте. Вся страница просто сжата, как куча металлолома под прессом. Это просто некрасиво. Да, я ругаю собственный сайт, так уж случилось, что лень меня подбедила, когда я верстал свой "хомяк".

Так вот, приведу HTML-кода, который должен позволить нам сделать всё по плану:

<html><head></head><body>

Привет, я - содержимое страницы

А я подвал

</body></html>

Обратите внимание! Я использую строгий DOCTYPE, чтобы приблизить результат обработки скрипта всеми браузерами.

В результате работы скрипта у нас имеется:

* main — главный блок, в который помещено всё остальное содержимое страницы. Без него разные браузеры отображают итоговый рещультат, кто как хочет;
* top-part — блок, в котором будет размещена вся информация страницы, кроме "подвала" (футера) ;
* footer — собственно "подвал" страницы, который должен быть постоянно "прибит" к низу страницы;
* empty — вспомогательный блок, о котором расскажу чуть позже.

Об этом немного рассказал, теперь опишем стили, которые необходимы для правильного отображения нашего содержимого:

html, body, div {
margin: 0;
padding: 0;
}
html, body, .main {
height: 100%;
}
.top-part {
height: 100%;
display: table;
width: 100%;
}
.empty {
clear: both;
height: 150px;
visibility: hidden;
}
.footer {
height: 120px;
margin-top: -120px;
}

Сначала для тегов убираем внутренние и внешние отступы. Растягиваем на 100% по высоте теги body и html, а также main и top-part. Важное замечание: при той вёрстке, которая описана обязательно надо указывать display: table для блока top-part, иначе вёрстка некорректно отображается то ли во всех браузерах, кроме IE. Из-за этого для top-part необходимо указывать ширину 100%.

Для footer-a мы используем такую интересную фичу, как отрицательный margin, значение которого должно совпадать с высотой "подвала". Таким образом, в примере footer наползет на низ основного блока страницы на 120 пикселей. Чтобы при этом он не закрыл полезное содержимое страницы, мы и создаем div с классом empty, высоту которого указываем больше или равную высоте подвала. Для empty также стоит указать clear: both, чтобы какие-то обтекающие объекты случайно не попали под footer. В принципе, visibility: hidden является лишним для этого div-a, это свойство я воткнул для собственного успокоения=)

Смотрим результат проделанной работы. Как мы видим, footer встал вниз страницы, как мы и ожидали.

Корректность вёрстки я проверял под Windows в Opera 9.64, Internet Explorer 6, Safari 4, Mozilla FireFox 3.0.7 и Chrome 2.0.

Бердалы Султанов

2 818

12.06.2010

Бердалы Султанов из интернета

Answer 5 · 2010-06-12 06:32:32

Голова на плечах...

Тёма Савченко

1 642

12.06.2010

Answer 6 · 2010-06-12 06:43:46

Руки!

ИХ

Игорь Хохлюк

120

12.06.2010