Ребята помогите с вёрсткой на Div

Ребята вот начал изучать div вёрстку всё нравиться только не разобрался в ней толком! вот есть макет наверху градиент и внизу градиент он должен быть всегда на всю страницу даже если нету текста когда заполняешь сайт нижний градиент долен спускаться вниз помогите как ето реализовать! заранее благодарю!
Если знаете как напешите в ICQ 7302143

<div class="header" style="height:XXpx;background:#color1 url(header.png) repeat-x;">йа шапка</div>

<div class="content" style="min-height:XXpx">йа содержимое</div>

<div class="footer" style="height:XXpx;background:#color2 url(footer.png) repeat-x;">йа футер</div>

XX - нужные размеры.
min-height для ie<=6 - выставляется через height.
style разумеется перенести в таблицу стилей.
#color - цвет (необязательно, но будет хороший тоном). В зависисмоти от тянучести макета делать цветом либо самой верхней, либо самой нижней точки header/footer.

header.png, footer.png - изображения нужной высоты шириной в 1px. Если фотошоп версии до CS3 потребуется удалить gAMA (найдете в гугле).

Собственно все.

Цитата ("Sir_Michael"):

<div class="header" style="height:XXpx;background:#color1 url(header.png) repeat-x;">йа шапка</div>

<div class="content" style="min-height:XXpx">йа содержимое</div>

<div class="footer" style="height:XXpx;background:#color2 url(footer.png) repeat-x;">йа футер</div>

XX - нужные размеры.
min-height для ie<=6 - выставляется через height.
style разумеется перенести в таблицу стилей.
#color - цвет (необязательно, но будет хороший тоном). В зависисмоти от тянучести макета делать цветом либо самой верхней, либо самой нижней точки header/footer.

header.png, footer.png - изображения нужной высоты шириной в 1px. Если фотошоп версии до CS3 потребуется удалить gAMA (найдете в гугле).

Собственно все.

Да пробовал так но не точто надо так как при разрешение 1024/768 появляеться правый ползунок а я хотел бы что бы при любом разрешение низ был внизу а верх сверху но всё равно спасибо!

Понятно. К прилипанию хедера/футера к краям экрана отношусь отрицательно, но вам поможет вот это: ссылка

Это нижняя заливка

body {

	width: 100%;

	min-height: 100%;

	background: #fff url(bg_bottom.jpg) repeat-x bottom;

}

Это верхняя заливка

#header {

	width: 100%;

	height: XXXpx;

	background: #fff url(bg_top.jpg) repeat-x top;

}

starki
Ну, если бы все было так просто.
Такой вариант подойдет (ничего не скажу про кроссбраузерность) только если нужна лишь заливка, то есть если в footer'е нет никакого контента.

Проверено IE, Opera, FF - все работает.
Прижатие футера к низу - это другая песня.
Но ничего не изменится - этот же фон будет и у футера.

Цитата:

Проверено IE, Opera, FF - все работает.

Простите, при каком doctype проверяли? Ну не может работать вышеприведенный пример.

Цитата ("Sir_Michael"):

Понятно. К прилипанию хедера/футера к краям экрана отношусь отрицательно, но вам поможет вот это: ]http://xhtml.ru/2005/10/18/footer-stick/

спасибо огромное помоло!

Sir_Michael
Ошибка - на Опере не работает, на Сафари - да.
И вообще лучше, конечно, прилипить футер к низу
а уж потом ему задать бэкграунд.