Проблема с футером

[GerMeTIQUE]

Собственно друг попросил сверстать из шаблона сайт.

Я раньше этим особо не занимался, но пообещал помочь.

Решил верстать на <div>

Футер должен быть внизу.

Делал так:

position: absolute;

bottom:0px;

Вот желаемый результат: http://uploaders.com.ua/pfiles/8298/Site_Materialy-page.jpg

А вот что получилось - http://terahost.com.ua/onlystyling/index.php?type=materials

CSS: http://terahost.com.ua/onlystyling/style.css

Как избавиться от наезда футера?

Что сделал неправильно? Какие ошибки в css?

Помогите плз, замахался уже!

Edited March 12, 2010 by GerMeTIQUE

[Zippovich]

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

[GerMeTIQUE]

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

У меня бекграунд хидера и футера идет отдельно и каждый порезан на 4 куска шириной по 256 пх.

<!-- FOOTER -->

<div class="Main-page_05"></div>

<div class="Main-page_06"></div>

<div class="Main-page_07"></div>

<div class="Main-page_08"></div>

<!-- END FOOTER -->

А к общему слою не получится, так как хидер и футер для всех страниц одинаковый, меняется только контент средней части http://terahost.com.ua/onlystyling/index.php?type=services

[Great Rash]

Во-первых, вам сюда.

Во-вторых, у вас в макете ошибка - правильно будет хамелеон, а не хамелИон. Дизигнер неграмотный...

[Zippovich]

У меня бекграунд хидера и футера идет отдельно и каждый порезан на 4 куска шириной по 256 пх.

так порежте правильно и сделайте 2 вложенных слоя - в одном соответственно бэкраунд верхний, в другом нижний, контент внутри, меняйте сколько влезет его, только поставьте минимальную высоту, для всех броузеров это min-height, для ie это height.

[GerMeTIQUE]

так порежте правильно и сделайте 2 вложенных слоя - в одном соответственно бэкраунд верхний, в другом нижний, контент внутри, меняйте сколько влезет его, только поставьте минимальную высоту, для всех броузеров это min-height, для ie это height.

Как мне теперь сделать, чтобы внутренний контент наежал до определенного момента на хидер и футер? И чтобы надписи "Плёнки под карбон (3D)" и "Матовые плёнки" были выровнены в одну строчку?

http://terahost.com.ua/onlystyling/materials.html

http://terahost.com.ua/onlystyling/style2.css

[Zippovich]

не буду смотреть Ваш код, т.к. там черт ногу сломит, я напишу как это должно быть:

<div class="wrapper1">
<div class="wrapper2">
<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div>
</div>
</div>

.wrapper1 {width: 1000px; margin: 0 auto; background: url('путь/картинка-верх.jpg') no-repeat}
.wrapper2 {background: url('путь/картинка-низ.jpg') right bottom no-repeat; min-height: 600px /* расчитайте сами, что бы верхняя картинка не перекрывала нижнюю */}
/* для ie6 используйте вместо min-height height */

<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div>

растягивает внешние слои, т.е. бэкграунды всегда вверху и внизу контента, там где и необходимо

Edited March 12, 2010 by Zippovich

[GerMeTIQUE]

не буду смотреть Ваш код, т.к. там черт ногу сломит, я напишу как это должно быть:

сделал по вашему совету, но получилось не совсем то - нужно чтобы футер был прижат к низу когда немного контента ( http://terahost.com.ua/onlystyling/index.php ), а когда контента станет больше, чтобы появлялась сбоку прокрутка и футер уходил вниз ( http://terahost.com.ua/onlystyling/index.php?type=materials ) - и контент частично должен наежать как на хидер так и на футер.

Edited March 13, 2010 by GerMeTIQUE