Jump to content
  • 0

Сложный бекграунд!


demarko
 Share

Question

Здравствуйте!

Дизайнер прислал шаблон со сложным бекграундом. История такая:

В стайлах укажу css директивы которые относятся к теме.

html:

<body>

<div style="height: 300px; z-index: 1;">Этот блок я сделал для того чтобы залить в него бекграунд, основной блок сайта должен наехать на него</div>

<div style="z-index: 2; top: -300px;">этот блок содержит сам сайт, блок выровнен по середине</div>

</body>

Проблема в том что внизу страницы появляется пробел в 300px от этих махинаций и как его убрать я не знаю(

Проблема решается если указать высоту body в пикселях но как ее узаешь то... высота блока с контентом меняется постоянно.

Вообще для справки бекграунд такой: где шапка сайта идет каринка, потом по краям блока с контентом идет его обтекание (типа тени) и внизу опять картинка в футере.

Подскажите пожалуйста!

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
индусский у вас подход если честно, такие вещи дучше делать через абсолютное позиционирование

Какой есть) я только недавно просто вплотную занялся версткой) а то есть позиционировать блок с контентом по обсолюту?

Link to comment
Share on other sites

  • 0
блок с фоном.

А в чем сложность фона? Может проще повесить его на боди? или даже хтмл?

на боди неполучится так как фон режеться на три части - шапка, средняя часть (обтекание контента) и футер.

Не знаю правильно ли но попробовал так:

<body>

<div style="background: #410216 url(/images/bodytop-bg.jpg) repeat-x 50% 0%; height: 400px; position: absolute; width: 100%; z-index: 1;">Этот блок я сделал для того чтобы залить в него бекграунд, основной блок сайта должен наехать на него</div>

<div style="margin-left: auto; margin-right: -485px; position: absolute; right: 50%; width: 970px; z-index: 2;">этот блок содержит сам сайт, блок выровнен по середине</div>

</body>

Вроде выровнился но в FF3 все криво, IE8, Opera 10 и Chrome все норма.

Картинка такая:

a2425f18a118.jpg

Link to comment
Share on other sites

  • 0

Горизонтальная однопиксельная полоска с повторением по вертикали на html + шапка на body, не очень понятно, но если какой-то уникальный футер, почитайте "футер внизу экрана" и посадите бекграунд в него.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy