CSS prob, 100% height

[bernini]

Hei

 

Sitter her på lan å prøver å mekke en side. Siden har en header (700x300) som står over meny- og innholdsblokkene.

 

<div id="container">
<div id="header"></div>
 <div id="menu"></div>  
 <div id="innhold"></div>
</div>

 

Er blokkene satt riktig opp?

Hvordan kan vi få meny og innhold til gå helt ned (height 100%).

Problemet er at innhold/meny blir 100% + høyden av banneren slik at du må scrolle ned høyden av banneren selv om siden er tom.

Oppsettet ser også helt fryktelig ut i Dreamweaver, men funker i IE og Opera.

Litt dårlig forklart, men håper at noen forstår poenget

 

Her er en avansert grafisk illustrasjon av oppsettet:

 

| Header |

|meny| |innhold | <-- de skal gå 100% ned på siden

 

Takker for svar

 

- gordito&bar

[PT]

Hei

 

Sitter her på lan å prøver å mekke en side. Siden har en header (700x300) som står over meny- og innholdsblokkene.

 

<div id="container">
<div id="header"></div>
 <div id="menu"></div>  
 <div id="innhold"></div>
</div>

 

Er blokkene satt riktig opp?

Hvordan kan vi få meny og innhold til gå helt ned (height 100%).

Problemet er at innhold/meny blir 100% + høyden av banneren slik at du må scrolle ned høyden av banneren selv om siden er tom.

Oppsettet ser også helt fryktelig ut i Dreamweaver, men funker i IE og Opera.

Litt dårlig forklart, men håper at noen forstår poenget

 

Her er en avansert grafisk illustrasjon av oppsettet:

 

| Header |

|meny| |innhold | <-- de skal gå 100% ned på siden

 

Takker for svar

 

- gordito&bar

Ser ut som div'ene er rett plassert, men CSS'en kan knuse det meste...

Post CSS'en her du

[Nervetattoo]

Er jo bare å sette høyden til #container til 100% da vil jo høyden på innhold og meny bestemmes ut i fra container om du bruker prosent.

En annen løsning er jo bare å lage header f.eks 30% høg, og meny/innhold 70%.

[bernini]

body {
background-color: #666666;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
FONT-SIZE: 8pt; 
FONT-COLOR: #666666; 
FONT-STYLE: normal; 
FONT-FAMILY: Verdana, Arial, Serif;
}

#container {
width: 673px;
height: 100%;
}
#header {
position: relative;
background: url(img/hovedtopp.jpg) no-repeat;
width: 673px;
height: 297px;
}
#menu {
position: absolute;
background: url(img/meny_topp.gif) no-repeat #666666;
float: left;
left: 0px;
width: 140px;
font-color: #ffffff;
padding-top: 35px;
}
#innhold {
float: left;
width: 533px;
background-color: #ffffff;
padding-top: 35px;
padding-left: 10px;
height: 100%;
}

#innhold p {
FONT-SIZE: 8pt; 
FONT-COLOR: #666666; 
FONT-STYLE: normal; 
FONT-FAMILY: Verdana, Arial, Serif;
}

 

Første css forsøk, så feil eksisterer nok

[bernini]

Er jo bare å sette høyden til #container til 100% da vil jo høyden på innhold og meny bestemmes ut i fra container om du bruker prosent.

En annen løsning er jo bare å lage header f.eks 30% høg, og meny/innhold 70%.

Headerer må være den størrelsen den er uansett. Header er 673x297.

Det med container har vi prøvd uten hell.

[enden]

Er jo bare å sette høyden til #container til 100% da vil jo høyden på innhold og meny bestemmes ut i fra container om du bruker prosent.

En annen løsning er jo bare å lage header f.eks 30% høg, og meny/innhold 70%.

container til 100% gør denne full høyde, men det som er inni container vil ikke fylle denne hvis de ikke har nok innholdt.

Å sette header til 30% kan bli øggli hvis det kommer noen med stor oppløsning

[Nervetattoo]

Innhold i container vil jo bli 100% av containers høyde om de er satt til 100%.

[kvikks]

html, body {

height: 100%;

}

 

Finnes masse poster ang dette, bruk søkefunksjonen!

[cfenzo]

teh sollution.... :

 

bakgrunnsbilde...

 

lag et bakgrunnsbilde som ser slik ut:

 

| | | (meny|innhold|)

 

og sett den i body, til å repetere y (nedover).. og legg til en bakgrunsfarge for resten av sia...

 

body{

background: url("bildeuri") left top repeat-y #xxxxxx;

}

 

teknikken er bedre forklart i en artikkel på alistapart...

(skal legge til for credits skyld at man kom på tekniken selv lenge før artikkelen på alistapart kom ut.. )

[baRs]

Problemet er løst !

 

Jeg og Gordito jobber om samme side ..

 

Jeg gjorde det litt annerledes: droppet <div id="header"> og la heller inn banneren som bg (no-repeat) i container. meny og innhold blokken paddet jeg 297px ned (like høy som banner) innhold med height 100% (html, body ogsÅ).

 

Takk for all hjelp ..! Min tråd

 

EDIT: Fant ut at metoden over ikke er valid. Gjorde som dere sa! FUNKER!

Endret 1. mars 2004 av baRs