Подвал в подвале (нахлестом)

[cul8er]

Подскажите как реализуется такой вот футер:

В моей верстке футер уже прижат книзу страницы.

В этом диве(футера), находящимся за пределами wrapp контейнера, указана background картинка(сероватый фон). Теперь нужно на этот футер, наложить как то лист с тенью (чтоб получилось как на картинке).

Если я указываю во wrapp контейнере как background картинку(лист с тенью) с позиционированием снизу, то она естественно прижимается книзу, а отступ margin'a действует и на прижатый футер(серый фон).

Или подскажите адреса сайтов , где есть подобный подвал

[psywalker]

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

[cul8er]

В отдельный блок, внутри блока футера?

И точно абсолютом, а не relativ'ом?)

[psywalker]

В отдельный блок, внутри блока футера?

И точно абсолютом, а не relativ'ом?)

Релатив забронирует под собой местечко, а абсолют нет, поэтому смотри по ситуации.

[cul8er]

Дело в том, что если новый блок с листом расположить в блоке футера, то верхняя часть листка с тенью будет под блоком wrapp'ера (и мы сможем увидеть только нижнюю часть, которая находит на серый фон). Еще один минус этого способа - это позиционирование изображения относительно середины страницы.

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

[psywalker]

Так дружище, а ответь пункты:

1. Покажи скриншот того, как должно выглядеть без листа с тенью.

2. Покажи на скриншоте, где подвал, выдели его.

3. Покажи как у тя не получается, и что при этом происходит.

4. Дай ссылку посмотреть, чисто на страницу с примером, тестовую сделай, с подробным объяснением.

[cul8er]

Так дружище, а ответь пункты:

1. Покажи скриншот того, как должно выглядеть без листа с тенью.

2. Покажи на скриншоте, где подвал, выдели его.

3. Покажи как у тя не получается, и что при этом происходит.

4. Дай ссылку посмотреть, чисто на страницу с примером, тестовую сделай, с подробным объяснением.

Вот здесь можно посмотреть, что мы имеем (лишний контент со страницы и разметку убрал, но не весь, чтоб не разъехался весь шаблон)

Ссылка на страницу

Вкратце разъясню:

Есть контейнер "container" (растянутый на всю страницу вниз и имеющий заданную ширину) в который входит: логотип, меню, и основная часть + контейнер "push", который резервирует место снизу (для футера).

За пределами "container" у нас только контейнер "footer" (который, с отрицательным отступом сверху, занимает зарезервированное место "push"ем). Стандартная схема прилипания футера вроде бы

Сам контейнер footer растянут уже на всю страницу с background'ом.

Задача сделать футер как я показывал ранее:

т.е. наложить листик с тенью поверх футера

П.С. Возможно я не так начал это делать, тогда укажите как правильно.

Еще один небольшой вопросик этого шаблона:

Как убарть обтекание sidebar'a (меню слева), которого может вовсе и не быть на старницах. Если его нет, то текст должен занимать всю область "container", а если он есть, то текст должен по всей высоте иметь отступ от него. Запутался честно с float'aми, и могу только с заданной шириной блока текста это сделать, но тогда будет пусто место где нет sidebar'a.

[cul8er]

Вопрос с футером решен:

Картинку бэкграунда футера увеличил (включил высоту листа), соответственно и сам бэкграунд стал больше по высоте. В футер добавил див с листком без всяких position. Единственное не нравится что текст заканчивается над листом..Буду шаманить дальше, чтоб хоть на пару строк наезжал.

Остался последний не решенный вопрос:

<div id="main">

<div id="sidebar">

Менюшка, которой может и не быть (FLOAT:LEFT; WIDTH:100px;)

</div>

<div id="content">

Много много текста (WIDTH:AUTO;)

</div>

</div>

В данном случае, там где заканчивается меню, текст уходит под него. Как заставить текст идти блоком с одинаковым отступом? Если нет меню,- текст контента должен занимать всю ширину MAIN.

Edited April 5, 2011 by cul8er

[tius]

#content {margin-left: 100px}

либо

#sidebar {display: table-cell;}

[psywalker]

cul8er

С подвалом ты конеш хрень сделал, по другому надо было делать. Ну да ладно уже, поезд ушёл, насчёт меню:

1. Структура:

<div id="main">
<div id="sidebar">
Менюшка, которой может и не быть (FLOAT:LEFT; WIDTH:100px;)
</div>

<div id="content">
Много много текста (WIDTH:AUTO;)
</div>
</div>

2. Стили:

#main {float: left; width: 300px;} #content {overflow:hidden;}

[cul8er]

cul8er

С подвалом ты конеш хрень сделал, по другому надо было делать. Ну да ладно уже, поезд ушёл, насчёт меню:

Переделать никогда не поздно

Напишите на будущее, как такие подвалы склеивают,- буду признателен

[psywalker]

Переделать никогда не поздно

Напишите на будущее, как такие подвалы склеивают,- буду признателен

Тебе нужно было сделать твою серую фигню абсолютом и отцентрировать её, как центрируют абсолют с фиксированной шириной. Найди этот способ и сделай так.