Полезная информация

Пользователи не любят читать документацию. Станьте оригинальным, будьте не как все. Ознакомьтесь с нашей базой знаний.

№120-07-2006 15:50:16

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Привязка подвала по низу со сдвигом при увеличении контента

Упёрся в проблему при вёрстке. Понимаю, что туплю, но видимо случай выдался клинический.
Итак, смысл задачи:
только XHTML1.0 Strict и CSS,
только DIV-ы без применения таблиц,
требуется осуществить привязку подвала к низу экрана браузера в случае не полного заполнения по вертикали экрана контентом, но при переполнении есс-но подвал должен быть после контента.
Есс-но требуется совместимость с Gecko, IE и Opera. Как сделать такое средствами HTML с применением таблиц понятно. На свойства же CSS для контейнеров разные браузеры реагируют по разному (в особенности IE). Чую, что решение есть, но не вижу. Делать хак под разные браузеры не хочется, ибо не тот случай.
Вообщем хэлп.!


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

№220-07-2006 16:35:54

Lynn
Кофеман
 
Группа: Members
Откуда: Россия
Зарегистрирован: 16-02-2005
Сообщений: 1721
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Я знаю три разных способа. Но в некоторых случаях не все они применимы.

А ещё есть такое заклинание


Isn't it ironic... don't you think? — Alanis Morissette

Отсутствует

 

№320-07-2006 16:39:37

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

rowlad
Делается так:

Выделить код

Код:

<div class="pagemain1">
    ... тут текст страницы, включая охватывающий элемент
        для колонок
    <div class="bottomplaceholder"></div>
</div>
<div class="bottom1">
    ... тут футер
</div>

и CSS-код к нему

Выделить код

Код:

HTML,BODY {height: 100%;}
.pagemain1 {min-height: 100%;}
* html .pagemain1 {height: 100%;}
.bottomplaceholder {height: 60px; display: block; clear: both;}
.bottom1 {height: 60px; margin-top: -60px;}

(тут я предполагаю, что высота футера 60 пикселей)
Тут нужно объяснить поподробнее.

Выделить код

Код:

HTML,BODY {height: 100%;}

один из золотых ключиков. В режиме строгого следования стандартам обестпечивает для элемента body минимальную высоту в размер окна. Без этого div не будет масштабироваться так как нам надо.

Выделить код

Код:

* html .pagemain1 {height: 100%;}

для непонятливого Експлорера >=6.x.
Персонально для сторонников IE: знаю-знаю, есть люди, которые считают, что недопустимо использовать CSS-хаки, даже те, которые проходят проверку валидатором. Вы можете вынести это правило в отдельную таблицу стилей, скрыв ее в HTML-коде за условным комментарием IE.

Выделить код

Код:

.bottomplaceholder {height: 60px; display: block; clear: both;}

это любой элемент, помещающийся внутри divа, имеющего высоту в страницу или больше, и при этом после содержимого страницы. Он позволяет убедиться, что текст не заедет под футер.

Выделить код

Код:

.bottom1 {height: 60px; margin-top: -60px;}

хитрость в том, что элементы, упомянутые на странице позже, прорисовываются поверх пересекающихся с ними предыдущих. Поэтому указав для футера высоту и такое же верхнее поле, только отрицательное, мы можэем быть уверены, что на странице он не займет место под 100%м divом, но прорисуется над ним, даже в Експлорере.
N.B.!Обратите внимание, если Вы хотите задать минимальную ширину страницы, это нельзя делать в body, а нужно делать для двух элементов - 100%ного divа и для футера. Код будет выглядеть так:

Выделить код

Код:

HTML,BODY {height: 100%;}
.pagemain1 {min-width: 770px; min-height: 100%;}
* html .pagemain1 {height: 100%;}
.bottomplaceholder {height: 60px; display: block; clear: both;}
.bottom1 {min-width: 770px; height: 60px; margin-top: -60px;}

