Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > как сделать футтер


Автор: dima_mak 16.5.2008, 18:39
Неделю ущу как сделать слои прижатый к низу страницы, вне зависимости от количества содержимого.
Нашел пару вариантов, но почему-то не один у меня не работает.
вот последний:
Код

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<title>RoAdTrIp.Co.Il</title>

<style type="text/css">
IMG {
 border: 0px; /* Убираем границу */
}
td.search {
 padding: 0px 10px;
 }
#container {
 width: 100%;
 min-width: 1000px;
 _width: expression(document.body.clientWidth > 1000 ? "100%" : "1000px")
}
#shapka {
 position: relative;
 float:right;
 left:0px;
 top: 0px;
 width: 100%;
 _width: expression(document.body.clientWidth > 1000 ? "100%" : "1000px")
 min-width: 1000px;
 background: url('img/fon_shapka.gif');
 background-repeat: repeat;
 height: 304px;
 padding: 0px;
 margin: 0px;
}
#menu {
 position: absolute;
 left: 270px;
 top: 253px;
 height: 35px;
 width: 450px;
 background-color: #FFFFFF;
 padding: 10px;
 margin: 0px;
}
#menu_item{
 font-size: 12px;
 text-decoration: underline;
 color: black;
 }
#now{
 font-size: 12px;
 text-decoration: none;
 color: #868383;
 }
#forum {
 position: relative;
 float: right;
 right: 0px;
 top: -30px;
 height: 90px;
 width: 105px;
 padding: 0px;
 margin: 0px;
}
#vhod {
 position: absolute;
 left: 0px;
 top: 290px;
 height: 189px;
 width: 289px;
 background: url('img/fon_vhod.jpg');
 background-repeat: no-repeat;
 padding: 20px;
}
#log_pass{
 font-size: 12px;
 font-weight: bold;
}
#news {
 position: absolute;
 left: 0px;
 top: <?php
if($link=="reg")
 print "500";
else
 print "545";?>px;
 float: bottom;
 height: 308px;
 width: 302px;
 background: url('img/fon_news.gif');
 background-repeat: no-repeat;
 padding: 20px;
}
#news_text {
 color: black;
 text-decoration: none;
}
#main {
 position: absolute;
 left: 350px;
 top: 320px;
/* z-index: 2;  */
}

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
#content {
  position: relative;
  min-height: 100%;
}
* html #content {
  height: 100%;
}
#footer {
  position: relative;
  margin-top: -2.5em;
  height: 2.5em;
}
</style>

</head>
<body>

<div id="content">
<div id="container">
<div id="shapka">
<img src="img/shapka.jpg" style="padding:0px;margin:0px">
</div>
<div id="forum">
<a href="phpBB/index.php" target='_blank'>
<img src="img/forum.gif" style="padding:0px;margin:0px"></a>
</div>
</div>
<div id="menu">
блок меню которое налегает на шапку.
</div>
<div id="vhod">
логин
</div>
<div id="news">
Новости
<div id="main">
Содержимое
</div></div>
<div id="footer">
sdfsdfsdfsddsffsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
</div>
</body>
</html>

Что не так?

Автор: POLTER 16.5.2008, 19:43
Ну что-то типа такого:
Код

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<title>RoAdTrIp.Co.Il</title>

<style type="text/css">
IMG {
 border: 0px; /* Убираем границу */
}
td.search {
 padding: 0px 10px;
 }
#container {
 width: 100%;
 min-width: 1000px;
 _width: expression(document.body.clientWidth > 1000 ? "100%" : "1000px")
}
#shapka {
 position: relative;
 float:right;
 left:0px;
 top: 0px;
 width: 100%;
 _width: expression(document.body.clientWidth > 1000 ? "100%" : "1000px")
 min-width: 1000px;
 background: url('img/fon_shapka.gif');
 background-repeat: repeat;
 height: 304px;
 padding: 0px;
 margin: 0px;
}
#menu {
 position: absolute;
 left: 270px;
 top: 253px;
 height: 35px;
 width: 450px;
 background-color: #FFFFFF;
 padding: 10px;
 margin: 0px;
}
#menu_item{
 font-size: 12px;
 text-decoration: underline;
 color: black;
 }
#now{
 font-size: 12px;
 text-decoration: none;
 color: #868383;
 }
#forum {
 position: relative;
 float: right;
 right: 0px;
 top: -30px;
 height: 90px;
 width: 105px;
 padding: 0px;
 margin: 0px;
}
#vhod {
 position: absolute;
 left: 0px;
 top: 290px;
 height: 189px;
 width: 289px;
 background: url('img/fon_vhod.jpg');
 background-repeat: no-repeat;
 padding: 20px;
}
#log_pass{
 font-size: 12px;
 font-weight: bold;
}
#news {
 position: absolute;
 left: 0px;
 top: <?php
if($link=="reg")
 print "500";
