Jump to content
Sign in to follow this  
bernini

CSS prob, 100% height

Recommended Posts

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

Share this post


Link to post
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

Share this post


Link to post

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

Share this post


Link to post

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 ;)

Share this post


Link to post
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.

Share this post


Link to post
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 ;)

Share this post


Link to post

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.. :p)

Share this post


Link to post

Problemet er løst :thumbs: !

 

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!

Edited by baRs

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...