CSS: hur får jag rätt höjd på mina <div>ar?

[Deborah]

Jag håller på att göra om en sajt så att designen bygger på olika <div> istället för tabeller.

 

Men nu har jag ägnat TIMMAR åt att försöka förstå hur height fungerar (trots att jag trodde att jag visste allt om det när jag vaknade i morse).

 

Såhär vill jag göra.

 

<div class="main">

 

<div class="top"></div>

 

<div class="menu">

Här är menyn

</div>

 

<div class="content">

Här är innehållet

</div>

</div>

 

'Main' ska vara lika hög som webbläsaren som default, men bli högre om innehållet i den är högre än webbläsaren.

 

'Menu' är float:left. Höjden ska vara 100% av main minus höjden på 'top'.

 

'Content' ska vara lika hög som 'menu', d.v.s. fylla hela 'main'.

 

Firefox och IE verkar tolka min kod helt olika. T.ex. så hamnar hela menyn till vänster om hela 'contents' i IE medans 'menu' flyter innuti 'contents' i Firefox.

 

Det här borde väl inte vara så svårt???

 

[Micke_skane]

Din html-kod ser rätt ut men frågan är hur din css-kod ser ut.

Visa css-koden så är det lättare att hjälpa dig.

 

[Deborah]

Okej. Här kommer den fullständiga versionen av html-koden.

<div id="background">
<div id="main">
	<div class="top_left">
		<div class="logo"><img src="grafik/logo.gif"></div>

			<div class="menu_top"><? menu_top() ?></div>

		</div>
	<div class="top"><img src="grafik/top.jpg"></div>


	<div id="menu">
		<?php menu(); ?>
	</div>

	<div id="content">	
		<?php include("sidor/$sida.php")?>


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

 

 

Och här kommer css-koden. Det är alltså height som inte blir rätt.

 

body		{
			margin:0px;
			padding:0px;
			height:100%;
			}

#background{
background-image: url(page_background.gif);
background-repeat: repeat-y;
background-position: center top;
width: 100%;
margin: 0px;
padding: 0px;
height: 100%;
}

#main		{
border: 0;
width: 775px;
background-color: ffffff;
margin: 0;
height: inherit;
}

#menu 		{
background-color: ffffff;
color: black;
width: 100px;
text-align: left;
padding-right: 10px;
padding-top: 50px;
line-height: 30px;
border-right: 2px solid #ffa500;
margin-right: 5px;
margin-left: 15px;

font-size: 15px;
float: left;
}

#content{
text-align:left;
padding-right:10px;
padding-left:10px;
height:100%;
}

.top_left{
float:left;
margin-left:15px; margin-right:0px;
margin-top:30px;
}

.logo{
margin-bottom: 10px;
}

.menu_top{
border-top:#708e63 solid 2px;
border-bottom:#708e63 solid 2px;
width:482px;
margin-right:0px;
padding:1px;
}

.top{
margin:0px;
}

 

[Micke_skane]

Det var lite rörig kod(html-kodens flöde) och som innehöll fler element än vad som íngick när hur du försökte beskriva hur du ville ha det.

Kanske bättre om du kan göra en bild eller om du orkar förklara en gång till. Du hade i alla fall missat # före en del färgsättning.

 

T ex:

background-color: ffffff;

 

[Deborah]

www.lovgardesskolan.se/deb/TEST/mozilla.GIF

www.lovgardesskolan.se/deb/TEST/ie.GIF

 

Här är två skärmdumpar på hur det blir. Jag har bara lagt till borders i css-koden för att kunna se vad som är vad.

 

Som du ser är 'content' (den oranga rutan med själva texten) helt olika i de olika webbläsarna. Som du kanske kan gissa så vill jag att det ska se ut som det gör i IE. Eller, jag hade iaf varit ganska nöjd om det såg ut så =)

 

Tack så hemskt mkt för att du försöker hjälpa mig !

 

[Micke_skane]

Okej, ska se om jag får tid under dagen att snabbt titta på det.

 

Men jag hade lagt allt i en div(x) som är relativt-positionerad och i den hade jag skapat divar som är absolute-positionerade. Då kan du bestämma utifrån x:s övre/vänstra hörn var dem andra divsen ska hamna.

 

Det gör du med top:värde; och left:värde; .

http://www.w3schools.com/css/pr_class_position.asp

http://www.w3schools.com/css/pr_pos_top.asp

http://www.w3schools.com/css/pr_pos_left.asp

 

[Deborah]

Hej

Jo jag ska prova att göra om alltihop som du skriver.

Så du behöver inte titta på det, jag ska ju ändå ändra alltihop =)

 

Det känns ju onödigt komplicerat som jag har det nu, så det verkar vettigt att pröva en annan metod.

 

Tack.

 

Deborah

 

[Deborah]

Ja nu har jag gjort om allting som du sa. Det tog en kvart, och allt funkar klockrent. Tänk så onödigt omständigt man (läs jag) tänker ibland.

 

Tack så hemskt mycket.