С версткой у меня совсем туго, ненавижу это щепетильную работу, по этому никогда особо и не напрягался в изучении этого нелегкого дела.
Ближе к делу.
В общем есть стандартный "костяк" веб-страницы:
#header, #main, #footer.
#main имеет ширину 900px. Но, нужно нескольким блокам в #main-е сделать бекграунд на всю ширину сайта.
Вот примерное расположение блоков:
<div id="header"></div>
<div id="main" style="width: 900px;">
<div id="block1"></div>
<div id="block2"></div>
</div>
<div id="footer"></div>
Дивам block1-2 нужно сделать фон на всю ширину сайта.
Пример вот тут. Внизу видно два блока-фона которые нужно натянуть на блоки "Приобретайте комплект со скидкой 12%" и "Похожие записи:".
Думаю, суть проблемы передал.
Заранее спасибо.
Спустя 17 минут, 46 секунд (20.12.2011 - 22:20) Christik написал(а):
Один из вариантов - не задавать #main фиксированную ширину, а поместить #block1 и #block2 в "обертки" с фоном.
#wrapper1 { background: url(<фон первого блока>); }
#wrapper2 { background: url(<фон второго блока>); }
#block1, #block2 { width: 900px; margin: 0 auto; }
<div id="header"></div>
<div id="main">
<div id="wrapper1">
<div id="block1"></div>
</div>
<div id="wrapper2">
<div id="block2"></div>
</div>
</div>
<div id="footer"></div>
Спустя 6 минут, 28 секунд (20.12.2011 - 22:27) Christik написал(а):
Или еще как вариант - внутри #block1 и #block2 сделать фон с помощью абсолютно позиционированных слоев, а для внешнего дива, обертывающего весь сайт, задать overflow: hidden;
#out { overflow: hidden; min-width: 900px; }
#bg1, #bg2 { position: absolute; left: -2000px; top: 0; width: 4000px; height: 100%; }
#bg1 { background: url(<фон первого блока>); }
#bg2 { background: url(<фон второго блока>); }
<div id="out">
<div id="header"></div>
<div id="main" style="width: 900px;">
<div id="block1"><div id="bg1"></div></div>
<div id="block2"><div id="bg2"></div></div>
</div>
<div id="footer"></div>
</div>
_____________
Гнусный социопат с комплексом Бога.