[css] Hoogte van div regelen

[mosymuis]

Hoi,

Ik ben bezig met een nieuwe site waar ik de layout van frames, maar de eigenschappen van een enkele pagina wil gebruiken. Ik ben nu de laatste dagen al bezig met het rommelen met CSS frames, waar zowat elke site weer andere methoden gebruikt.

Oplossingen als deze waren veel te complex, en daarbij kwam de scrollbar telkens in de problemen zodra ik de breedte van de pagina naar 100% verstelde. Deze code werkte bij mij niet in IE (wel in Mozilla) zodra ik mijn indeling toe ging passen. Ik werk nu hiermee, het stapelen van DIV's dus. Dit werkt crossbrowsing, is verreweg het meest simpel (schone en korte code) en geeft me de mogelijkheid om zowel een header, menu als footer in te stellen.

Ok, nu het probleem; hier zie je wat ik nu heb en wat er mis is. De middelste DIV zou door moeten lopen tot aan de footer, waar hij stopt en verder gaat door te scrollen. Echter, zodra ik "height: 400px;" weghaal dondert hij naar beneden en is het frame-effect weg. Hem vastzetten met "position: absolute/relative" en "bottom: 30px;" werkt ook niet, want dan schiet hij door naar boven en is hij tevens zijn scrollbalk kwijt.

De vraag is dus: hoe houd ik het middelste stuk op zijn plek, afhankelijk van de gebruikte resolutie, dus zonder een absoluut aantal pixels op te geven?

Ik heb al CSS tuturials als deze en deze doorgewerkt maar kom er niet uit hoe ik dit in mijn opzet oplos. Ik heb hier ook gezocht, deze kwam het dichtst bij wat ik wou maar dit hielp ook niet.

[ Voor 4% gewijzigd door mosymuis op 13-01-2004 20:56 ]

[Verwijderd]

Waarom werk je met pixels in de hoogte? en niet in procenten?

Verander:

code:

div.inhoud {
    width: auto;
    margin-left: 215px;
    overflow: auto;
/* deze hoogte moet variabel worden aan de pagina grootte */

    height: 400px;
}

in

code:

div.inhoud {
    width: auto;
    margin-left: 215px;
    overflow: auto;
/* deze hoogte moet variabel worden aan de pagina grootte */

    height: 468px;
}

Dan sluit het midden goed aan op de footer met mijn resolutie: 1024x768
Als je nou met procenten zou werken dan zou je gelijk makkelijk zitten.
Dan hoef je maar 1 site te maken, en anders moet je voor alle resoluties de pixels uitzoeken.

Succes verder, had trouwens nog nooit gehoord van frames in een stylesheet.

[ Voor 85% gewijzigd door Verwijderd op 13-01-2004 21:10 ]

[mosymuis]

Verwijderd schreef op 13 januari 2004 @ 21:02:
Waarom werk je met pixels in de hoogte? en niet in procenten?

Simpel, omdat ik de header en footer op ga maken met graphics, en deze dus vast moeten liggen op een x aantal pixels. De header en footer op pixels en het middenstuk op procenten kan ook niet, omdat het dan niet uitkomt op verschillende resoluties.

[Verwijderd]

Het is maar wat je liever doet toch?
Je hele site aanpassen of alleen je graphics aanpassen.....
Mij lijkt dat laatste toch beter en natuurlijk veel sneller.

[mosymuis]

Verwijderd schreef op 13 januari 2004 @ 21:02:
Dan sluit het midden goed aan op de footer met mijn resolutie: 1024x768
Als je nou met procenten zou werken dan zou je gelijk makkelijk zitten.
Dan hoef je maar 1 site te maken, en anders moet je voor alle resoluties de pixels uitzoeken.

Dat niet alleen, wanneer iemand de site bekijkt in een andere browser of met een extra toolbar klopt dat aantal pixels direct niet meer. Geen optie dus.

Verwijderd schreef op 13 januari 2004 @ 21:12:
Het is maar wat je liever doet toch?
Je hele site aanpassen of alleen je graphics aanpassen.....
Mij lijkt dat laatste toch beter en natuurlijk veel sneller.

Nee, ik wil de header & footer zo klein mogelijk houden, dus enkel met wat grafische elementen erin en anders niets. Als ik het op zou geven in procenten groeit de hoogte van de header & footer naarmate de resolutie kleiner wordt, wat dus tegelijkertijd ruimte afsnoept van het middenframe. Dit wil ik dus ook niet.

Er moet toch een manier zijn om de ruimte tussen de header en footer te bepalen? Om het middenstuk er op een of andere manier tussen te klemmen?

[Verwijderd]

Volgens mij doe je nogal moeilijk met dat stylesheet..heb je verhaal maar vluchtig gelezen dus misschien leg je wel uit waarom je dat gebruikt maar anders zou ik gewone frames gebruiken.
Is een iframe niks?

[mosymuis]

Nee, ik wil nu eens geen (i)frames omdat dat verschillende pagina's worden en waardoor ik niet makkelijk kan linken en kan vernieuwen. Het werkt niet lekker met zoekmachines, mensen kunnen de site zonder het menu kijken, enz enz (meer).

