Вид для печати
Народ! Пишу систему заявок на заказ клиенту. А с версткой у меня всегда туго было... ситуация такая - нужно, чтобы внизу страницы была нижняя шапка (баннеры и т.д.) Так вот проблема в том, что у меня есть страницы, размером меньше, чем 1 страница в высоту. И надо, чтобы страница нижнюю шапку выводила в самом низу экрана. Предлагать вручную дописывать
- не выход. Есть что нибудь типа <p valign=bottom>???
Прилепите футер к низу абсолютно.
[Only registered and activated users can see links. Click Here To Register...]
Aykroyd, к низу чего? у него высота body меньше высоты окна.
[/quote]Цитата:
Originally posted by null@Mar 6 2007, 22:08
Aykroyd, к низу чего? у него высота body меньше высоты окна.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Эка невидаль!
Ну, задать минимальную высоту для body (причем совершенно безболезненно), это, конечно, о-очень большая проблема... [Only registered and activated users can see links. Click Here To Register...]
У меня сейчас схожая проблема, только вот сделать так чтоб подвал был прилеплен к низу у меня получилось, а вот выровнять по центру не получилось. Жалко нет какого-нибудь float: center.
Пришлось проблему решать "по левому".
Поскажите, может есть какое-то нормальное решение такой проблемы.
[/quote]Цитата:
Originally posted by Strelok_Rider@Mar 7 2007, 14:15
У меня сейчас схожая проблема, только вот сделать так чтоб подвал был прилеплен к низу у меня получилось, а вот выровнять по центру не получилось. Жалко нет какого-нибудь float: center.
Пришлось проблему решать "по левому".
Поскажите, может есть какое-то нормальное решение такой проблемы.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
float: center – это, конечно, нонсенс. [Only registered and activated users can see links. Click Here To Register...]
Но проблемы здесь на самом деле никакой нет. Создайте футер 100%-ной ширины с прозрачным фоном, а в нем разместите еще один блок в прямом потоке с содержимым. Это блок можно спокойно выровнять по центру футера при помощи автоматических боковых полей (margin: 0px auto;).
Также есть решение еще проще, дабы не плодить лишние блоки в оформительских целях:
Код:#footer {
width: 600px;
height: 80px;
margin-left: -300px;
position: absolute;
bottom: 0px;
left: 50%;
}
Aykroyd
Так я в принципе и сделал, но мне кается это кривоватым решением, к сожалению у тега Div нет такого выравнивания по середине родительского объекта как у таблицы [Only registered and activated users can see links. Click Here To Register...]
И не совсем понял зачем это:
Помоему гораздо проще прсото задать родительскому блоку свойтво align: center;.Цитата:
. Это блок можно спокойно выровнять по центру футера при помощи автоматических боковых полей (margin: 0px auto;)
Возможно не прав
[/quote]Цитата:
Originally posted by Strelok_Rider@Mar 7 2007, 19:30
Так я в принципе и сделал, но мне кается это кривоватым решением
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Второй предложенный мной способ – самое наипрямоватое решение из прямоватых. [Only registered and activated users can see links. Click Here To Register...]
[/quote]Цитата:
Originally posted by Strelok_Rider@Mar 7 2007, 19:30
К сожалению у тега Div нет такого выравнивания по середине родительского объекта как у таблицы* [Only registered and activated users can see links. Click Here To Register...]
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Есть. Но оно используется исключительно по своему прямому семантическому назначению – для выравнивания по центру ТЕКСТА, а не дочерних блочных элементов.
[/quote]Цитата:
Originally posted by Strelok_Rider@Mar 7 2007, 19:30
И не совсем понял зачем это:
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Для выравнивания дочернего блочного элемента в прямом потоке по центру содержащего его контейнера.
[/quote]Цитата:
Originally posted by Strelok_Rider@Mar 7 2007, 19:30
Помоему гораздо проще прсото задать родительскому блоку свойтво align: center;.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Такого свойства (align) – не существует. Существует свойство text-align.
Посмотрите внимательно на его название и сразу придет понимание для выравнивания ЧЕГО оно предназначено. [Only registered and activated users can see links. Click Here To Register...] А для выравнивания по центру блоков внутри других блоков используйте margin-left: auto; и margin-right: auto;, либо предложенный мной выше метод с отрицательным margin-left.
не работает в ie6.Цитата:
Originally posted by Aykroyd@Mar 6 2007, 23:10
[b]Эка невидаль!
Ну, задать минимальную высоту для body (причем совершенно безболезненно), это, конечно, о-очень большая проблема...* [Only registered and activated users can see links. Click Here To Register...]
и вообще не понимаю как это поможет — высота body должна быть равна высоте окна...
покажите код. коротенько.
[/quote]Цитата:
Originally posted by null@Mar 8 2007, 01:47
не работает в ie6.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Работает идеально.
[/quote]Цитата:
Originally posted by null@Mar 8 2007, 01:47
высота body должна быть равна высоте окна...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Совсем не обязательно. [Only registered and activated users can see links. Click Here To Register...]
Код:body {min-height: 100%; position: relative;}
* html body {height: 100%;}
#footer {width: 100%; height: 90px; position: absolute; bottom: 0px;}
Aykroyd, фигню ведь написал [Only registered and activated users can see links. Click Here To Register...]
возми и проверь. скорми вот это
лучшему из браузеров, в котором даже работает min-height ( [Only registered and activated users can see links. Click Here To Register...] ). где у нас оказался #footer?Код:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
****<head>
*<title>Footer on bottom</title>
****</head>
****<style>
*body {
*****min-height *: 100%;
*****position *: relative;
*}
*#footer {
*****position *: absolute;
*****width *****: 100%;
*****height *****: 90px;
*****bottom *****: 0px;
*}
****</style>
****<body>
*<div id="footer"></div>
****</body>
</html>
[/quote]Цитата:
Originally posted by null@Mar 8 2007, 15:19
Aykroyd, фигню ведь написал [Only registered and activated users can see links. Click Here To Register...]
где у нас оказался #footer?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Эх... Едрить-колотить...
Ладно, сейчас попытаюсь разложить все по полочкам...
Кстати, нам с тобой действительно уже давно пора на "ты"... [Only registered and activated users can see links. Click Here To Register...]
Ты как просил представить код? Цитирую:
<div class='quotetop'>Цитата</div>Вот я и показал. Коротенько.Цитата:
покажите код. коротенько.[/b]
И когда показывал, не мог даже и предположить, что такой многоуважаемый гуру, как null, который неоднократно лично мне давал ценнейшие советы, и которому я за эти советы неоднократно выражал искреннюю благодарность, не может знать элементарных вещей:
Высота любого элемента (не важно – height или min-height), заданная в процентах, может быть рассчитана браузером только в том случае, если ему точно известна высота родителя этого элемента. Таким образом значение height или min-height: 100% для <body> означает "100% от высоты родителя". А родитель у <body> – <html>.
Исключение из вышеописанного правила составляет только сам элемент <html>, так как у него родителя нет (самый верхний элемент в иерархии). Поэтому его 100% берутся от высоты окна, которую браузер всегда точно знает.
На выходе имеем:
И где у нас оказался #footer во ВСЕХ современных браузерах? [Only registered and activated users can see links. Click Here To Register...]Код:<style type="text/css">
* {margin: 0px; padding: 0px;}
html {height: 100%;}
body {min-height: 100%; position: relative;}
* html body {height: 100%;}
#footer {position: absolute; width: 100%; height: 90px; bottom: 0px; background-color: #99FF00;}
</style>
<div id="footer"></div>
Причем этот #footer будет надлежащим образом отодвигаться вниз, если основной контент переполнит высоту окна браузера. Единственный нюанс при таком решении – не забыть добавить для контента нижний padding со значением, равным высоте футера. Так как футер позиционируется абсолютно, это необходимо для того, чтобы при переполнении контентом окна браузера этот контент не "подлезал" самым бессовестным образом под футер...
P.S. Может ты просто "угараешь" надо мной? [Only registered and activated users can see links. Click Here To Register...] А я тут распинаюсь... Не верю, что не знал... [Only registered and activated users can see links. Click Here To Register...]
во-первых с этого стоило начать...Цитата:
html {height: 100%;}
итак, правильный ответ такой
во-вторых думал это не работает в ie, но вот этоКод:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
****<head>
*<title>Footer on bottom</title>
*<meta http-equiv="Content-Language" content="ru"/>
****</head>
****<style type="text/css">
** {
*****margin * *: 0px;
*****padding * *: 0px;
*}
*
*html {
*****height * *: 100%;
*}
*
*body {
*****min-height *****: 100%;
*****position *****: relative;
*}
*
** html body {
*****height * *: 100%;
*}
*
*#footer {
*****position *****: absolute;
*****width * *: 100%;
*****height * *: 90px;
*****bottom * *: 0px;
*****background-color****: #99FF00;
*}
*
*#data {
*****padding-bottom *:90px;
*}
****</style>
****<body>
*
*
****</body>
</html>
я как-то пропустил [Only registered and activated users can see links. Click Here To Register...] и это - все меняет.Код:* html body {
* *height: 100%;
}
"все страньше и страньше..."
спасибо :hi:
Ну упустил я изначально эту "изюминку". Каюсь! [Only registered and activated users can see links. Click Here To Register...]Цитата:
Originally posted by null@Mar 8 2007, 19:49
во-первых с этого стоило начать...<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>Код:html {height: 100%;}
Согласен. [Only registered and activated users can see links. Click Here To Register...]Цитата:
Originally posted by null@Mar 8 2007, 19:49
во-вторых думал это не работает в ie, но вот это
я как-то пропустил [Only registered and activated users can see links. Click Here To Register...] и это - все меняет.Код:* html body {
* *height: 100%;
}
"все страньше и страньше..."
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>
Вообще здесь ситуация довольно парадоксальная. Дело в том, что "некоторый браузер" действительно не понимает min-height. Но здесь нас спасает очередной его баг – свойство height в нем обрабатывается неверно и работает как раз так, как должен работать min-height. [Only registered and activated users can see links. Click Here To Register...]
И, кстати, если уж тема пошла, совсем недавно мы дискуссировали с Павлом (Zigzag) в его блоге на тему "почему не следует задавать body {height: 100%;} для 'нормальных' браузеров". Если интересно – это [Only registered and activated users can see links. Click Here To Register...].
Кстати, у Zigzag-а сегодня День Рождения. [Only registered and activated users can see links. Click Here To Register...]
Паша, мои искренние поздравления! :clapping:
[/quote]Цитата:
Originally posted by null@Mar 8 2007, 19:49
спасибо* :hi:
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Не за что совершенно. [Only registered and activated users can see links. Click Here To Register...]
Pasib bol'shoe! [Only registered and activated users can see links. Click Here To Register...]Цитата:
Originally posted by Aykroyd@Mar 9 2007, 00:07
[b]Кстати, у Zigzag-а сегодня День Рождения.* [Only registered and activated users can see links. Click Here To Register...]
Паша, мои искренние поздравления!* :clapping:
в IE5 описанный выше могучий метод не сработал [Only registered and activated users can see links. Click Here To Register...]
Что делать кто-нить знает?
А он и не сработает. Честно скажу – никогда не задавался задачей заставить работать эту конструкцию в пятом... Сейчас с седьмым-то уже "бодания" каждый день...
С днём Варенья!Цитата:
Originally posted by Aykroyd@Mar 8 2007, 22:07
[b]Кстати, у Zigzag-а сегодня День Рождения.* [Only registered and activated users can see links. Click Here To Register...]
Float: center просто мечтаю об этом параметре.Цитата:
Originally posted by Aykroyd@Mar 7 2007, 14:45
[b]float: center – это, конечно, нонсенс.* [Only registered and activated users can see links. Click Here To Register...]
[/quote]Цитата:
Originally posted by Рёга@May 31 2007, 00:41
С днём Варенья!
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Это было девятого марта... )
[/quote]Цитата:
Originally posted by Рёга@May 31 2007, 00:41
Float: center просто мечтаю об этом параметре.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
А зачем он нужен?
Хорошего человека можно и 30 мая поздравить .)Цитата:
Originally posted by Aykroyd@May 30 2007, 19:44
[b]Это было девятого марта... )
В своё время искал способ центрировать блоки (сам даже придумывал значения параметров float: center). Теперь когда знаю как конечно не нужно.
А ничего придумывать-искать и не надо... ))
Достаточно в спецификацию заглянуть... [Only registered and activated users can see links. Click Here To Register...]
Цитата:
Originally posted by null@Mar 6 2007, 18:08
[b]Aykroyd, к низу чего? у него высота body меньше высоты окна.
Так почему у блока "TEST" высота не 100% в Opera и Firefox ?Код:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<style><!--
* {
* *margin: 0px;
* *padding: 0px;
}
body {
* *width: 100%;
* *height: 100%;
* *min-height: 100%;
* *position: relative;
}
* html body {
* *height: 100%;
}
div#test {
* *width: 800px;
* *height: 100%;
* *background-color: Lime;
}
--></style>
</head>
<body>
<div id='test'></div>
</body>
</html>
иКод:html {height: 100%;}
если уж решились на сей подвиг...Код:<!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">
Спасибо Aykroyd, но почему если я указываю тип документа это подвиг ?
Но ведь этот вариант хорош если данных в таблице меньше чем на высоту страницы, а как поступить если данных в таблице много, на 1.5 страницы. Ведь тогда footer перекроет данные таблицы потому что задано абсолютное позиционирование. Есть способ работающий одинаково хорошо как с небольшим числом данных так и с большим числом данных в таблице?Цитата:
Originally posted by Aykroyd@Mar 6 2007, 15:14
[b]Прилепите футер к низу абсолютно.
[Only registered and activated users can see links. Click Here To Register...]
Какой еще нафик таблицы?
Первый пост в этом топике, у меня таже проблема. Только данных в зависимости от вывода информации на разную высоту, от одной страницы до двух в высоту.Цитата:
Originally posted by Aykroyd@Jun 11 2007, 14:34
[b]Какой еще нафик таблицы?
Да хоть от четверти одной страницы и до шестидесяти в высоту... В чем проблема-то?
Есть... Он выше в этой теме описан...Цитата:
Есть способ работающий одинаково хорошо как с небольшим числом данных так и с большим числом данных?
Проблема в том что я даже не представляю как это сделать без таблицы [Only registered and activated users can see links. Click Here To Register...] или абсолютного позиционирования. Для примера вот элементарная схема:Цитата:
Originally posted by Aykroyd@Jun 11 2007, 15:06
[b]Да хоть от четверти одной страницы и до шестидесяти в высоту... В чем проблема-то?
Как с помощью CSS можно сделать чтобы footer всегда был внизу контейнера а не страницы ?Код:<!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>
<style><!--
*{margin:0px;padding:0px;font-size:100.01%;}
html,body{width:100%;height:100%;}
body{min-height:100%;position:relative;}
div#container {width: 800px;position: relative;height: 100%;background-color:Lime;}
div#info {width: 100%;background-color: white;}
div#footer {width: 100%;height: 100px;}
--></style>
</head>
<body>
<div id='container'>
****<div id='info'></div>
****<div id='footer'></div>
</div>
</body>
</html>
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
Низкий поклон, добился требуемого в IE теперь осталось решить проблему с FF и Opera.Цитата:
Originally posted by Aykroyd@Jun 12 2007, 22:11
[b][Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
с FF и Opera нет никаких проблем... да и быть их не может...
если, конечно, эти проблемы самому себе не создавать всякими <p style='margin-bottom: 200px;'>...
Согласен с FF нет проблем, но с Operой как и с IE проблемы есть, если перед футером например не добавить <p style='margin:0 0 200px 0;'></p>, то футер перекрывает контент а это проблема как не крути.Цитата:
Originally posted by Aykroyd@Jun 14 2007, 16:28
[b]с FF и Opera нет никаких проблем... да и быть их не может...
если, конечно, эти проблемы самому себе не создавать всякими <p style='margin-bottom: 200px;'>...
Aykroyd если проблемы были только с IE, то возможно было указать в CSS специально правило для IE. Вроде специальный комментарий позволяет это сделать. Есть такое или я ошибаюсь?
P.S. просматривал в Opera v9.0, FF v2.0, IE v6.0
[/quote]Цитата:
Originally posted by Рёга@Jun 14 2007, 23:12
Есть такое или я ошибаюсь?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Мда... Подсказка: для того, чтобы контент не залазил под абсолютно спозиционированный футер, никогда не задают отступы или поля этому самому футеру. Для решения этой проблемы основной контент заключают в отдельный блок и задают этому блоку нижний паддинг, равный высоте футера...
Файл не смотрел...
Действительно Мда... всё гениально и просто. Благодарю, разобрался!
Всуну своих 5 копеек насчет выравнивания по ширине. блок в потоке растягивается на всю ширину родительского блока. если у него width:100%(ширина вместе с всеми отступами, бордерами и прочим), то как его можно выровнять по центру? и даже margin:0 auto; не поможет. Выровнять блок по центру можно только в том случае, если у него статическая ширина.
KukMan
пешите исчо )) :clapping: