VPF::Подвал прилипить к низу окна и смещать вниз.

Deja_Vu

Дата 18.2.2008, 16:46 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 88
Регистрация: 15.6.2007
Где: Казань

Репутация: нет
Всего: 2

Код


<html>
<body>
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</body>    
</html>

Нужно что бы подвал прилип к нижней части до тех пор, пока контент не начнет смещать его вниз.
Сколько не мучаюсь, не выходит. -((
p.s.
попытка найти на форуме схожые темы была.. но плодов не принесла -((

WebDisaster

Дата 18.2.2008, 16:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: 17
Всего: 19

Цитата(Deja_Vu @ 18.2.2008, 16:46

)

плодов не принесла

Плод.

Deja_Vu

Дата 18.2.2008, 17:37 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 88
Регистрация: 15.6.2007
Где: Казань

Репутация: нет
Всего: 2

Цитата(WebDisaster @ 18.2.2008, 16:51)

Цитата(Deja_Vu @ 18.2.2008, 16:46

)

плодов не принесла

Плод.

сейчас проверю что не так. .в примере футер сдвигается.. а у меня он остается на месте -((
---

Хм.. все бы великолепно, но ... у меня у middle есть фон ... он градиентом поднимается от подвала к середине, можно ли как нить раздвинуть контентную часть до подвала?

Это сообщение отредактировал(а) Deja_Vu - 18.2.2008, 17:55

WebDisaster

Дата 18.2.2008, 21:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

Репутация: 17
Всего: 19

Цитата(Deja_Vu @ 18.2.2008, 17:37

)

что не так. .в примере футер сдвигается.. а у меня он остается на месте

9 против 1, что причиной тому игнорирование DOCTYPE. Чем он Вам так насолил? =)

Цитата(Deja_Vu @ 18.2.2008, 17:37

)

раздвинуть контентную часть до подвала

Могу предложить следующий вариант (но в данном случае с z-index будет тупить FF -- бэкграунда не будет)

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Приклеиваем футер внизу страницы</title>
<style type="text/css">
<!--
html {
   padding: 0;
   margin: 0;
   height: 100%;
   width: 100%;}
body {
   position: relative;
   padding: 0;
   margin: 0;
   min-height: 100%;
}
* html body {
   height: 100%;
}
#content {
   background: none;
   width: 100%; 
   padding-bottom: 60px;
   z-index: 100;
}
#background, #footer {
   position: absolute;
   width: 100%;
}
#background {
   background: #ddd url(path/to/file.gif) bottom repeat-x;
   height: 300px;
   z-index: -1;
   bottom: 40px;
}
#footer {
   background-color:#CCCC00;
   padding: 1px 0px;
   bottom: 0;
   height: 40px;
   z-index: 100;
}

#content p:first-child, #footer p {margin: 0; padding: 10px 0;}

-->
</style>
</head>
<body>
<div id="background"></div>
<div id="content">
<p>Здесь вывод хедера и контента</p>
</div>
<div id="footer">
<p>Это наш футер </p></div>
</body>
</html>

ilyaILF

Дата 18.2.2008, 22:21 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

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

Репутация: 6
Всего: 6

http://www.themaninblue.com/experiment/foo...ample_short.htm - этот пример в рабочем состоянии.
А кто вам мешает сделать общий контейнерный элемент как в примере <div id="page"></div> к которому и прикрепить background-images.

Deja_Vu

Дата 18.2.2008, 23:40 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 88
Регистрация: 15.6.2007
Где: Казань

Репутация: нет
Всего: 2

Спасибо .... я пошел тем же путем, но в MF у меня ничего не получилось. Да, пропадал градиент при использвании z-index. Мне показалось, что совсем у меня мозгов нет, но ваш пост порадовал, мол MF - тупит ...

to ilyaILF
Довольно интересно .. завтро обязательно гляну. спасибо.

Deja_Vu

Дата 19.2.2008, 09:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 88
Регистрация: 15.6.2007
Где: Казань

Репутация: нет
Всего: 2

to ilyaILF
Спасибо ... все получилось! -))

Правда одного не понимаю ... почему если что-то поменять в вашем примере, т.е. у html высоту убрать то все слетает -((

Georgich

Дата 10.5.2008, 21:36 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

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

Репутация: нет
Всего: нет

Тоже есть вопрос про "подвал". Есть хороший шаблон, но он не реализован, чтобы "подвал" был внизу страницы :
http://www.dynamicdrive.com/style/layouts/...22-fixed-fixed/
Что следует добавить, чтобы страница растянулась по высоте (из примера убираем JS)? Этот пример, который я показываю очень хороший и обеспечивает хорошую кроссбраузерность. Надеюсь на Вашу помощь.
СПАСИБО!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »