Баян, но сколько часов потеряно было раньше. И ведь до сих пор у меня не было под рукой кода, который можно было бы вставить копи-пастом и забыть перед версткой. И тут мне скинули в скайп текст очень интересного скрипта. И ведь работает!
[spoiler]
Текст не мой, мое в конце самом.
>==================================
Давно хотел это сделать (прибить «подвал» к полу) — как ни крути, а «Copyright 2008» по среди экрана выглядит не козырно. Есть статьи по этому поводу, но ни одного дельного совета я так и не нашел.
Даже парни из LayOut Gala не утруждают себя этим вопросом, хотя занимаются полнейшей мистикой с отрицательными полями, получая при этом «резину» любого вида.Именно они натолкнули меня на мысль использовать отрицательное верхнее поле (margin-top) футера — за это им отдельное спасибо.
Перейдем к делу. Тем, кто написал в этой жизни хотя бы пару css кодов самостоятельно советую пропустить нижеследующие разъяснения и посмотреть сам код в конце страницы.
Кому лень разбираться самому попробую обьяснить на пальцах в чем тут дело:
В тэг body помещаем box (он же div, он же блок) с минимальной высотой 100%:
Для ie6 пишем волшебное заклинание:
Сразу под «контейнер» запихиваем «подвал» с необходимой нам высотой в пикселах и назначаем ему margin-top, равный высоте подвала, взятой с отрицательным знаком (допустим высота нашего «подвала» 50px):
Если контента( текста, фоткок и всего такого) больше, чем на один экран, то он залазит на футер, поэтому в «контейнер» кладем див (я назвал его антифутер) с высотой, равной высоте футера:
Вот собственно и все.
Что хочу добавить:
— не забываем про DOCTYPE:
— в начале css необходимо написать следующее: body, html { margin: 0; padding: 0; width: 100%; height: 100%; } (без этого в некотрых браузерах height:100% не работает).
Готовый код:
Opera… .+
FireFox ....+
Safari.......+
IE… .+
NN ...........+
Спасибо dmmd за помощь в создании кода.
>==================================
Теперь от меня комментарии. Это действительно магические строки. Если поменять порядок следования в секции style, то в каком-то браузере отвалится. Но это еще не все. То же самое надо поместить и в внешний CSS-файл. Опере почему-то это надо оказалось...
Вот такие пироги. Закинул на сайт кому лень тестить:
[spoiler]
Текст не мой, мое в конце самом.
>==================================
Давно хотел это сделать (прибить «подвал» к полу) — как ни крути, а «Copyright 2008» по среди экрана выглядит не козырно. Есть статьи по этому поводу, но ни одного дельного совета я так и не нашел.
Даже парни из LayOut Gala не утруждают себя этим вопросом, хотя занимаются полнейшей мистикой с отрицательными полями, получая при этом «резину» любого вида.Именно они натолкнули меня на мысль использовать отрицательное верхнее поле (margin-top) футера — за это им отдельное спасибо.
Перейдем к делу. Тем, кто написал в этой жизни хотя бы пару css кодов самостоятельно советую пропустить нижеследующие разъяснения и посмотреть сам код в конце страницы.
Кому лень разбираться самому попробую обьяснить на пальцах в чем тут дело:
В тэг body помещаем box (он же div, он же блок) с минимальной высотой 100%:
#container { min-height: 100% } |
Для ie6 пишем волшебное заклинание:
*html #container { height: ex * pression(document.body.clientHeight > 50? "100%" :"50px"); } |
Сразу под «контейнер» запихиваем «подвал» с необходимой нам высотой в пикселах и назначаем ему margin-top, равный высоте подвала, взятой с отрицательным знаком (допустим высота нашего «подвала» 50px):
#footer { height: 50px; margin-top: -50px; background: #cccccc; } |
Если контента( текста, фоткок и всего такого) больше, чем на один экран, то он залазит на футер, поэтому в «контейнер» кладем див (я назвал его антифутер) с высотой, равной высоте футера:
#antifooter { height: 50px; } |
Вот собственно и все.
Что хочу добавить:
— не забываем про DOCTYPE:
— в начале css необходимо написать следующее: body, html { margin: 0; padding: 0; width: 100%; height: 100%; } (без этого в некотрых браузерах height:100% не работает).
Готовый код:
<!do ctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<ht ml>
<head>
<title>1</title>
<met a http-equiv="content-type" content="text/html;charset=windows-1251">
<li nk rel="stylesheet" type="text/css" href="style.css" />
<st yle type="text/css">
#container { min-height: 100% }
*html #container { height: ex * pression(document.body.clientHeight > 50? "100%" :"50px"); }
#footer { height: 50px; margin-top: -50px; background: #cccccc; }
#antifooter { height: 50px; }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="container"> Content <div id="antifooter"> </div> </div>
<div id="footer"> Text to this section</div>
</body>
</html> |
Opera… .+
FireFox ....+
Safari.......+
IE… .+
NN ...........+
Спасибо dmmd за помощь в создании кода.
>==================================
Теперь от меня комментарии. Это действительно магические строки. Если поменять порядок следования в секции style, то в каком-то браузере отвалится. Но это еще не все. То же самое надо поместить и в внешний CSS-файл. Опере почему-то это надо оказалось...
Вот такие пироги. Закинул на сайт кому лень тестить:
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
