strekke div height. får ikke til

[Gjest Slettet+142]

hallo

 

jeg har et problem med siden min som er under utvikling.

Siden min

 

problemet er at den div'en som skal ha innholdet i, den som står "Forelopig er ikke index definert..."(.main#midt) i ikke vil strekke seg over 80% av siden..

 

style.css:

 

 

@charset "iso-8859-2";
/* CSS Document */

body{
background-color: #0099FF;
margin-bottom: 1px;
}

a{
color:#000000;
}
a:visited{
color:#000000;
}
a:hover{
color: #000000;
}

.main{
background-color:#FFFFFF;
//position:relative;
}
.main#all{
width: 100%;
height: 80%;
//border: black solid;
margin-bottom: 2px;
background-color: #0099FF;

}
.main#top{
width: 90%;
height: 10%;
max-height: 10%;
margin-bottom: 1px;
margin-top: 1px;

padding-left: 5%;
padding-right: 5%;
//border: black solid;
background-color: #0099FF;

}
.main#belowtop{
width: 80%;
height: 7%;
font-size:17px;
font-weight:400;
letter-spacing:1px;
padding-top: 1px;
padding-bottom: 1px;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 1px;
margin-top: 1px;
padding-left: 5%;
padding-right: 5%;

border-bottom: inset 1px #E2E2E2;

}
.main#midt{
width: 80%;
margin-top: 1px;
margin-left: 5%;
margin-right: 5%;
height: 83%;
margin-bottom: 1px;
padding-left: 5%;
padding-right: 5%;
padding-top: 3%;
padding-bottom: 3%;
//border: inset 1px #E2E2E2;


}
.top#title{
color:#000000;
font-weight:700;
font-variant:small-caps;
text-decoration:overline;
letter-spacing: 2px;

position:absolute;
top: 5%;
left: 20%;
font-size:30px;
}
.top#title:hover{
color: #333333;
/*text-decoration:underline;*/
}
.top#besk{
position: absolute;
color:#000000;
top: 10%;
right: 20%;
font-size:16px;
text-decoration:underline;
letter-spacing: 1px;
}
.top#besk:hover{
color: #333333;
}
.top#hr{
background-color: #FFFFFF;
}
.bottom#line{
margin-top: 0px;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 1%;
padding-left: 5%;
padding-right: 5%;
padding-top: 0.5%;
padding-bottom: 0.5%;
width: 90%;
background-color:#FFFFFF;
}
.bottom#line tr td{
text-align:center;
letter-spacing: 1px;
font-weight:400;
font-size:15px;
}
.bottom#line tr td span{
font-weight: 800;
letter-spacing: 0.5px;
}

 

 

 

index.html:

 

 

<div class="main" id="all">

<!--Side Start-->


<div class="main" id="top">
<!--Banner Start-->

<a href="index.html" title="Hjem">
<!--<img src="" width="100%" height="100%" />--><hr class="top" id="hr" size="100%"  />
<div class="top" id="title">mariyoweb.com</div>
<div class="top" id="besk">- Velkommen</div>
</a>

<!--Banner Stopp-->
</div>

<div class="main" id="belowtop">
<!--Menu Start-->

<a href='index.html' target=''>Hjem</a> -- 
<a href='index.html?page=test' target=''>Test</a>

<!--Menu Stopp-->
</div>


<div class="main" id="midt">
<!-- Start-->

Forelopig er ikke index definert...

<script> document.title = 'mariyoweb.com -> Index'; </script>
<!-- Stopp-->
</div>




<!--Side Stopp-->
</div>

<table class="bottom" id="line" border=0>
<tr>

<td>Din Ip: <span>127.0.0.1</span></td>

<td>Dato: <span>16. 01 - 2007  18:44:53</span></td>

</tr>
</table>

 

 

 

har prøvd å sette position: absolute; på noen av de forskjellige elementene, men da ødelegges hele designet =/

 

håper at dette var isåfall noe forståelig og at noen vet løsningen på mitt problem.

Endret 16. januar 2007 av Slettet+142

[Jesper Karsrud]

DU må nok bruke min-height om du vil at elementet skal strekke seg om høyden på elementet med innhold blir høyere enn definert høyde.. Funker vel ikke i IE, dog...

[834HF42F242]

Svært få CSS2-formater fungerer i IE ja.

Endret 17. januar 2007 av neitakk

[Gjest Slettet+142]

takk for svar

 

...men det funket ikke =(

.main#all{
width: 100%;
height: 100%;
min-height: 99%;
//border: black solid;
margin-bottom: 2px;
background-color: #0099FF;

}

.main#midt{
width: 80%;
margin-top: 1px;
margin-left: 5%;
margin-right: 5%;
height: 83%;
min-height: 80%;
margin-bottom: 1px;
padding-left: 5%;
padding-right: 5%;
padding-top: 3%;
padding-bottom: 3%;
//border: inset 1px #E2E2E2;


}

 

noe annet jeg må gjøre? funker min-height uten å endre position til abolute elns?

[Gjest Slettet+142]

så det er ikke engang noen som har et tips eller en annen måte jeg kan sette opp css på?

[Drømmemannen]

Problemet er: Du vil ha minst 80% høyde, men i forhold til hva? Høyde i prosent regnes ut ifra høyden på det omsluttende elementet. Høyden på #all er altså relativ til høyden på body ettersom body-elementet omslutter #all-elementet. Setter du høyden på body-elementet også, og kanskje også html-elementet, så vil det til slutt forhåpentligvis rette seg etter høyden på skjermen (hvis nettleserne støtter det). Les mer her: http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height

Endret 18. januar 2007 av balletryne

[Gjest Slettet+142]

jeg vil ha 80% høyde av .main#all som skal ha 100% av body.. så jeg må altså sette height: 100% på body?

[Gjest Slettet+142]

koman da.. noen må jo vite

[Drømmemannen]

Setter du høyden på body-elementet også, og kanskje også html-elementet, så vil det til slutt forhåpentligvis rette seg etter høyden på skjermen (hvis nettleserne støtter det).

7749296[/snapback]

Har du prøvd å sette 100% høyde på html og body?

[Gjest Slettet+142]

ja, det har jeg gjort.

 

edit:

eller... html var ikke satt til 100%

 

nå virker height på .main#all, men nå får jeg ikke til mellomrom mellom .main#top og .main#belowtop

 

style.css

index.html

Endret 20. januar 2007 av Slettet+142