else
 print "545";?>px;
 float: bottom;
 height: 308px;
 width: 302px;
 background: url('img/fon_news.gif');
 background-repeat: no-repeat;
 padding: 20px;
}
#news_text {
 color: black;
 text-decoration: none;
}
#main {
 position: absolute;
 left: 350px;
 top: 320px;
/* z-index: 2;  */
}

html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

body {
   position: relative;
   min-height: 100%;
   margin: 0 auto;
   width: 1000px;
}

#content {
  position: relative;
  min-height: 100%;
}
* html #content {
  height: 100%;
}
#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
}
</style>

</head>
<body>
<div id="container">
<div id="shapka">
<img src="img/shapka.jpg" style="padding:0px;margin:0px">
</div>
<div id="forum">
<a href="phpBB/index.php" target='_blank'>
<img src="img/forum.gif" style="padding:0px;margin:0px"></a>
</div>
</div>
<div id="menu">
блок меню которое налегает на шапку.
</div>
<div id="vhod">
логин
</div>
<div id="news">
Новости
<div id="main">
Содержимое
</div>
</div>
<div id="footer">
sdfsdfsdfsddsffsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf
</div>
</body>
</html>

Автор: dima_mak 16.5.2008, 20:08
как я понял ты изменил только конец CSS, попробовал, тот же эффект - футтер находится внизу видимой странице, а не всей.

Автор: Uratsakidogi 18.5.2008, 18:29
Делал http://temp.uratsakidogi.msk.ru/mixas/ для соседней темы, там тоже футер прижат к низу. :-)

Автор: NDenis 19.5.2008, 11:23
Я делаю вот http://kuzma.xost.ru/100/. Без всякого position:absolute;.

Автор: SelenIT 20.5.2008, 10:46
Поддерживаю NDenisа. Отрицательный margin-bottom - действительно оптимальный вариант для известной высоты футера.

Автор: NDenis 20.5.2008, 16:48
SelenIT, как правило, размер футера известен. Не известно высота контентной части.
Если размер контентной части известен, тогда самое оптимальное это как раз position:absolute;

Автор: SelenIT 21.5.2008, 13:10
Цитата(NDenis @  20.5.2008,  16:48 Найти цитируемый пост)
тогда самое оптимальное это как раз position:absolute;

Не думаю. По крайней мере, пока жив IE6, в котором bottom:0 бессовестно глючит (временами отходит на пиксель, а то и пару, от границы).

Автор: dima_mak 22.5.2008, 18:50
попробывал как NDenis сказал:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<link REL="SHORTCUT ICON" HREF="favicon.ico" TYPE="image/x-icon">
<title>пвапва</title>
<style type="text/css">
#container {
 width: 100%;
 min-width: 1000px;
 _width: expression(document.body.clientWidth > 1000 ? "100%" : "1000px")
}
#shapka {
 position: relative;
 float:right;
 left:0px;
 top: 0px;
 width: 100%;
 _width: expression(document.body.clientWidth > 1000 ? "100%" : "1000px")
 min-width: 1000px;
 background: url('img/fon_shapka.gif');
 background-repeat: repeat;
 height: 304px;
 padding: 0px;
 margin: 0px;
}
#menu {
 position: absolute;
 left: 270px;
 top: 253px;
 height: 35px;
 width: 470px;
text-align: right; background-color: #FFFFFF;
 padding: 7px;
 margin: 0px;
}
#menu_item{
 font-size: 12px;
 text-decoration: underline;
 color: black;
 }
#now{
 font-size: 12px;
 text-decoration: none;
 color: #868383;
 }
#forum {
 position: relative;
 float: right;
 right: 0px;
 top: -30px;
 height: 90px;
 width: 105px;
 padding: 0px;
 margin: 0px;
}
#vhod {
 position: absolute;
 left: 0px;
 top: 290px;
 height: 189px;
 width: 289px;
 background: url('img/fon_vhod.jpg');
 background-repeat: no-repeat;
 padding: 20px;
}
#log_pass{
 font-size: 12px;
 font-weight: bold;
}
#news {
 position: absolute;
 left: 0px;
 top: 500px;
 float: bottom;
 height: 308px;
 width: 302px;
 background: url('img/fon_news.gif');
 background-repeat: no-repeat;
 padding: 20px;
}
#news_text {
 color: black;
 text-decoration: none;
}
#main {
 position: absolute;
 left: 350px;
  top: 320px;
}

* {
 margin:0; padding:0;
 }
html, body {
 height:100%;
 }
body {
 height:100%;
 }
#content {
 height:100%;
 margin-bottom:-5em;
 min-height:100%;
 min-width:1000px; width: expression( (document.documentElement.clientWidth || document.body.clientWidth) < 1000 ? '1000px' : '100%');
 }

html>body #content {height:auto;}
#clear {
 clear:both;
 height:5em;
 }
#footer {
 width:100%;
 }


/* ןמהגאכ */
#footer {
 background:#bcb;
 height:5em;
 }
</style>

</head>
<body>

