Очень непростая задачка

AssaCSSin · August 17, 2009

Здравствуйте! Заранее извиняюсь, если ошибся с темой форума.

Есть дизайн со сложным, композитным бэкграундом. Для описания задачи набросал дизайн:

Немного описания:

Серым цветом - бэк тянется по-горизонтали;

Зеленым цветом - бэк тянется по-вертикали;

Оранжевым цветом - просто заливка цветом;

Фиолетовым цветом - статический бэкграунд.

Как я это сделал:

HTML:

<body>

...............

</div>

</body>

CSS:

html, body {

height:100%;

padding:0;

margin:0;

}

body {

background: url(gfx/mainpage/bg/main_bg_middle.jpg) repeat-y top center #242424;

/*border: 1px solid red;*/

}

#wrap {

position:relative;

min-height:100%;

/*border: 1px solid red;*/

background: url(gfx/mainpage/bg/main_bg_top_tile.jpg) repeat-x top left;

}

* html #wrap {

height:100%;

}

#bg_top_main {

background: url(gfx/mainpage/bg/main_bg_top.jpg) no-repeat top center;

/*border: 1px solid red;*/

}

#bg_bottom_tile {

background: url(gfx/mainpage/bg/main_bg_bottom_tile.jpg) repeat-x bottom left;

/*border: 1px solid red;*/

}

#bg_bottom_main {

width: 960px;

margin: 0 auto 0 auto;

background: url(gfx/mainpage/bg/main_bg_bottom.jpg) no-repeat bottom center;

}

ПРОБЛЕМА - в фоксе и опере появляется справа непонятный отступ (соответственно и прокрутка при разрешении 1024х768). Вдобавок при использовании в укороченной записи background: bottom в эксплорере не показываются нижние бэкграунды.

ДОПОЛНИТЕЛЬНАЯ ЗАДАЧА - при любом накполнении контента футер должен быть всегда снизу.

ВОПРОС - КАК ЭТО РЕАЛИЗОВАТЬ БЕЗ ПОМОЩИ ТАБЛИЦ?

P.S. Не обессудьте за сложность

lavr-ik · August 18, 2009

Про "всегда внизу" - вам сюда

А по поводу примера - я бы лучше сделал так - div#content весь имеет бэкграунд с повторением по x и y, и внутри него размещается дополнительный блок, скажем, div.innerContent, в свойствах у которого прописать внешние отступы на толщину рамки и задать фон, разумеется. Эффект получится тот же самый, зато с кроссбраузерностью проблем быть не должно.

Просто мне кажется, так было бы более логично

Edited August 18, 2009 by lavr-ik

Justnewone · August 18, 2009

Ничего сложного, Ваша ошибка в том что вы неправильно расчленили макет на блоки. Оранжевый цвет - на HTML. Нижний серый блок - BODY, верхний серый блок - на DIV равный высоте бекграунда и имеющий такой же отрицательный маргин снизу, зеленый и сиреневый -куча реальзаций, с уловием что они буду представлять из себя проклонированную полоску во всю ширину с цветным окончаниями.

AssaCSSin · September 17, 2009

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

Мое представление реализации нижней части страницы (цвета согласно схеме):

Зеленый бэкграунд (должен быть на всю высоту страницы) помещаем в body у которого height: 100%.

Серый бэкграунд (должен быть на всю ширину страницы и прилеплен к нижнему краю страницы при любом наполнении контентом) помещаем в дочерний элемент относительно body (скажем div#bottom_tile) у которго height: 100% от высоты body.

Фиолетовый статичный бэкграунд (должен быть всегда прилеплен к нижнему краю границы при любом наполнении контентом) помещаем в дочерний элемент относительно div#bottom_tile (скажем div#bottom_static_bg) у которого height: 100% от высоты div#bottom_tile.

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

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

Помогите, ибо уже хочется убрать DOCTYPE и сверстать все таблицами.

Sign In

Очень непростая задачка

Question

AssaCSSin

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

lavr-ik

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

AssaCSSin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information