webForumDet fria alternativet
Logga in / Bli medlem

Lager hamnar ovanför text

HTML & CSS

18 svar · 484 visningar · startad av Steady

SteadyMedlem sedan dec. 2004225 inlägg
Frågan#1

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?

Patrik81s avatarPatrik81Medlem sedan okt. 2001538 inlägg
#2

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

InsiderMedlem sedan jan. 2000978 inlägg
#3

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?

SteadyMedlem sedan dec. 2004225 inlägg
#4

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;

InsiderMedlem sedan jan. 2000978 inlägg
#5

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

SteadyMedlem sedan dec. 2004225 inlägg
#6

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?

InsiderMedlem sedan jan. 2000978 inlägg
#7

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

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

SteadyMedlem sedan dec. 2004225 inlägg
#8

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

InsiderMedlem sedan jan. 2000978 inlägg
#9

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

SteadyMedlem sedan dec. 2004225 inlägg
#10

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.

InsiderMedlem sedan jan. 2000978 inlägg
#11

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.

SteadyMedlem sedan dec. 2004225 inlägg
#12

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

InsiderMedlem sedan jan. 2000978 inlägg
#13

Steady skrev:

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

God Jul! :D

SteadyMedlem sedan dec. 2004225 inlägg
#14

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

InsiderMedlem sedan jan. 2000978 inlägg
#15

Fint. :bire

SteadyMedlem sedan dec. 2004225 inlägg
#16

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!

InsiderMedlem sedan jan. 2000978 inlägg
#17

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?

InsiderMedlem sedan jan. 2000978 inlägg
#18

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

SteadyMedlem sedan dec. 2004225 inlägg
#19

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

wF är ju kanon! ;)

260 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
127 ms — deklarationer (db)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)
127 ms — ändringar (db)