* (если Вы хотите задать минимальную ширину для Internet Explorer, это делается разными способами, в том числе через не проходящее валидатор expression, но это совсем другая сказка)
N.B.!Обратите пристальное внимание на тот факт, что мы пока что не знаем способа вложить два 100%ных divа друг в друга средствами CSS. Решение через разные значения свойства display, к сожалению, неуниверсальны.
Совместимость рецепта: Internet Explorer 5.0-5.5-6.0 (7.0?), Firefox 1.0-1.5-3.0, Mozilla Suite 1.x, Seamokey, K-Meleon >=0.9, Opera 7.01-8-9.0, Konqueror >=3.4, Safari (?).

Отсутствует

 

№420-07-2006 16:40:26

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Lynn
Заклинание 100% высоты увы, но не совсем нормально работает. Всего уже не вспомню, но перепробовал кучу комбинаций  со свойством height для высоты контейнеров. Разнае браузеры по разному себя ведут. IE, к примеру, упорно не хочеи прилеплять низ блока к нижней части экрана.

Добавлено Чтв 20 Июл 2006 16:43:55 :
Al_H
Спасибо, большое человеческое спасибо. Заодно есть теперь над чем в плане теории поразмыслить. :)


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

№520-07-2006 16:47:22

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

rowlad
Да не за что. Не скажу, что мне этот рецепт легко дался. Поиски по интернету дали код, который пришлось дорабатывать. Задача со страницей, на которой должно быть три фона, и все идти сверху до низу, либо, если контента меньше, до конца окна, до сих пор мне не поддается. Есть рецепт для Internet Explorer, но он не работает в современных браузерах. Есть решение через нестандартные свойства Mozilla Firefox, но он работает только на движке Gecko >=1.7. Увы.

Отсутствует

 

№620-07-2006 16:50:47

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Al_H
три фона в равных долях столбцами или тремя горизонтами?


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

№720-07-2006 17:03:39

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

В области страницы, которая высотой с окно, если контента меньше, или с контент, если его больше высоты окна, лежит фон. Задается он, допустим, в том самом divе со 100% высотой. Предположим, что должны быть два фона наложены один на другой. Тогда один из фонов привязывается к body. А если третий - его куда? По идее, нужно в основной div поместить еще один, но вот его-то не сделать 100% по высоте. То есть сделать - для IE и для Gecko. Простейший пример: по середине страницы вьется змейка на фоне, слева еще одна змейка, и справа - еще одна. Страница 100% по ширине, то есть не фиксированная.

Отсутствует

 

№820-07-2006 17:17:57

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Al_H
Идея понятна, приступаю к следственному экспериментировани. Я правда бы вообще сделал три div-а с float по левому краю и шириной в 33, 33 и 34 процента. Пока не уверен, что получится с вертикальной растяжкой для разных браузеров по одинаковому.


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

№920-07-2006 17:26:30

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

И подкладывать эти три дива под контент? А если фон должен быть по всей странице и тот и другой и третий, а не колонками?

Добавлено Чтв 20 Июл 2006 17:31:06 :
Вообше-то, вложенный div 100% работает в IE просто потому, что IE не позволяет фиксировать высоту блока без задания overflow. В Gecko можно сделать через нестандартную компоновку свойством display. Кстати, этот метод используется в шкурках. На стандартах это сделать можно, но в CSS3, который в Firefox в этих пределах реализован в виде нестандартных свойств, а в Opera 9 - никак. Да и в любом случае, мы не могли бы выкинуть Оперу 8.5 и 7, даже если бы в 9.0 работало. В Konqueror тоже не сделать.

Отсутствует

 

№1020-07-2006 17:36:06

Lynn
Кофеман
 
Группа: Members
Откуда: Россия
Зарегистрирован: 16-02-2005
Сообщений: 1721
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Al_H
А это разве не оно?
http://www.positioniseverything.net/articles/onetruelayout/


Isn't it ironic... don't you think? — Alanis Morissette

Отсутствует

 

№1120-07-2006 18:04:47

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

