[div/css] Menu even hoog als variabele content - Softwareontwikkeling

maandag 1 mei 2006 12:41

Acties:

.NET Nerd

Topicstarter

Zit met een probleem bij het (her)maken van een site,
Omdat ik probeer alles volgens de laatste webstandaarden te doen heb ik ook mn div kennis weer eens moeten raadplegen.
Helaas kom ik er na wat uurtjes stoeien en zoeken niet uit.
Ik zit met het volgende probleem, ik heb links een menu, daarnaast de content en daarboven een banner.
Simpele situatie dus:

code:

................
|   |..........|   <-banner
|   |          | 
|   |          |   <-content
|   |          |
|...|..........|
  ^----------------- menu

nu moet wanneer er relatief weinig content is het menu gewoon de browser hoogte moeten hebbem(100%), maar wanneer er meer content komt moet de hoogte van het menu meegaan met de hoogte van de content.
ik heb nu de volgende code:

Cascading Stylesheet:

.container {
    width: 760px;
    height:100%;
}
.menu {
    float: left;
    width: 120px;
    height:100%;
    background-color:green;
}
.banner { height:150px; }
.content    { padding: 0 0 0 120px; }
body        { margin:0px; }

HTML:

<html>
<body>
<div class="container">
    <div class="menu">menu</div>
    <div>
        <div class="banner">banner</div>
        <div class="content">content</div>
    </div>
</div>
</body>
</html>

Probleem bij dit(natuurlijk ingekorte) stuk code is dat, wanneer de content te groot wordt, het wel wordt weergegeven maar dat het menu even hoog blijft al de oorspronkelijke browser hoogte.
Met als gevolg dat wanneer je naar beneden scrollt, je op de plek waar normaal het menu zit, de background-color van de container ziet i.p.v de kleur van het menu.

GC.Collect();

maandag 1 mei 2006 12:49

Acties:

Zoefff

❤ 

Faux colums

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

maandag 1 mei 2006 12:52

Acties:

JHS

Splitting the thaum.

Als eerste zou ik zorgen dat de container wel meerekt met de hoogte van je menu door overflow: auto; toepassen op je container. Daarnaast zou ik niet height gebruiken voor je container, maar min-height, anders zou het wel 's zo kunnen zijn dat de overflow geen achtergrond heeft.

Om je probleem op te lossen zou ik een faux-columns achtige techniek gebruiken: Geef achtergrondplaatje aan je container mee, met repeat-x, welke aan de linkerkant ter breedte van je menu de achtergrond van je menu heeft.

DM!