Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Резиновый футер на сайте

Исходник

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

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

Резиновый футер

Теперь приведу код всего подвала, а затем будем разбирать, поэтапно, что к чему:

<html>
<body style="margin:0px; padding:0px;">
<div style="width: 100%; height: 195px; background: url(bg.png); color: #fff;">
   <div style="float: left; width: 33%; height: 100%; margin-top: 40px; border-right: 1px solid #fff; text-align: center;">
   <h3>Популярные сатьи:</h3>
   <ul style="text-align: left;">
<li>Как сделать шапку сайта</li>
<li>Как не сделать шапку сайта</li>
<li>Как переделать шапку сайта</li>
<li>Как уделать шапку сайта</li>
</ul>
</div>
<div style="float: left; width: 33%; height: 100%; margin-top: 40px; text-align: center;">
   <p>Copyright © 2012 by Алексей Мезенцев. Все права защищены.<br />
Разрешается републикация материалов сайта с обязательным указанием ссылки cледующего содержания:<br />
http://www.for-net.ru/ - Всё о том как сделать сайт самому</p> </div>
   <div style="float: left; width: 33%; height: 100%; margin-top: 40px; border-left: 1px solid #fff; text-align: center;">
    <br />
<img src="top.png" /><br />
<br />
<img src="top1.png" />
   </div>
 </div>
</body>
</html>

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

<div style="width: 100%; height: 195px; background: url(bg.png); color: #fff;">

Здесь мы задаем ширину в процентах width: 100%; чтобы у нас и получился эффект резинового подвала, далее фиксированная высота height: 195px; равная высоте фонового рисунка, подгружаем сам фоновый рисунок background: url(bg.png); и так как футер у нас черного цвета мы задаем цвет шрифта белый color: #fff;

Затем делаем первый информационный бокс:

   <div style="float: left; width: 33%; height: 100%; margin-top: 40px; border-right: 1px solid #fff; text-align: center;">
   <h3>Популярные сатьи:</h3>
   <ul style="text-align: left;">
    <li>Как сделать шапку сайта</li>
<li>Как не сделать шапку сайта</li>
<li>Как переделать шапку сайта</li>
<li>Как уделать шапку сайта</li>
;</ul>
</div>

Итак, здесь я в первую очередь задал выравнивание бокса по левому краю float: left; затем задал ширину так же в процентах width: 33%; и так же высоту height: 100%;, после этого задал отступ от верхнего края бокса в 40 пикселей margin-top: 40px; как я думаю вы уже догадались чтобы текст у наc не попал в верхушку этого забора. Далее я создал белую черту по правому краю border-right: 1px solid #fff; шириной 1 пиксель и белым цветом, для визуального разделения блоков и последнее, сделал выравнивание текста в боксе по центру text-align: center;. Ну и поместил туда обычный список с популярными статьями, но как вы понимаете это все для примера вы можете поместить туда что угодно…

Теперь создаем второй информационный бокс:

<div style="float: left; width: 33%; height: 100%; margin-top: 40px; text-align: center;">
<p>Copyright © 2012 by Алексей Мезенцев. Все права защищены.<br />
Разрешается републикация материалов сайта с обязательным указанием ссылки следующего содержания: <br />
http://www.for-net.ru/ - Всё о том как сделать сайт самому</p> </div>

Здесь все так же как и в первом боксе за исключением того, что мы здесь мы ни какую сторону не обводим, а так все по тому же принципу, вы так же в этот блок помещаете все что вам нужно.

Далее третий бокс в него я поместил изображения счетчиков:

   <div style="float: left; width: 33%; height: 100%; margin-top: 40px; border-left: 1px solid #fff; text-align: center;">
    <br />
<img src="top.png" /><br />
<br />
<img src="top1.png" />
   </div>

Здесь как вы видите я поместил два изображения счетчиков посещений вы естественно можете вставить туда Java скрипт реального счетчика, принцип формирования здесь как и в первом боксе единственное, что в этом боксе обводка будет левой стороны border-left: 1px solid #fff;

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

Дата публикации:2012-07-05


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget