Как прижать footer-image ( верстка <DIV> XHTML/CSS ) ? [Версия для КПК]

Показать полную графическую версию : Как прижать footer-image ( верстка <DIV> XHTML/CSS ) ?

stalingrad432006

04-11-2008, 00:17

В поисковиках поискал ответ, но толкового не нашел ( видимо, сказывается низкий уровень знаний :)).

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Ля-Ля-Ля</title>
<style type="text/css">
..........................
</style>
</head>
..........................
<body>

Может быть кто-нибудь сможет доступно обяснить, как же все-таки можно сделать так, что бы изображение всегда находилось у нижней границы браузера? Спасибо :).

Artem-Samsung

04-11-2008, 00:37

http://designformasters.info/posts/holy-grail/
Вот, пожалуйста. Будет полезно почитать

stalingrad432006

04-11-2008, 02:03

Artem-Samsung,
хорошая статья, но в этой "Чаше Грааля" футер не прижат.

Artem-Samsung

04-11-2008, 11:35

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<Head>
<Title>Test</Title>
<Style>
html, body {
height:100%; margin:0;
}

html>body {
min-height:100%;
height:auto;
}

body {
position:relative;
}

#footer {
position:absolute;
bottom:0; width:100%;
}

#main {
padding-bottom:50px;
}

#header,
#footer {
color:white; background:green;
height:50px;
}
</Style>
<Body>
<div id="header">Header</div>
<div id="main">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="footer">Footer</div>

dmitryst

04-11-2008, 14:36

Artem-Samsung, нехорошо, что футер будет наезжать на основной контент... Если прокрутки нет, то все нормально

Artem-Samsung

04-11-2008, 16:11

Artem-Samsung, нехорошо, что футер будет наезжать на основной контент... Если прокрутки нет, то все нормально »
А что не так?
#main {
padding-bottom:50px;
}

не срабатывает?

stalingrad432006

04-11-2008, 16:57

Благдарю откликнувшихся. Сегодня ночью нашел на одном из сайтов ( ссылку указать не могу, т.к. уже не помню, какой именно сайт был ) :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Ля-Ля-Ля</title>
<style type="text/css">
* {margin: 0px; padding: 0px;} html {height: 100%;} body {background: url('fon_index.gif'); min-height: 100%; position: relative;}
* html body {height: 100%;}
#header {background: width: 100%; height: 100px;}
#content {width: 100%; padding-bottom: 80px; overflow: hidden;}
#news {width: 200px; float: left;}
* html #news {margin-right: -3px;}
#present {width: 200px; float: right;}
* html #present {margin-left: -3px;}
#main {margin: 0px 200px;}
* html #main {height: 1%; margin: 0px 197px;}
#footer {background: width: 100%; height: 560px; position: absolute; bottom: 0px;}
* html #footer {bottom: -1px;}
</style>
</head>
<body>
<div id="header">
</div>
</div>
<div id="content">
<div id="news">
</div>
<div id="present">
</div>
<div id="main">
</div>
</div>
<div id="footer">
</div>
</html>

В принципе, пока работает как мне нужно ( в страницу пока не вкладывал контент ). Посмотрите, пожалуйста, правильно ли написан код? Спасибо.