<div id="content">
<bdo dir='rtl'>
<div id="shapka">
<img src="img/shapka_rus.jpg" style="padding:0px;margin:0px">
</div>
<div id="forum">
<a href="phpBB/index.php" target='_blank'>
<img src="img/forum_heb.gif" style="padding:0px;margin:0px"></a>
</div>
<div id="menu">
gjhdfgjhfgh
</div>
<div id="vhod">
login
</div>
<div id="news">
news

</div>

<div id="main" dir='rtl'>

sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>
sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>

sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>
sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>
sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>
</div>
</div>
<div id="footer">
sdfgsdfgdfgdfgsdfgsdfgdfgdfgsdfgsdfgdfgdfgsdfgsdfgdfgdfgsdfgsdfgdfgdfgsdfgsdfgdfgdfgsdfgsdfgdfgdfg
</div>
</body>
</html>

эффект тот же - прилипает к низу видимой части
попробовал, как Uratsakidogi сказал:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link REL="SHORTCUT ICON" HREF="favicon.ico" TYPE="image/x-icon">
<title>капр</title>
<style type="text/css">
#container {
 width: 100%;
 min-width: 1000px;
 _width: expression(document.body.clientWidth > 1000 ? "100%" : "1000px")
}
#shapka {
 position: relative;
 float:right;
 left:0px;
 top: 0px;
 width: 100%;
 _width: expression(document.body.clientWidth > 1000 ? "100%" : "1000px")
 min-width: 1000px;
 background: url('img/fon_shapka.gif');
 background-repeat: repeat;
 height: 304px;
 padding: 0px;
 margin: 0px;
}
#menu {
 position: absolute;
 left: 270px;
 top: 253px;
 height: 35px;
 width: 470px;
text-align: right; background-color: #FFFFFF;
 padding: 7px;
 margin: 0px;
}
#menu_item{
 font-size: 12px;
 text-decoration: underline;
 color: black;
 }
#now{
 font-size: 12px;
 text-decoration: none;
 color: #868383;
 }
#forum {
 position: relative;
 float: right;
 right: 0px;
 top: -30px;
 height: 90px;
 width: 105px;
 padding: 0px;
 margin: 0px;
}
#vhod {
 position: absolute;
 left: 0px;
 top: 290px;
 height: 189px;
 width: 289px;
 background: url('img/fon_vhod.jpg');
 background-repeat: no-repeat;
 padding: 20px;
}
#log_pass{
 font-size: 12px;
 font-weight: bold;
}
#news {
 position: absolute;
 left: 0px;
 top: 500px;
 float: bottom;
 height: 308px;
 width: 302px;
 background: url('img/fon_news.gif');
 background-repeat: no-repeat;
 padding: 20px;
}
#news_text {
 color: black;
 text-decoration: none;
}
#main {
 position: absolute;
 left: 350px;
  top: 320px;
}

* {
    padding: 0;
    margin: 0;
    border: none;
}
html {
    height:100%;
}
body {
    min-height: 100%; height: auto !important; height: 100%;
}
#content {
    margin: 0 11px; padding-bottom: 30px;
}

#footer {
    background: #0028AF; height: 30px; width: 100%; position: absolute; bottom: 0;
}
</style>

</head>

<body>
<div id="content">
<bdo dir='rtl'>
<div id="shapka">
<img src="img/shapka_rus.jpg" style="padding:0px;margin:0px">
</div>
<div id="forum">
<a href="phpBB/index.php" target='_blank'>
<img src="img/forum_heb.gif" style="padding:0px;margin:0px"></a>
</div>
<div id="menu">
gjhdfgjhfgh
</div>
<div id="vhod">
login
</div>
<div id="news">

news
</div>

<div id="main" dir='rtl'>

sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>
sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>
sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>
sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>sdgdfgdfg<br>
</div>
<div id="clear">
</div></div>
<div id="footer">
sdfgsdfgdfgdfgsdfgsdfgdfgdfgsdfgsdfgdfgdfgsdfgsdfgdfgdfgsdfgsdfgdfgdfgsdfgsdfgdfgdfgsdfgsdfgdfgdfg
</div>
</body>
</html>

тоже самое.

Люди помогите..... Что делать?

Автор: NDenis 23.5.2008, 09:14
dima_mak, я так сказал?
Моя идея заключалась в следующем. Контейнер для шапки и контентной части растягивается на 100% от тела документа (html, body {height:100%;}) за исключением поля снизу для подвала (#main {margin-bottom:100px; /*поставьте свое значение */}, равное высоте подвала. Див с "клирингом" можно убрать и правило clear:both; добавить в подвал.

Кажется я в своем примере не использую абсолютное позиционирование.

Автор: dima_mak 23.5.2008, 11:25
NDenis, ты не мог бы пожалуйста исправить тот код, что я дал, а то я не особо понимаю, что не так? нельзя использовать абсолютное позиционирование для других слоев, которые внутри главного слоя?

З.Ы
заметь, что мой слой main это вложенный слой, а общий слой это content.

Автор: dima_mak 23.5.2008, 13:48
всё спасибо!
разобрался - нельзя было делать position:absolute - переделал всё на position:relative и всё заработало.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)