960 layout men bakgrund ut i webbläsarens kanter?

Permalänk
Medlem

960 layout men bakgrund ut i webbläsarens kanter?

Hej!

Jag har ett litet, frustrerande problem:

En vanlig layout ser ut som på den här sidan: http://www.theorydesign.ca/ (ett exempel från cssmania)

en sidbredd på, säg 960 px och sen block i olika färg som fyller ut ända till kanterna av webbläsaren. Hur gör jag för att på smidigt sätt fylla ut dessa block till kanterna men fortfarande ha en div som huvuddiv, med 960 i bredd för att hålla i sidan?

Finns det någon allmän lösning för detta? Jag har en tanke om att sätta ett absolutblock med säg z-index:-10; bakom alltihopa med separata block för bara bakgrunden, är det verkligen rätt väg att gå?

typ:

#page { width:960px; margin:0 auto; } <body> <div id='page'> <div id='header'></div> <div id='content'></div> <div id='footer'></div> </div> </body>

Visa signatur

Asus Zenbook UX32VD-R4002V.

Permalänk
Medlem

.page { width: 960px; margin: 0 auto; } #header { background: url('bg.pg') repeat-x; width: 100%; } <body> <div id="header"><div class="page">MIN FINA SIDA</div></div> <div id="contet"><div class="page"></div></div> etc etc...

Nåt sånt kanske?
Alt. är att bygga en background, sen bygga en Absolute wrapper ovanpå

edit: du kan också ha flera Backgrounds på bodyn i CSS3, men då kan dessa inte sträcka sig dynamiskt :/
http://www.css3.info/preview/multiple-backgrounds/

Visa signatur

~. Citera så jag hittar tillbaka .~

Permalänk
Medlem

.site { position: absolute; top: 0; left: 0; } .header{ width: 100%; position: relative; } #wrapper{ width: 960px; margin: 0 auto; position: relative; }

<div id="site"> <div id="header"> </div> <div class="wrapper"> </div> </div>

Permalänk
Medlem
Skrivet av 19KeVVa93:

.page { width: 960px; margin: 0 auto; } #header { background: url('bg.pg') repeat-x; width: 100%; } <body> <div id="header"><div class="page">MIN FINA SIDA</div></div> <div id="contet"><div class="page"></div></div> etc etc...

Nåt sånt kanske?
Alt. är att bygga en background, sen bygga en Absolute wrapper ovanpå

edit: du kan också ha flera Backgrounds på bodyn i CSS3, men då kan dessa inte sträcka sig dynamiskt :/
http://www.css3.info/preview/multiple-backgrounds/

Ser nu när jag granskar min exempellänk att det är löst på samma vis där. Det känns lite omständigt att behöva ha en extra div innuti varje div, men om det här är den generella lösningen så kör jag på det!

Visa signatur

Asus Zenbook UX32VD-R4002V.

Permalänk
Inaktiv

Om jag har förstått frågan rätt, vilket inte är helt säkert såhär sent. Men du vill alltså att bakgrunden går utanför wrappern och till webbläsarens kant?

Gör som sidan du länkade till, ha en separat wrapper för varje sektion med ny bakgrund.

#bakgrund1 { background: url("bakgrund1.jpg"); } #bakgrund2 { background: url("bakgrund2.jpg"); } .container { width: 960px; margin: auto; } <div id="bakgrund1"> <div class="container"> text här </div> </div> <div id="bakgrund2"> <div class="container"> text här </div> </div>