Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> как сделать футтер 
V
    Опции темы
dima_mak
Дата 16.5.2008, 18:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Программист любитель
*


Профиль
Группа: Участник
Сообщений: 154
Регистрация: 25.5.2004

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

<!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>

Что не так?
PM MAIL   Вверх
POLTER
Дата 16.5.2008, 19:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 123
Регистрация: 25.8.2006
Где: Ростов-на-Дону

Репутация: нет
Всего: 2
Ну что-то типа такого:
Код

<!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>

--------------------
Существует 10 типов людей: те, которые понимают твоичный код и те, которые его не понимают.
PM MAIL ICQ   Вверх
dima_mak
Дата 16.5.2008, 20:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Программист любитель
*


Профиль
Группа: Участник
Сообщений: 154
Регистрация: 25.5.2004

Репутация: нет
Всего: нет
как я понял ты изменил только конец CSS, попробовал, тот же эффект - футтер находится внизу видимой странице, а не всей.
PM MAIL   Вверх
Uratsakidogi
Дата 18.5.2008, 18:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 118
Регистрация: 17.10.2006

Репутация: 11
Всего: 11
Делал пример для соседней темы, там тоже футер прижат к низу. :-)

Это сообщение отредактировал(а) Uratsakidogi - 18.5.2008, 18:29
--------------------
ЖЖ | ВерстаюНЕПОЗВОЛЯЙТЕ ЯЩЕРИКАМ, ОТРИЦАТЕЛЬНЫМ ИНОПЛАНЕТЯНИНАМ ОВЛАДЕВАТЬ ВАС, НЕ СТАНОВИТЕСЬ ИХ МАРИОНЕТКАМИ!
PM MAIL WWW ICQ Skype   Вверх
NDenis
Дата 19.5.2008, 11:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8
Я делаю вот так. Без всякого position:absolute;.
PM MAIL   Вверх
SelenIT
Дата 20.5.2008, 10:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401
Поддерживаю NDenisа. Отрицательный margin-bottom - действительно оптимальный вариант для известной высоты футера.


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
NDenis
Дата 20.5.2008, 16:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8
SelenIT, как правило, размер футера известен. Не известно высота контентной части.
Если размер контентной части известен, тогда самое оптимальное это как раз position:absolute;

Это сообщение отредактировал(а) NDenis - 20.5.2008, 16:49
PM MAIL   Вверх
SelenIT
Дата 21.5.2008, 13:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401
Цитата(NDenis @  20.5.2008,  16:48 Найти цитируемый пост)
тогда самое оптимальное это как раз position:absolute;

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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
dima_mak
Дата 22.5.2008, 18:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Программист любитель
*


Профиль
Группа: Участник
Сообщений: 154
Регистрация: 25.5.2004

Репутация: нет
Всего: нет
попробывал как 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>

тоже самое.

Люди помогите..... Что делать?
PM MAIL   Вверх
NDenis
Дата 23.5.2008, 09:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

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

Кажется я в своем примере не использую абсолютное позиционирование.
PM MAIL   Вверх
dima_mak
Дата 23.5.2008, 11:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Программист любитель
*


Профиль
Группа: Участник
Сообщений: 154
Регистрация: 25.5.2004

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

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

Это сообщение отредактировал(а) dima_mak - 23.5.2008, 11:26
PM MAIL   Вверх
dima_mak
Дата 23.5.2008, 13:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Программист любитель
*


Профиль
Группа: Участник
Сообщений: 154
Регистрация: 25.5.2004

Репутация: нет
Всего: нет
всё спасибо!
разобрался - нельзя было делать position:absolute - переделал всё на position:relative и всё заработало.
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0899 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.