-
Доброго времени суток. Страница по ширине резиновая, когда мало текста футер должен растягивать фон (их два правый и левый) и находится в самом низу страницы, а когда больше текста должен опускатся ниже.
Сделал вот так:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>футер</title>
<style type="text/css">
* { margin:0; padding:0;}
html { height:100%; }
body { min-height:100%;position:relative;}
* html body {height:100%;}
</style>
</head>
<body>
<div style="width:100%; background: url(bg_left.gif) left repeat-y; height:100%; ">
****<div style="width:100%; background:url(bg_right.gif) right repeat-y; height:100%">****Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы
*<div style="position: absolute; height:50px; width:100%; background:#999999; bottom:0px; left:0px;">
*****Футер
*</div>
****</div>
</div>
</body>
</html>
В данном случае IE прекрасно растягивает фон и футер находится внизу, чего нельзя сказать об Opera и FF.
Не могу понять почему фон не растягивается, объясните пожалуйста.
-
Потому что любой нормальный браузер не может посчитать height: 100% от min-height: 100%.
-
Цитата:
Originally posted by Aykroyd@Jan 14 2008, 06:19
Потому что любой нормальный браузер не может посчитать height: 100% от min-height: 100%.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Если задать height:100%, для всех браузеров, то футер всегда внизу окна браузера даже когда много текста страницы. Скорее всего из-за того, что для футера задано абсолютное позиционирование. Можно ли заставить, что бы футер растягивал фон страницы и находился внизу страницы?
-
Цитата:
Originally posted by fenixnt@Jan 14 2008, 14:21
Если задать height:100%, для всех браузеров, то футер всегда внизу окна браузера даже когда много текста страницы.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Вы это мне решили объяснить? [Only registered and activated users can see links. Click Here To Register...]
Цитата:
Originally posted by fenixnt@Jan 14 2008, 14:21
Скорее всего из-за того, что для футера задано абсолютное позиционирование.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Вовсе не из-за этого...
Цитата:
Originally posted by fenixnt@Jan 14 2008, 14:21
Можно ли заставить, что бы футер растягивал фон страницы и находился внизу страницы?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Можно. Только давайте для начала будем называть вещи своими именами. Вот это вот Ваше: «футер растягивал фон страницы» – ну абсурд, согласитесь?) Как вообще футер может что-то там «растягивать»? Тем более фон какого-нибудь другого элемента.
Вариант №1.
Оставьте все так, как у Вас есть. Только не плодите лишние ДИВы и назначьте bg_left.gif для элемента html, а bg_right.gif – для элемента body. Увидите, что Ваша проблема решится «сама собой».
Вариант №2.
см. разметку и CSS webstandards.org.ru
-
Цитата:
Originally posted by Aykroyd@Jan 14 2008, 16:52
Вы это мне решили объяснить?* [Only registered and activated users can see links. Click Here To Register...]
Вовсе не из-за этого...
Можно. Только давайте для начала будем называть вещи своими именами. Вот это вот Ваше: «футер растягивал фон страницы» – ну абсурд, согласитесь?) Как вообще футер может что-то там «растягивать»? Тем более фон какого-нибудь другого элемента.
Вариант №1.
Оставьте все так, как у Вас есть. Только не плодите лишние ДИВы и назначьте bg_left.gif для элемента html, а bg_right.gif – для элемента body. Увидите, что Ваша проблема решится «сама собой».
Вариант №2.
см. разметку и CSS webstandards.org.ru
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Рассуждал вслух. [Only registered and activated users can see links. Click Here To Register...] Согласен, абсурд. Иными словами, страница растянута на 100 процентов от высоты страницы, а футер тем временем всегда прибит к низу. Проблема вся в том, что страница будет не на всю ширину экрана, а по середине и body уже занят одним бэкграундом (картинкой).
-
Цитата:
Originally posted by fenixnt@Jan 14 2008, 20:26
страница растянута на 100 процентов от высоты страницы
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Бу-га... :clapping:
Цитата:
Originally posted by fenixnt@Jan 14 2008, 20:26
Проблема вся в том, что страница будет не на всю ширину экрана, а по середине и body уже занят одним бэкграундом (картинкой).
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Знаете, смотреть надо конкретный дизайн. Так, не глядя, сложно что-либо посоветовать...
-
Цитата:
Originally posted by Aykroyd@Jan 14 2008, 21:03
Бу-га...* :clapping:
Знаете, смотреть надо конкретный дизайн. Так, не глядя, сложно что-либо посоветовать...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
:biggrin2: Надо же сам не заметил. Страница тянется на всю высоту окна браузера (то есть это минимамальная высота). Возможно ли реализовать эту задачу с таким расположением дивов?
-
Цитата:
Originally posted by fenixnt@Jan 14 2008, 21:39
Страница тянется на всю высоту окна браузера
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Аминь. Мои поздравления. Искренне.)
Цитата:
Originally posted by fenixnt@Jan 14 2008, 21:39
Возможно ли реализовать эту задачу с таким расположением дивов?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Возможно всё. Но говорю же, от конкретного дизайна все зависит...
-
Цитата:
Originally posted by Aykroyd@Jan 14 2008, 22:07
Аминь. Мои поздравления. Искренне.)
Возможно всё. Но говорю же, от конкретного дизайна все зависит...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
[Only registered and activated users can see links. Click Here To Register...] Минимальная высота страницы - 100% от высоты окна браузера. максимальная - бесконечная. :suicide2:. В данном примере, который я подемонстрировал в виде коде, можно это исполнить? Что то я потихоньку прихожу к выводу, что нельзя сделать.
Дезигн в скрепке
-
Что-то я ничего не понял. Какой именно фон там тянуться-то должен до футера??? Какого элемента? И нужна ли резина сразу тоже скажите.
-
Цитата:
Originally posted by Aykroyd@Jan 14 2008, 23:22
Что-то я ничего не понял. Какой именно фон там тянуться-то должен до футера??? Какого элемента? И нужна ли резина сразу тоже скажите.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Страница тянется по ширине окна. Боковые фоны это детали блокнота то есть при увеличении разрешения блокнот должен тянутся по ширине. Если текста мало например страница с контактами где 2-3строчки то футер (копирайты, ручка, создание сайта) должен быть прибит к низу. В итоге получается, что имеем три основных дива (левый,центральный и правый). Центральный резиновый, правые и левые блоки фиксированного размера. Центральный разделен на три дива левый и правый с бэкграундом (левая и правая часть блокнота). В скрепке как это выглядит на 1024х768 и 1280х1024 сейчас.
-
Цитата:
Originally posted by fenixnt@Jan 15 2008, 00:26
Центральный разделен на три дива левый и правый с бэкграундом (левая и правая часть блокнота).
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Вы издеваетесь? :crazy:
Вот это вот:
[attachment=7318:attachment]
пихаем в html:
Код:
html {background: url(bg1.gif) repeat-y left top; height: 100%;}
А вот это вот:
[attachment=7319:attachment]
пихаем в body:
Код:
body {background: url(bg2.gif) repeat-y right top; min-height: 100%; position: relative;}
Все так, как я Вам и писал выше. Какие еще отдельные части блокнота?! Зачем?
-
Цитата:
Originally posted by Aykroyd@Jan 15 2008, 02:01
Вы издеваетесь?* :crazy:
Вот это вот:
[attachment=7318:attachment]
пихаем в html:
Код:
html {background: url(bg1.gif) repeat-y left top; height: 100%;}
А вот это вот:
[attachment=7319:attachment]
пихаем в body:
Код:
body {background: url(bg2.gif) repeat-y right top; min-height: 100%; position: relative;}
Все так, как я Вам и писал выше. Какие еще отдельные части блокнота?! Зачем?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>
Сделал я как Вы посоветовали с самого начали, пришел к тому же. Просмотрел пример, который Вы приводили в другой теме. В результате получилось следующее.
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
* {margin: 0px; padding: 0px;}
html {height: 100%;background:url(bg_left.gif) right repeat-y;}
body { min-height: 100%; position: relative;background: url(bg_left.gif) left repeat-y;}
* html body {height: 100%;}
#content { padding-bottom: 80px; overflow: hidden;background:#666666; margin-left:33px;margin-right:33px; height:100%}
#footer {background: #FFFFCC; width: 100%; height: 80px; position: absolute; bottom: 0px;}
* html #footer {bottom: -1px;}
</style>
</head>
<body>
<div id="content">
Основной контент *
</div>
****<div id="footer">
****</div>
</body>
</html>
Серый фон который у content background:#666666; не растянут до футера. Как этого добится?
-
Цитата:
Originally posted by fenixnt@Jan 15 2008, 13:53
Серый фон который у content background:#666666; не растянут до футера. Как этого добится?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Никак. Потому что:
1. Это никому не нужно (даже Вам, просто Вы об этом пока не подозреваете).
2. Никакого серого фона у content нет в том примере, который я приводил в другой теме.
3. Никакого серого фона у content нет в том эскизе, который Вы прикрепляли в этой теме.
P.S. Такое ощущение, что прикрепленные мной изображения Вы не скачивали...
-
Цитата:
Originally posted by Aykroyd@Jan 16 2008, 02:01
Никак. Потому что:
1. Это никому не нужно (даже Вам, просто Вы об этом пока не подозреваете).
2. Никакого серого фона у content нет в том примере, который я приводил в другой теме.
3. Никакого серого фона у content нет в том эскизе, который Вы прикрепляли в этой* теме.
P.S. Такое ощущение, что прикрепленные мной изображения Вы не скачивали...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
На мой взгляд так намного симпатичнее будет смотрется, на то он и футер,чтобы быть внизу. Придется поколдовать с таблицами display:table. Фона не было я просто подправил под себя чтобы было видно. Прикрепленное Вами изображение то ли глюк был, то ли еще что то на форуме, рисунок не показывал была просто надпись attached что то вроде того. С каждым днем убеждаюсь, что блочная верстка имеет свои недостатки. [Only registered and activated users can see links. Click Here To Register...]
