Футер остается на месте - HTML и CSS

Southerner · 27.09.2010, 20:30

Здравствуйте, это снова я.
На этот раз у меня проблема с разным понимание браузеров того, что я им говорю, т.е в опере нормально работает, а в мозилле выпендривается.
В чем собственно проблема, а проблема в том, что в мозилле блок "футер" всегда остается на одном и том же месте, то есть он нашел себе какбы низ экрана, появился там, а растягиваться по блоку "контент"(который его должен отодвигать) не собирается.
Вот код файла CSS, ну и HTML частично

Код:

#baseblock {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%;}
#header {margin-top:auto; height:20%;}
#content {margin-top:auto; height:70%; border:0px solid black;}
#footer {margin-top:auto; height:10%; border:0px solid black;}

Код HTML:

<HTML>
<HEAD>
<TITLE>Web project</TITLE>
<link rel="stylesheet" type="text/css" href="style.css"/>
</HEAD>
<BODY>
<div id="baseblock">
<div id="header">
<table cellspacing=0 cellpadding=0 height=100% width=100% border=0px>
<tr>
<td bgcolor="red" width=20%><pre> </pre></td>
<td bgcolor="blue" width=60%><pre> </pre></td>
<td bgcolor="red" width=20%><pre> </pre></td>

</tr>
</table>
</div>
<div id="content">
<table cellspacing=0 cellpadding=0 height=100% width=100% border=0px>
...................
</table>
</div>
<div id="footer">
<table cellspacing=0 cellpadding=0 height=100% width=100% border=0px>

<tr>
<td bgcolor="red" width=20%><pre> </pre></td>
<td bgcolor="blue" width=60%><pre> </pre></td>
<td bgcolor="red" width=20%><pre> </pre></td>
</tr>
</table>
</div>
</div>
</BODY>
</HTML>

Первый скрин - это как оно выглядит в мозилле, а второй - это как оно в опере, и как я ожидаю увидеть его в мозилле.

Southerner · 27.09.2010, 21:52

Забыл добавить - футер остается на месте при прокрутке, вот.

Виталий Желтяков · 27.09.2010, 22:01

Позицию дива задайте с координатой по высоте. position: absolute; top: xxx;

Magneto · 27.09.2010, 22:48

Ох! Вы уж определитесь какой метод верстки использовать - табличный или дивный. И переверстайте документ согласно своему решению.

Совсем непонятно зачем Вы каждую таблицу помещаете в див
Непонятно зачем следующее изощерение: #baseblock {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%;}
Возможно Вы хотите прижать футер к низу страницы - тогда используйте таблицу - это легко сделать

А и плюс ставить - под аватаркой есть значок с весами - жмите на него

Max Allwinn · 30.09.2010, 17:19

Друг Southerner, мы с тобой одной крови - нубики в CSS, но всеже выскажу мнение.
Смешанная верстка (дивы+таблицы) это, наверно, высший пилотаж, но извини, у тебя в коде черт ногу сломит. Давай, афигительно выучи позиционирование сначала таблицами а потом дивами или наоборот, потому что и так и так можно спозиционировать ВСЕ!!!! А потом уже берись за смешанную верстку.

Так, теперь по сути. Я, плотно осваиваю верстку дивами. Пусть, может таблицами и проще, но лично для меня, кто постиг дивы это профи.

Твой искуссный макетик, я бы оформил так:

<div>контейнер

<div>хедер</div>

Далее можно создать див контент и в него вместить все мясо. а можно и в основном контейнере позиционировать

<div>левая колонка (внутри размещаем еще див для контента колоники)</div>
<div>правая колонка (внутри размещаем еще див для контента колоники)</div>

Центральная область - розовая, что там будет непонятно, но тоже заключаем в див, или можно задать ее цвет в диве основного контейнера background-color. содержимое розовой области засаживаем в дивы и позиционируем как угодно.

Теперь твой злосчастный футер. Его кидаем в див и размещаем в блоке главного контейнера.

<div>footer</div> потом CSS-сим

#footer { width:xxx; height ;xxx; margin: 0 auto; backgraund-image : url (); backgraun-repeat:no-repeat; }

( если ты создал контейнер КОНТЕНТ. футер прижмется к нему ) или можно прижать его к низу главного контейнера.

Насчет гуляющего футера есть такой параметр background-attachment: scroll или fixed; По умолчанию идет СКРОЛЛ, при прокрутке как обычно уходит вверх или вниз. FIXED - стопорит картинку на одном месте и при прокрутке остается на месте, по типу паршивого и дотошного баннера. Попробуй этот параметр для своего футера.