Daarnaast heb ik nu al zoveel mogelijkheden van CSS gezien voor deze toepassing (frames simuleren met div's) dat ik niet geloof dat dit niet kan werken.

[Verwijderd]

Voorbeeldje van header+footer+navbar:

code:

<!-- Anne &love; IE in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <title>Sidebar - Header - Footer [Fixed]</title>
 <style type="text/css">
  /* positioning */
  body{
   margin:0;
   padding:100px 0 50px 150px;
  }
  div#sidebar{
   position:absolute;
   top:0;
   left:0;
   width:150px;
   height:100%;
  }
  div#header{
   position:absolute;
   top:0;
   left:150px;
   width:500%;
   height:100px;
  }
  div#footer{
   position:absolute;
   bottom:0;
   left:150px;
   width:500%;
   height:50px;
  }
  @media screen{
   body>div#sidebar{
    position:fixed;
   }
   body>div#header{
    position:fixed;
    width:100%;
   }
   body>div#footer{
    position:fixed;
    width:100%;
   }
  }

/* layout */
body{
font:80%/1.3 Arial,sans-serif;
}
h1{
margin:0;
padding:.2em .83em;
font-size:1.2em;
font-weight:bold;
}
h2{
margin:0;
padding:.2em 1em .1em 1em;
font-size:1em;
font-weight:bold;
}
p{
margin:0;
padding:.1em 1em;
}
div#header{
background:lime;
color:black;
}
div#sidebar{
background:yellow;
color:black;
}
div#footer{
background:aqua;
color:black;
}
</style>
<!--[if IE]><style type="text/css">
body{
overflow:hidden;
}
div#content{
height:100%;
overflow:auto;
}
</style><![endif]-->
</head>
<body>
<div id="content">
<h1>Fixed sidebar, header and footer</h1>
<p>Content could be placed here...</p>
</div>
<div id="header">
<p>Content could be placed here...</p>
</div>

<div id="sidebar">
<p>Content could be placed here...</p>
</div>
<div id="footer">
<p>Content could be placed here...</p>
</div>
</body>
</html>

Eerdere experimenten kun je hier vinden: http://limpid.nl/lab/css/fixed/

offtopic:
Dit forum heeft 'overflow:auto;' nodig.

[Verwijderd]

/me

Verwijderd schreef op 13 januari 2004 @ 21:02:
Waarom werk je met pixels in de hoogte? en niet in procenten?

Verander:

code:

div.inhoud {
    width: auto;
    margin-left: 215px;
    overflow: auto;
/* deze hoogte moet variabel worden aan de pagina grootte */

    height: 400px;
}

in

code:

div.inhoud {
    width: auto;
    margin-left: 215px;
    overflow: auto;
/* deze hoogte moet variabel worden aan de pagina grootte */

    height: 468px;
}

Dan sluit het midden goed aan op de footer met mijn resolutie: 1024x768
Als je nou met procenten zou werken dan zou je gelijk makkelijk zitten.
Dan hoef je maar 1 site te maken, en anders moet je voor alle resoluties de pixels uitzoeken.

Succes verder, had trouwens nog nooit gehoord van frames in een stylesheet.

Ik heb zeer dankbaar gebruik gemaakt van dit topic en de lay-out voor 99%
overgenomen, máár, wat jij noemt, met procenten werken ipv pixels, is wél
bij mij van toepassing! Menu en inhoud moeten dus de ruimte tussen header
en footer voor 100% opvullen

HTML:

}
div.menu {
    background-color: yellow;
    position: absolute;
    left: 0;
    width: 210px;
    height: 100%;
}
div.inhoud {
    width: auto;
    margin-left: 215px;
    overflow: auto;
    height: 100%;
}

lost dit echter niet op... Kan iemand mij vertellen hoe het wel moet?

position: absolute;

^^ heeft het hiermee te maken? Google levert dus niks op dit 't is ook
al half 7 en de scherpte is er wel een béétje vanaf, maar het moet af!

/me
De vermoeidheid heeft zover toegeslagen, dat ik 100% confused ben

De HEADER en de FOOTER moeten automatisch de ruimte opvullen die de MENU
en INHOUD overlaat... Excuses voor het ongemak

[ Voor 9% gewijzigd door Verwijderd op 15-01-2004 06:44 . Reden: moe... en dan typ je rare dingen ]

[mosymuis]

Verwijderd schreef op 15 januari 2004 @ 06:25:
máár, wat jij noemt, met procenten werken ipv pixels, is wél
bij mij van toepassing! Menu en inhoud moeten dus de ruimte tussen header
en footer voor 100% opvullen
(...)
lost dit echter niet op... Kan iemand mij vertellen hoe het wel moet?

Heb je het hier tegen mij of tegen CRACKIE? Dit is namelijk precies hetzelfde als wat ik wou, en waar dit topic dus om gaat...

[Verwijderd]

/me is erachter gekomen dat dit alles helemaal niet voor hem van toepassing is