IT Blog

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

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

Все очень просто… итак… приступим.

Созадем главный блок (class=”main”) и внутрь его помещаем еще два блока с контентом (class=”content”) и футером (class=”footer”).

<div class=”main”>
<div class=”content”></div>
<div class=”footer”></div>
</div>

Теперь рассмотрим CSS

html, body {
margin:0; /*убираем отступы у документа, внешние…*/
padding:0; /*…и внутренние*/
height:100%; /*устанавливаем документу высоту в 100%*/
}

.main {
width:100%; /*устанавливаем ширину главного блока…*/
min-height:100%; /*…и минимальную высоту (для Opera и FireFox)*/
position:relative; /*позиционируем блок относительно*/
}

.content {
padding: 0 0 85px 0; /*устанавливаем отступ снизу для контента, чтобы блоки при заполнении не наезжали друг на друга*/
}

.footer {
position:absolute; /*позиционируем блок абсолютно…*/
bottom:0; /*…снизу*/
width: 100%; /*устанавливаем ширину футера*/
height:85px; /*устанавливаем высоту футера*/
}

Вот и все … Ага… чуть не забыл… хак для родного IE…
Внутри тега head прописываем строчку
<!–[if lt IE 7]><style media=”screen” type=”text/css”>.main {height:100%;}</style><![endif]–>

Теперь точно все.

Originally posted 2010-02-01 15:15:45. Republished by Vancouver Web Design

Закрукругление углов используя только CSS

Закругление углов?
Нет ничего проще.

1. Скачиваем htc файл сдесь.
2. Загружаем его в папку images.
3. В css файле создаем класс

.curved { 

-moz-border-radius:10px; / Firefox /
-webkit-border-radius:10px; / Safari and chrome /
-khtml-border-radius:10px; / Linux browsers /
border-radius:10px; / CSS3 /
behavior:url(images/border-radius.htc);

}

4. Присваиваем html элементам класс .curved, чтобы сделать углы у них закругленными.

Замечания

1. Путь к .htc файлу должен быть относительно документа не css файла
2. Хак не работает с элементами формы.
3. Дополнительный материал для самообразования:

IE8 is not very nice – pay attention here!

I learned something while doing this. IE8.0.6 and IE8.0.76 handle this differently. First, the element with this property on it should be positioned to relative. If you have text on top of it, then that will have to be wrapped in something and also positioned relative. Example:

<div><p>This is the text that goes on top of the rounded corners div</p></div>

If you did this:

<div>This is the text that goes on top of the rounded corners div</div>

Then IE8.0.76 doesn’t play nice. IE8.06 however will work fine. I have NO idea why, but that is how it is.

Originally posted 2011-04-09 08:08:57. Republished by Vancouver Web Design