| Издательский дом ООО "Гейм Лэнд" | СПЕЦВЫПУСК ЖУРНАЛА ХАКЕР #73, ДЕКАБРЬ 2006 г. |
специи по вкусу
ВЯЧЕСЛАВ БАЕВ
Спецвыпуск: Хакер, номер #073, стр. 073-010-6
<li><a title="Link 4" href="#4">Link 4</a></li>
<li><a title="Link 5" href="#5">Link 5</a></li>
</ul>
</div>
CSS:
ЛИСТИНГ
#menu {
border: #3d261d 1px solid;
margin: 10px;
width: 200px;
}
#menu LI A {
height: 24px;
text-decoration: none;
voice-family: inherit;
}
#menu LI A:link {
padding-right: 0px;
display: block;
padding-left: 10px;
background: url(menu.gif);
padding-bottom: 0px;
color: #e4d6cd;
padding-top: 8px;
}
#menu LI A:visited {
padding-right: 0px;
display: block;
padding-left: 10px;
background: url(menu.gif);
padding-bottom: 0px;
color: #e4d6cd;
padding-top: 8px;
}
#menu LI A:hover {
padding-right: 0px;
padding-left: 10px;
background: url(menu.gif) 0px -32px;
padding-bottom: 0px;
color: #ffffff;
padding-top: 8px;
}
[задача.]
Сделать подвал страницы, всегда прижатый к низу экрана.
[решение.]
Вопрос о том, как сделать подвал внизу экрана/страницы, возникает достаточно часто. Казалось бы, что может быть проще:
HTML:
ЛИСТИНГ
<body>
<p>content</p>
<p id="footer">footer</p>
</body>
CSS:
ЛИСТИНГ
#footer {position: absolute; bottom: 0;}
Все счастливы. Правда, счастье длится лишь до тех пор, пока содержимое страницы не вызывает появления вертикальной полосы прокрутки, наползая на подвал (IE, Mozilla).
HTML:
ЛИСТИНГ
<body>
<div id="all">
C O N T E N T
<div id="empty"> </div>
<div id="footer">
F O O T E R
</div>
</div>
</body>
CSS:
ЛИСТИНГ
html, body {height: 100%; margin: 0; padding: 0;}
#all {position: relative; height: 100%;}
html>body #all {height: auto; min-height: 100%;}
#empty, #footer {height: _foo_;}
/* или
#footer {height: _foo_;}
#empty {height: _foo_ + _bar_;}
*/
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
Логика здесь такая. Внутри body со стопроцентной высотой и нулевыми отступами расположен блок #all с высотой 100% и более. Его позиция относительно body высчитывается в соответствии с нормальным расположением (position: relative;). #footer расположен внизу относительно высоты содержащего его блока #all. Так как #footer позиционирован абсолютно (изъят из нормального обтекания), то потребуется «пустой» блок (#empty), который будет служить «толкателем». Недостаток: предполагается, что значения высоты #footer и #empty известны.
Для случаев графического (px) подвала и/или при известном поведении текста (em) внутри него такое решение проблемы можно считать оптимальным. В тех случаях, когда невозможно заранее предсказать высоту подвала, в бой вступает javascript.
CSS:
ЛИСТИНГ
#empty {visibility: hidden;}
#footer, #empty {height: _foo_;}
/* предполагаемая максимальная высота
(disabled JavaScript) */
JavaScript:
ЛИСТИНГ
if (document.getElementById){
var empt = document.getElementById('empty');
var foot = document.getElementById('footer');
empt.style.height = foot.style.height = 'auto';
empt.innerHTML = foot.innerHTML;
}
[задача.]
По дизайн-макету заголовок у нас текстовый, но должен иметь тень. Необходимо реализовать этот «каприз» дизайнера.