С удовольствием прочел статью. Она написана интересным литературным языком, содержит весомые доводы, видна горячая убежденность автора. Интересная статья, особенно некоторые моменты.
Что до описываемых техник, я воспринимаю их скорее как научную фантастику. Это сложная CSS-верстка с кучей хаков, и она не работает. Это один из многих случаев, когда идеализм на деле оказывается всего лишь красивой картинкой. Обратите внимание, как в некоторых других статьях мы встречаем техники, работающие в IE начиная с 5.5 или работающие только в IE (притом что мы не можем пожертвовать пользователями 5.0, как и пользователями современных браузеров, соответственно), так в приведенных примерах возникают проблемы либо в Firefox 1.0, либо в Opera 7.0, и почти ничего из описанного не работает в Netscape 7.0-7.2 или даже 8.0, не говоря уже о 6.x. Отсюда следует два вывода. Первый - приведенные описания - хороший образчик прозы, демонстрация мощи CSS, но не реальные рецепты. Второй - если в основанном на Gecko браузере рецепт не работает, в то время как в Firefox он работает, это значит, что неизбежны проблемы в других браузерах на основе Gecko, да и в Файрфоксе, скорее всего, добавление небольшого количества элементов сломает верстку.
Это мне напоминает эффектные способы центрирования floatов, часть из которых подразумевали нелогичную верстку, или использование JavaScript, часть не работали в IE 5.0. Я потом разработал свой способ центрирования блоков с высотой и фонами, но он довольно сложен, и я до сих пор не знаю, какие у него недостатки - вроде бы и для блоков одинаковой ширины, и для растягивающихся, работает во всем, в чем я тестировал.

Добавлено Чтв 20 Июл 2006 18:08:24 :
P.S. До divов одинаковой высоты через задание избточной высоты и очистку в родительском элементе я тоже додумывался, и мне как раз не понравилась несовместимость.

Отсутствует

 

№1221-07-2006 11:08:15

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

P.P.S. На самом деле, подходит только div верхнего уровня, содержащий весь контент. Все вложенные divы не будут становиться 100% от высоты документа, потому что height и min-height не задают высоту в процентах от высоты документа, они привязаны к окну. Точно по той же причине нельзя разместить рядом несколько divов 100%ной высоты - они будут разной высоты, если тот, который содержит весь контент, растянется больше высоты окна.

Отсутствует

 

№1322-07-2006 21:20:44

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Al_H
Вот решение, которое одинаково работает в IE6, FF, Opera 8 и 9. В другом не проверял, но думаю, что глюки пойдут только на древних браузерах, которые в приницпе с CSS не дружат.

Выделить код

Код:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title></title>
</head>
<body>

<style type="text/css">
html, body {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

div#bg1 {
	width: 100%;
	position: relative;
	background-color: #00FF7F;
}

div#bg2 {
	position: relative;
	width: 66%;
	margin-left: 34%;
	background-color: #B0C4DE;
}

div#bg3 {
	position: relative;
	width: 50%;
	margin-left: 50%;
	background-color: Aqua;
}

div#cont {
	position: relative;
	width: 300%;
	margin-left: -200%;
}
</style>

<div id="bg1"><div id="bg2"><div id="bg3">

<div id="cont">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
</div>

</div></div></div>

</body>
</html>

ЗЫ
Или я не понял, что требовалось.
Были проблемы с выводом в IE первее заявленых слоёв выше поздних, но это идиотская чувствительность ослика к некоторым моментам синтаксиса.

Отредактировано rowlad (22-07-2006 21:23:33)


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

№1423-07-2006 03:12:35

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Во-первых, в разных браузерах отображается по-разному. Во-вторых, три вложенных divа по высоте контента можно сделать - это понятно.
А нужно:
1. Высота страницы - по высоте экрана, либо, если контента больше, то контента
2. По всей высоте страницы идет фон
3. Фонов три, и все сверху донизу, и это именно фоновое изображение
Вот пункт 3 и сложно реализовать.
Если писать по-человечески, это будет

Выделить код

Код:

HTML,BODY {height: 100%;}
DIV.pagemain1,DIV.pagemain2,DIV.pagemain3 {min-height: 100%; background-image: url(bg1.gif); background-position: left top; background-repeat: repeat-x;}
* html DIV.pagemain1,* html DIV.pagemain2,* html DIV.pagemain3 {height: 100%;}
DIV.pagemain2 {background-position: right top;}
DIV.pagemain3 {background-image: url(bg3.gif); background-position: center top;}

