Народ! Пишу систему заявок на заказ клиенту. А с версткой у меня всегда туго было... ситуация такая - нужно, чтобы внизу страницы была нижняя шапка (баннеры и т.д.) Так вот проблема в том, что у меня есть страницы, размером меньше, чем 1 страница в высоту. И надо, чтобы страница нижнюю шапку выводила в самом низу экрана. Предлагать вручную дописывать
- не выход. Есть что нибудь типа <p valign=bottom>???
Aykroyd, к низу чего? у него высота body меньше высоты окна.
[/quote]
Эка невидаль!
Ну, задать минимальную высоту для body (причем совершенно безболезненно), это, конечно, о-очень большая проблема...
У меня сейчас схожая проблема, только вот сделать так чтоб подвал был прилеплен к низу у меня получилось, а вот выровнять по центру не получилось. Жалко нет какого-нибудь float: center.
Пришлось проблему решать "по левому".
Поскажите, может есть какое-то нормальное решение такой проблемы.
[/quote]Originally posted by Strelok_Rider@Mar 7 2007, 14:15
У меня сейчас схожая проблема, только вот сделать так чтоб подвал был прилеплен к низу у меня получилось, а вот выровнять по центру не получилось. Жалко нет какого-нибудь float: center.
Пришлось проблему решать "по левому".
Поскажите, может есть какое-то нормальное решение такой проблемы.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
float: center – это, конечно, нонсенс.
Но проблемы здесь на самом деле никакой нет. Создайте футер 100%-ной ширины с прозрачным фоном, а в нем разместите еще один блок в прямом потоке с содержимым. Это блок можно спокойно выровнять по центру футера при помощи автоматических боковых полей (margin: 0px auto.
Также есть решение еще проще, дабы не плодить лишние блоки в оформительских целях:
Код:#footer { width: 600px; height: 80px; margin-left: -300px; position: absolute; bottom: 0px; left: 50%; }
Aykroyd
Так я в принципе и сделал, но мне кается это кривоватым решением, к сожалению у тега Div нет такого выравнивания по середине родительского объекта как у таблицы
И не совсем понял зачем это:
Помоему гораздо проще прсото задать родительскому блоку свойтво align: center;.. Это блок можно спокойно выровнять по центру футера при помощи автоматических боковых полей (margin: 0px auto
Возможно не прав
[/quote]
Второй предложенный мной способ – самое наипрямоватое решение из прямоватых.
[/quote]
Есть. Но оно используется исключительно по своему прямому семантическому назначению – для выравнивания по центру ТЕКСТА, а не дочерних блочных элементов.
[/quote]
Для выравнивания дочернего блочного элемента в прямом потоке по центру содержащего его контейнера.
[/quote]
Такого свойства (align) – не существует. Существует свойство text-align.
Посмотрите внимательно на его название и сразу придет понимание для выравнивания ЧЕГО оно предназначено.
не работает в ie6.Originally posted by Aykroyd@Mar 6 2007, 23:10
[b]Эка невидаль!
Ну, задать минимальную высоту для body (причем совершенно безболезненно), это, конечно, о-очень большая проблема...*
и вообще не понимаю как это поможет — высота body должна быть равна высоте окна...
покажите код. коротенько.
[/quote]
Работает идеально.
[/quote]
Совсем не обязательно.
Код:body {min-height: 100%; position: relative;} * html body {height: 100%;} #footer {width: 100%; height: 90px; position: absolute; bottom: 0px;}
Aykroyd, фигню ведь написал
возми и проверь. скорми вот это
лучшему из браузеров, в котором даже работает min-height (Код:<!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>). где у нас оказался #footer?
[/quote]
Эх... Едрить-колотить...
Ладно, сейчас попытаюсь разложить все по полочкам...
Кстати, нам с тобой действительно уже давно пора на "ты"...
Ты как просил представить код? Цитирую:
<div class='quotetop'>Цитата</div>Вот я и показал. Коротенько.покажите код. коротенько.[/b]
И когда показывал, не мог даже и предположить, что такой многоуважаемый гуру, как null, который неоднократно лично мне давал ценнейшие советы, и которому я за эти советы неоднократно выражал искреннюю благодарность, не может знать элементарных вещей:
Высота любого элемента (не важно – height или min-height), заданная в процентах, может быть рассчитана браузером только в том случае, если ему точно известна высота родителя этого элемента. Таким образом значение height или min-height: 100% для <body> означает "100% от высоты родителя". А родитель у <body> – <html>.
Исключение из вышеописанного правила составляет только сам элемент <html>, так как у него родителя нет (самый верхний элемент в иерархии). Поэтому его 100% берутся от высоты окна, которую браузер всегда точно знает.
На выходе имеем:
И где у нас оказался #footer во ВСЕХ современных браузерах?Код:<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. Может ты просто "угараешь" надо мной?А я тут распинаюсь... Не верю, что не знал...
во-первых с этого стоило начать...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>
я как-то пропустилКод:* html body { * *height: 100%; }
"все страньше и страньше..."
спасибо
Ну упустил я изначально эту "изюминку". Каюсь!
Согласен.
Вообще здесь ситуация довольно парадоксальная. Дело в том, что "некоторый браузер" действительно не понимает min-height. Но здесь нас спасает очередной его баг – свойство height в нем обрабатывается неверно и работает как раз так, как должен работать min-height.
И, кстати, если уж тема пошла, совсем недавно мы дискуссировали с Павлом (Zigzag) в его блоге на тему "почему не следует задавать body {height: 100%;} для 'нормальных' браузеров". Если интересно – это [Только зарегистрированные пользователи могут видеть ссылки. ].
Кстати, у Zigzag-а сегодня День Рождения.
Паша, мои искренние поздравления!
[/quote]
Не за что совершенно.
Pasib bol'shoe!Originally posted by Aykroyd@Mar 9 2007, 00:07
[b]Кстати, у Zigzag-а сегодня День Рождения.*
Паша, мои искренние поздравления!*
в IE5 описанный выше могучий метод не сработал
Что делать кто-нить знает?
А он и не сработает. Честно скажу – никогда не задавался задачей заставить работать эту конструкцию в пятом... Сейчас с седьмым-то уже "бодания" каждый день...
С днём Варенья!Originally posted by Aykroyd@Mar 8 2007, 22:07
[b]Кстати, у Zigzag-а сегодня День Рождения.*
Float: center просто мечтаю об этом параметре.Originally posted by Aykroyd@Mar 7 2007, 14:45
[b]float: center – это, конечно, нонсенс.*
[/quote]
Это было девятого марта... )
[/quote]
А зачем он нужен?
Хорошего человека можно и 30 мая поздравить .)Originally posted by Aykroyd@May 30 2007, 19:44
[b]Это было девятого марта... )
В своё время искал способ центрировать блоки (сам даже придумывал значения параметров float: center). Теперь когда знаю как конечно не нужно.
Ваши права
