Подвал, он же “футер” — это весьма важная часть сайта, хотя и мало кто туда добирается, особенно при очень длинных страницах. Там обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация. Очень часто можно наблюдать такую картину: верхнее гризонтальное меню под “шапкой” практически без изменений дублируется в левой колонке. Выглядит это, по меньшей мере, бестолково. Уж лучше продублировать основные разделы сайта в подвале. Пользы будет несомненно больше.

Футер не должен доминировать над шапкой, но и не должен теряться, делая страницу неуравновешенной. Мы сделаем его немного контрастным по цвету, но небольшой высоты.

Запишем в коде страницы сразу после этого места:

.................
...намечаются до самого утра. При наличии на небе луны — будет весело.
</ul>
</div>
<div class="clearfloat"></div>

Следующий код:

<div id="footer">
<p>Главная | <a href="#">О нас</a> | <a href="#">О летучести</a> | <a href="#">О везучести</a> | <a href="#">Свинки-герои</a> | <a href="#">Подружиццо</a></p>
<p>© PIG.RU, 2007 | All right reserved. | <a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a> | e-mail: <a href="mailto: Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. "> Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. </a></p>
</div>

Здесь у нас слово Главная не является ссылкой (об этом мы уже говорили), а следом идут обычные ссылки на другие разделы сайта. Всего в футере два абзаца. В первом ссылки на разделы, а во втором как раз и есть всякие копирайты, ссылка на “мыло” и ещё две интересные ссылочки. Вот они уже как раз для форсу бандитского! Это ссылки на валидаторы — конторы, которые проверяют вашу страницу на соответствие стандартам. Ссылки устроены так, что нажимая на них, вы сразу даёте команду этим самым валидаторам проверить ваши странички (которые уже лежат в сети конечно же). И тут же получаете ответ. Сие придаёт вашим страничкам солидность и всеопщее наше верстальское одобрение.

Вот практически и вся страница. Проверьте только чтобы в конце кода у вас было два /div подряд. Вот так:

..........
href="mailto: Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. "> Данный адрес e-mail защищен от спам-ботов, Вам необходимо включить Javascript для его просмотра. </a></p>
</div>
</div>
</body>
</html>

Второй /div — это закрытие области контейнера.

Теперь допишем в листе стилей оставшийся код:

#footer {
background : #665;
color : #fff;
font-size : 70%;
padding : 5px;
clear : both;
}

#footer a {
color : #ff0;
}

#footer a:hover {
color : #f00;
}

#footer p {
padding : 2px;
text-align : center;
}

.clearfloat {
clear : both;
}

Здесь мы задали фон серо-зелёного цвета, цвет текста — белый. А вот нижняя строчка в первом правиле (clear : both;) означает, что с обоих сторон подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера.

Ссылки у нас здесь ярко-жёлтые, а в активном состоянии — красные. Для текста мы выбрали размер мельче всех на странице — 70%. Как я и сказал, футер — важная часть, но не на столько, чтобы бросаться в глаза.

Выравнивание для текста мы задали по центру.

Самое последнее правило как раз служит для блока очистки, заданного атрибутом clearfloat, о котором мы говорили, верстая блок новостей.

Сохраняемся, смотрим. Всё вроде бы хорошо, но как-то неуютно (особенно на белом фоне экрана). Добавим-ка мы всей странице тонкую светло-серую рамку! Откроем лист стилей, найдем вот это место:

#container {
width : 760px;
margin : 0 auto;
}

И добавим следующую строчку:

border : 1px solid #999;

Должно получиться следующее:

#container {
width : 760px;
margin : 0 auto;
border : 1px solid #999;
}

Вот, собственно, и всё! Результат можно посмотреть здесь: Рэзультат.
Реальный сайт о парасенгах можно посмотреть здесь — Pigfly.ru. От первоначального макета мало что осталось. Ну, главное идея, а править сайт можно бесконечно. Хотя идея тоже изменилась, и теперь Летающие Парасенги — это сайт О Счастье, Удаче и Богатстве и даже чуточку о Дзэн.

Кстати, в следующем уроке я расскажу как сделать такое симпатичное меню, как сейчас на Парасенгах.

Напоминаю, что наша верстка является “плавающей“. Грубо говоря — элементы на странице располагаются как бы в потоке, занимая свободные места. Поэтому мы и ограничили часть пространства контейнером как коробкой, в которую уложили поочередно все элементы. Кроме плавающей, конечно же, есть и жесткая привязка элементов к странице. В самом общем случае для этого каждому элементу строго задается местоположение, например — расстоянием в пикселах от верхней и левой стороны экрана. Но это уже совсем другая история.

Автор: Игорь Квентор

По материалам сайта: http://www.websovet.com/