Но это не срабатывает из-за понимания 100% высоты.

Отсутствует

 

№1523-07-2006 12:35:09

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Al_H

Во-первых, в разных браузерах отображается по-разному.

Перечисли набор браузеров в которых вы обычно проверяете. (в тех, что я назвал всё одинаково)

Но это не срабатывает из-за понимания 100% высоты.

А это похоже и есть основная проблема и обходится она, спокойно и без сложностей, имхо, пока только табличной вёрсткой.
Вообщем суть теперь понятна окончательно. Будем дальше посмотреть.


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

№1623-07-2006 13:17:06

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Al_H
Перепробовал целую кучу комбинаций, но, имхо, единственный вариант, это две таблицы стилей и скрипт на джаве для определения ПА. Иначе похоже глухо, т.к. реакция на min-height и height даже в старших элементах html и body у ослика предельно отличается от остальных. :(


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

№1724-07-2006 11:28:29

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Вот пока что получается что так. Но в CSS, в отличие от таблиц, есть элемент фантастики. То, что считалось невозможным, оказывается возможным. Например, центрирование навигационной панели. Или сайт по высоте не меньше окна.

Отсутствует

 

№1824-07-2006 12:15:19

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Al_H

То, что считалось невозможным, оказывается возможным.

Это-то понятно, но вот решение упорно прячется. Уже вариантов с десяток перепробовал разных, только видно не время ещё для наступления чуда. :( Не выходит каменный цветок...

Добавлено Пнд 24 Июл 2006 12:38:13 :
Вроде как заработало одинаково в IE6, Opera 8 и 9, FF. Других браузеров в наличии сейчас не имею. Вообщем смотри, проверяй, задумка вполне простая, а именно - подкладка доп.фона в нижнем слое.

Выделить код

Код:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title></title>
</head>
<body>
<style type="text/css">
div#bg_1 {
	background-image: url(img1.png);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

div#bg_2 {
	background-image: url(img2.png);
	height: 100%;
	margin-left: 34%;
	position: absolute;
	top: 0;
	width: 66%;
	z-index: 0;
}

div#bg_3 {
	background-image: url(img3.png);
	height: 100%;
	margin-left: 50%;
	position: absolute;
	top: 0;
	width: 50%;
	z-index: 0;
}

div#bg1 {
	background-image: url(img1.png);
	position: relative;
	width: 100%;
}

div#bg2 {
	background-image: url(img2.png);
	margin-left: 34%;
	position: relative;
	width: 66%;
}

div#bg3 {
	background-image: url(img3.png);
	margin-left: 50%;
	position: relative;
	width: 50%;
}

div#cont {
	margin-left: -200%;
	position: relative;
	width: 300%;
}

html, body {
	height: 100%;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	width: 100%;
}

</style>


<div id="bg_1"><div id="bg_2"><div id="bg_3"></div></div></div>

<div id="bg1"><div id="bg2"><div id="bg3"><div id="cont">

test test test test test test test test test test test test  

</div></div></div></div>


</body>
</html>

Отредактировано rowlad (24-07-2006 12:53:43)


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

№1924-07-2006 14:18:23

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Боюсь, опять не работает. В Firefox 1.5. Можно ссылку на работающую версию (включая фоны)?
Браузеры, в которых обычно тестирую сайт:
Internet Explorer 5.0,5.5,6.0, Mozilla Firefox 1.5.0.4, Mozilla 1.5, Opera 7.01,7.11,7.50,8.50,9.0, под настроение - Konqueror 3.4, под большое настроение - Netscape 8.x.
Обоснование: IE: 5.0 - это Win2000, у 5.5 свои баги, 6.0 - последний релиз, который реально используется, 7.0b пока ставить не рискну, Firefox+Mozilla: со времен 1.5 в движке пара мелочей поменялась, Opera: разные баги во всех этих версиях, в 9.0 добавлены новые и исправлена часть старых. Скоро надо будет добавлять Fx 2.0b.

Отредактировано Al_H (24-07-2006 14:19:06)

Отсутствует

 

