960 layout men bakgrund ut i webbläsarens kanter?

2012-02-24 19:22

Permalänk

kon87

Medlem

Plats: i molnet
Registrerad: Okt 2005

●

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.

Rapportera Redigera

Citera flera Citera

2012-02-24 19:30

Permalänk

KeVVa

Medlem ★

Plats: Bålsta
Registrerad: Nov 2010

●

.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 .~

Rapportera Redigera

Citera flera Citera

2012-02-24 22:29

Permalänk

Calimi

Medlem

Plats: Göteborg
Registrerad: Mar 2010

●

.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>

Visa signatur

Fraktfritt, Inet | SBE Marin, segling runt Malta

Rapportera Redigera

Citera flera Citera

2012-02-25 00:01

Permalänk

kon87

Medlem

Plats: i molnet
Registrerad: Okt 2005

●

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/

Gå till inlägget

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.

Rapportera Redigera

Citera flera Citera

2012-02-25 02:12

Permalänk

anon166922

Inaktiv

Registrerad: Mar 2011

●

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>

Rapportera Redigera

Citera flera Citera

960 layout men bakgrund ut i webbläsarens kanter?

960 layout men bakgrund ut i webbläsarens kanter?

Externa nyheter

Spelnyheter från FZ