Lager hamnar ovanför text

Hejsan!

Jag har just gett mig in på lager mha. divvar och har stött på en liten sak som jag inte riktigt får koll på.
Såhär ser CSS:en ut:

body {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #DDDDDD;
}

#webpage {
	width: 719px;
	height: 100%;
	margin: 0px auto;
	background-image: url(interface/webpage_bg.gif);
	background-repeat: repeat-y;
}

#webpage_top {
	position: absolute;
	width: 676px;
	height: 100px;
	margin: 0 0 0 22px;
	background-image: url(interface/webpage_top.gif);
	background-repeat: no-repeat;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #777777;
}

#webpage_content {
	clear: both;
	margin: 0;
}

#webpage_left {
	float: left;
	width: 21px;
	height: 100%;
	background-image: url(interface/webpage_left.gif);
	background-repeat: repeat-y;
}

#webpage_right {
	float: right;
	width: 21px;
	height: 100%;
	background-image: url(interface/webpage_right.gif);
	background-repeat: repeat-y;
}

#content {
	padding: 20px;
	width: 380px;
	float: left;
}

#sidebar {
	padding: 20px;
	width: 217px;
	float: left;
}

Och här har ni HTML-koden

<div id="webpage">
<div id="webpage_top"></div>
     <div id="webpage_content">
          <div id="webpage_left"></div>
               <div id="content">Left Content</div>
               <div id="sidebar">Right Sidebar</div>
          <div id="webpage_right"></div>
     </div>
</div>

Problemet är nu att texten i content och sidebar lägger sig bakom själva topp-bilden, vilket är ganska självklart, eftersom den har position: absolute... Hur kan man gå runt detta?

Helt otestat, men borde det inte vara så lätt som att lägga in lite olika z-index lite varstans, och ge lagren med text ett högre värde i z-index, än du ger lagret med bakgrunden?

MVH Patrik

När man använder position:absolute brukar man ange nån kantegenskap t.ex. top:100px.

Men du anger ingen sådan, så om du helt enkelt tar bort position:absolute så hamnar texten i content och sidebar under topp-bilden.

Vad vill du uppnå med position:absolute?

Patrik81 skrev:

Helt otestat, men borde det inte vara så lätt som att lägga in lite olika z-index lite varstans, och ge lagren med text ett högre värde i z-index, än du ger lagret med bakgrunden?

MVH Patrik

Har testat det, men det funkar inte. :l

Insider skrev:

När man använder position:absolute brukar man ange nån kantegenskap t.ex. top:100px.

Men du anger ingen sådan, så om du helt enkelt tar bort position:absolute så hamnar texten i content och sidebar under topp-bilden.

Vad vill du uppnå med position:absolute?

Det är så att #webpage_left resp. right hamnar under #webpage_top när jag tar bort position: absolute;

Jaha, så du VILL att texten ska ligga PÅ topp-bilden???

Isåfall kan du väl lägg in topp-bilden som bakgrundsbild i lagret med din text i stället?
Borde bli mycket enklare....

Nej! ;) Jag vill att texten ska hamna under topp-bilden.
Såhär ser det ut: http://steady.mine.nu/learnbylisten/

Om du kollar källkoden så ser du att texten nu ligger under bilden, hur fixar jag så bilden "puttar" ner texten?

Kommer inte in på din sida. Posta gärna all kod...

Men om du tar bort position:absolute så puttas ju texten ner.

Here you go!
http://member.webforum.nu/8332/index.html

Som sagt, om du tar bort position:absolute så puttas texten ner.
Eller måste du ha position:absolute av nån annan anledning?

Jo, men om jag tar bort position: absolute så försvinner ramarna vid sidorna, om du kollar länken som jag gav tidigare så ser du varför jag vill ha position: absolute.

Hmmm, nu kollade jag på din sida i explorer och märkte att den såg lite annorlunda ut.
Jag tror du får tänka om lite vad gäller designen för att din sida ska se OK ut i flera webbläsare.
Lägg dom där ramarna i en och samma bild som du sätter som bakgrundsbild i #webpage istället. Du får alltså ändra din webpage_bg.gif så att bägge alla ramarna ligger med.

Sen kan du helt enkelt ta bort <div id="webpage_left"></div> och <div id="webpage_right"></div> ur koden.

Ska testa, tack så mycket! Och God Jul! :)

Steady skrev:

Ska testa, tack så mycket! Och God Jul! :)

God Jul! :D

Kanonfint, precis så jag ville ha det, tack så mycket Insider! :)

Fint. :bire

En liten fråga till bara, som jag har det nu så visas bakgrunden endast i IE och inte i FF.
Skärmdump IE: http://member.webforum.nu/8332/skarmdump_wf_ie.gif
Skärmdump FF: http://member.webforum.nu/8332/skarmdump_wf_ff.gif
Vad kan detta bero på? Såhär ser koden ut:

body {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: #DDDDDD;
}

div {
	font-family: verdana, tahoma, arial, sans-serif;
	font-size: 11px;
}

#webpage {
	width: 740px;
	height: 100%;
	margin: 0px auto;
	background-image: url(interface/webpage_bg.gif);
	background-repeat: repeat-y;
}

#webpage_top {
	width: 698px;
	height: 100px;
	margin: 0 0 0 21px;
	background-image: url(interface/webpage_top.gif);
	background-repeat: no-repeat;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #777777;
}

#webpage_content {
	margin: 0 0 0 20px;
}

#content {
	padding: 20px;
	width: 420px;
	float: left;
}

#sidebar {
	padding: 20px;
	width: 217px;
	float: left;
}

Och

<div id="webpage">
<div id="webpage_top"></div>
	<div id="webpage_content">
		<div id="content">

		Main

		</div>
		<div id="sidebar">

		Right

		</div>
	</div>
</div>

Tack på förhand!

Ett blockelement som bara innehåller flytande element trycks ej ned automatiskt, eftersom flytande element inte ligger med i dokumentflödet på samma sätt. En liknande effekt som du fick med position:absolute förut.

Lägg in ett nytt blockelement längst ned så borde det funka. En sidfot kanske?

Två bra artiklar som beskriver mer om positionering och floats som är jätteviktigt att ha koll på som du har sett idag. ;)

Flytande formgivning

Relativt absolut

Tack än en gång, det löste mitt problem!

wF är ju kanon! ;)