Отправляет email-рассылки с помощью сервиса Sendsay

ЯcReated"s blog интересное о seo, html, css, joomla

Подписаться Бесплатная новостная рассылка Подписчиков 5 RSS
←   Июль 2010   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
23.07.2010
01:11:37
17:54:38
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://rcreated.com/blog
Открыта: 17-04-2010

Автор
tallib

Статистика

5 подписчиков
0 за неделю
←   Все выпуски   →

ЯcReated"s blog интересное о seo, html, css, joomla Прижать футер к низу


Хочешь знать что происходит на блоге подпишись на RSS.
Также буду благодарен за ретвит или следуй за мной в твитер

Прижать футер к низу

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

1. Выносим блок с футером за блок с контентом.

<html>
<head></head>
<body>
<div id="content">
<div id="header"></div>
<div id="leftblock"></div>
<div id="rightblock"></div>
</div>
<div id="footer"></div>
</body>
</html>

2. Добавляем 2 дополнительных блока перед закрывающим тегом блока контента:

<div class="clear"></div> избавляемся от глюков
<div class="empty"></div> место под футер

Получается такая картина:

<html>
<head></head>
<body>
<div id="content">
<div id="header"></div>
<div id="leftblock"></div>
<div id="rightblock"></div>
<div class="clear"></div>
<div class="empty"></div>
</div>
<div id="footer"></div>
</body>
</html>

В основном файле, на этом все. Теперь открываем css файл и дописываем:

html, body {
width: 100%;
height: 100%;
}

* html #container {
height: 100%;
}
#content {
position: relative;
width: 1280px;
margin: 0 auto;
min-height: 100%;
}

.clearfloat {
clear: both;
}

.empty {
height: 50px; ширина подвала
}
#footer {
position: relative;
width: 1280px;
height: 50px;
margin: -50px auto 0;
}

Вот и все. Аплодисменты, овации и крики “Ура, заработало!!!”. Всем спасибо за внимание. Благодарности оставляем в комментариях.

Вебмастер, если ты имеешь блог и хочешь сделать обмен ссылками, тогда классный блог http://n-wp.ru для тебя пригодится.

not SEO blog

Человек подпишись на новости,а:

Здесь можно оставить свои комментарии. Выпуск опубликован при помощи плагина subscribe.ru and blogspot.com cross poster
В избранное