Еще вот совет. Так, не будем пинать на скрин, может не все там ты и снял, я, не вижу у тебя backgraund....цвет. Если ты решил сделать содержание сайта на весь экран, то есть весь контент сайта по виду не расположен как бы в столбце, то мне такой концепт дизайн (я говорю о построении а не о графике) напоминает загон .... Советую делать холст бэкграунда, красиво его оформить. а на нем красиво располагать контент.

Я не профи, как сказал сразу. Просто говорю как делаю я. может и не правильно. готов выслушать нормальную критику. Нахожусь в процессе обучения. будет полезно послушать если что.

вот тренировочный мой шаблончик. делаю сижу. Красным выделил контейнеровозки - [img=http://i.piccy.info/i5/30/58/545830/xxxxxxxxxxxxxxxxxxxx_240.jpg]

30.09.2010, 17:19	#5
Max Allwinn Новичок Джуниор Регистрация: 30.09.2010 Сообщений: 2	Друг Southerner, мы с тобой одной крови - нубики в CSS, но всеже выскажу мнение. Смешанная верстка (дивы+таблицы) это, наверно, высший пилотаж, но извини, у тебя в коде черт ногу сломит. Давай, афигительно выучи позиционирование сначала таблицами а потом дивами или наоборот, потому что и так и так можно спозиционировать ВСЕ!!!! А потом уже берись за смешанную верстку. Так, теперь по сути. Я, плотно осваиваю верстку дивами. Пусть, может таблицами и проще, но лично для меня, кто постиг дивы это профи. Твой искуссный макетик, я бы оформил так: <div>контейнер <div>хедер</div> Далее можно создать див контент и в него вместить все мясо. а можно и в основном контейнере позиционировать <div>левая колонка (внутри размещаем еще див для контента колоники)</div> <div>правая колонка (внутри размещаем еще див для контента колоники)</div> Центральная область - розовая, что там будет непонятно, но тоже заключаем в див, или можно задать ее цвет в диве основного контейнера background-color. содержимое розовой области засаживаем в дивы и позиционируем как угодно. Теперь твой злосчастный футер. Его кидаем в див и размещаем в блоке главного контейнера. <div>footer</div> потом CSS-сим #footer { width:xxx; height ;xxx; margin: 0 auto; backgraund-image : url (); backgraun-repeat:no-repeat; } ( если ты создал контейнер КОНТЕНТ. футер прижмется к нему ) или можно прижать его к низу главного контейнера. Насчет гуляющего футера есть такой параметр background-attachment: scroll или fixed; По умолчанию идет СКРОЛЛ, при прокрутке как обычно уходит вверх или вниз. FIXED - стопорит картинку на одном месте и при прокрутке остается на месте, по типу паршивого и дотошного баннера. Попробуй этот параметр для своего футера. Еще вот совет. Так, не будем пинать на скрин, может не все там ты и снял, я, не вижу у тебя backgraund....цвет. Если ты решил сделать содержание сайта на весь экран, то есть весь контент сайта по виду не расположен как бы в столбце, то мне такой концепт дизайн (я говорю о построении а не о графике) напоминает загон .... Советую делать холст бэкграунда, красиво его оформить. а на нем красиво располагать контент. Я не профи, как сказал сразу. Просто говорю как делаю я. может и не правильно. готов выслушать нормальную критику. Нахожусь в процессе обучения. будет полезно послушать если что. вот тренировочный мой шаблончик. делаю сижу. Красным выделил контейнеровозки - [img=http://i.piccy.info/i5/30/58/545830/xxxxxxxxxxxxxxxxxxxx_240.jpg] Последний раз редактировалось Max Allwinn; 30.09.2010 в 19:14.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Процесс после завершения работы с программой остается в диспетчере зедач с++ builder	romec1	Помощь студентам	0	09.06.2010 14:07
Java скрипт, при наведении на карту она остается картой но картинка меняется	Dimazess	Помощь студентам	6	14.03.2010 16:46
футер прицепился к диву	ic-e	HTML и CSS	0	15.09.2009 16:31
приклеить к низу футер при верстке дивами	mitay	HTML и CSS	32	05.02.2009 23:47
Почему при установке винды остается 8мб?	UknUser	Свободное общение	6	28.01.2009 18:32

27.09.2010, 21:52	#2
Southerner Регистрация: 17.08.2010 Сообщений: 5	Забыл добавить - футер остается на месте при прокрутке, вот.

27.09.2010, 22:01	#3
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Позицию дива задайте с координатой по высоте. position: absolute; top: xxx;

27.09.2010, 22:48	#4
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	Ох! Вы уж определитесь какой метод верстки использовать - табличный или дивный. И переверстайте документ согласно своему решению. Совсем непонятно зачем Вы каждую таблицу помещаете в див Непонятно зачем следующее изощерение: #baseblock {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%;} Возможно Вы хотите прижать футер к низу страницы - тогда используйте таблицу - это легко сделать А и плюс ставить - под аватаркой есть значок с весами - жмите на него