№2024-07-2006 15:10:27

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Al_H
Вот ссылка, пробуй - http://friendshipforce.ru/tmp/bg/index.html (неполное заполнение страницы) и http://friendshipforce.ru/tmp/bg/index2.html (полное заполнение с переполнением)
У меня всё работает в тех браузерах, что я перечислил.


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

№2124-07-2006 16:19:51

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

А почему в части браузеров, включая Internet Explorer, в любом случае полосы прокрутки, в том числе горизонтальная?
Но вообще стоит посмотреть, как это можно использовать... Возможно, возникнут трудности с margin-left.

Кроме того, рецепт не работает во всех Операх, кроме девятой.

Отредактировано Al_H (24-07-2006 16:21:22)

Отсутствует

 

№2224-07-2006 16:30:21

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Al_H
если честно, то насчёт полос прокрутки горизонтальных, у меня оно не возникает, но возможно, что есть какой-то трабл при точном пересчёте процентовки в ширине. Можно просто немного поиграть с процентами в width и margin-left (плюс-минут 1%).
В остальном решение реально рабочее.

Добавлено Пнд 24 Июл 2006 16:36:25 :
Всё, проблема устранена. В свойствах div#bg_2 и div#bg2 для margin-left вместо 34% поставил 33%

Добавлено Пнд 24 Июл 2006 16:41:05 :
С Opera тоже проблема решена. Просто не доглядел, забыл для блока контента Z-index проставить.
Вообщем вот полный код:

Выделить код

Код:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title></title>
</head>
<body>
<style type="text/css">
div#bg_1 {
	background-image: url(img1.png);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

div#bg_2 {
	background-image: url(img2.png);
	height: 100%;
	margin-left: 33%;
	position: absolute;
	top: 0;
	width: 66%;
	z-index: 0;
}

div#bg_3 {
	background-image: url(img3.png);
	height: 100%;
	margin-left: 50%;
	position: absolute;
	top: 0;
	width: 50%;
	z-index: 0;
}

div#bg1 {
	background-image: url(img1.png);
	position: relative;
	width: 100%;
}

div#bg2 {
	background-image: url(img2.png);
	margin-left: 33%;
	position: relative;
	width: 66%;
}

div#bg3 {
	background-image: url(img3.png);
	margin-left: 50%;
	position: relative;
	width: 50%;
}

div#cont {
	margin-left: -200%;
	position: relative;
	width: 300%;
	z-index: 1;
}

html, body {
	height: 100%;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	width: 100%;
}

</style>


<div id="bg_1"><div id="bg_2"><div id="bg_3"></div></div></div>

<div id="bg1"><div id="bg2"><div id="bg3"><div id="cont">

test test test test test test test test test test test test  

</div></div></div></div>


</body>
</html>

Отредактировано rowlad (24-07-2006 16:31:12)


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

№2325-07-2006 18:26:42

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

В Опере при недостатке контента все равно появляется прокрутка.
Сильно плохеет IE <6.0 - за счет ширины блоков.
Но идея понятна, спасибо.

Отсутствует

 

№2425-07-2006 19:45:40

Lain_13
Забанен
 
Группа: Members
Откуда: Волшебная Страна
Зарегистрирован: 26-04-2006
Сообщений: 10320

Re: Привязка подвала по низу со сдвигом при увеличении контента

Справа в ФФ2.0б1 появилась полоска в 1% шириной с тем же фоном, что и в первой... видимо зря вы меняли 34% на 33%... Ж)
...убить билла... :D

Отредактировано Lain_13 (25-07-2006 19:46:25)

Отсутствует

 

№2525-07-2006 19:52:16

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Lain_13

..убить билла...

Однозначно пристрелить нафиг! Хочется, чтобы единый стиль для всех был, а единственное стопроцентное решение похоже, это подкладка под каждый браузер своего стиля через скрипт, отчего на душе грустно...


Русский человек может pешить любую пpоблему, если конечно не будет задаваться вопpосом "А зачем?"
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Firefox/1.5.0.5 ID:2006071912
Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.8.0.5) Gecko/20060719 Thunderbird/1.5.0.5 ID:2006071912

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]