[css] Hoe moet ik de submenu's positioneren?

[Onbekend]

Ik ben bezig met een website waarvan de layout er ongeveer zo uit ziet:

De vereenvoudigde html-code is dit:

HTML:

    <div>
        <div>
            <div>
            <div></div>
                Titel
            </div>
            <div><div></div></div>
        </div>
    </div>

    <div>
        <div>
            <div>
            <div></div>
                <a>Menu1</a> 
                <a>Menu2</a> 
                <a>Menu3</a>
            </div>
            <div><div></div></div>
        </div>
    </div>

    <div>
        <div>
            <div>
            <div></div>
                Content
            </div>
            <div><div></div></div>
        </div>
    </div>

De vele divjes zijn nodig vanwege het positioneren van de content. Ze staan allemaal relatief t.o. elkaar. De menu items worden gecentreerd weergegeven, en bij verschillende schermresoluties verschuiven ze dus mee.
Nu wil ik dus voor zo'n menu item een submenu laten weergeven die daaronder weergegeven moet worden. De volgende code moet dus *ergens* tussengevoegd moeten worden.

HTML:

<div>
        <div>
            <div>
            <div></div>
                <a>Optie1</a> 
                <a>Optie2</a> 
                <a>Optie3</a>
            </div>
            <div><div></div></div>
        </div>
    </div>

Maar nu heb ik het probleem dat ik het submenu niet goed gepositioneerd krijg.
Als ik de code voor of na <a>Menu3</a> zet, dan gaat bij position: absolute het gehele menu naar de linker kant, en als ik position: relatieve maak wordt de hele layout verpest.
Als ik het menu onderaan m'n html zet, is het moeilijk om te bepalen waar precies het menu item zit waar de gebruik op heeft geklikt zodat ik het submenu niet precies daaronder kan positioneren.

Ik heb van alles zitten zoeken en proberen (behalve tables), maar geen werkende oplossing gevonden die ik kon gebruiken. Het grootste probleempunt is dat ik geneste divs heb, en óók gecentreerde menu items.

Wie heeft raad?

[MuisM4t]

offtopic:
Het is sowieso netter om je menu in een unordered list te zetten en je titel in h1 headers .

[ Voor 26% gewijzigd door MuisM4t op 28-02-2009 18:47 ]

[CH4OS]

Suckerfish is volgens mij wat je zoekt. Anders kijk je even op de site van André.

[vriesdude]

Ik zie een heleboel divjes waarvan de meeste mij overbodig lijken,
volgens mij zou je met onderstaande code al makkelijk kunnen bereiken wat jij wilt.

code:

<div style="width: 100px; margin-left: auto; margin-right: auto;">
  title
</div>
<div style="width; 200px; margin-left: auto; margin-right: auto;">
  <div style="float: left;"> 
    menu1 
  </div>
  <div style="float: left;"> 
    menu2 
  </div>
  <div style="float: left;"> 
    menu3 
    <div position: absolute;">
       optie 1 <br />
       optie 2 <br />
       optie 3 <br />
    </div>    
  </div>
</div>
<div style="width: 100px; margin-left: auto; margin-right: auto;">
  content
</div>

_{/edit
en ook wat MuisM4t zegt}

[ Voor 3% gewijzigd door vriesdude op 28-02-2009 19:01 ]

[NiteSpeed]

MuisM4t schreef op zaterdag 28 februari 2009 @ 18:33:

offtopic:
Het is sowieso netter om je menu in een unordered list te zetten en je titel in h1 headers .

Ik haal het even uit de offtopic, want zoveel div's is echt niet gezond meer. Dit kan makkelijk met een paar UL's en een suckerfish menu.

[NMe]

Ik heb wat interessante leeskost, met dank aan mophor. Oude tekst, nog steeds relevant.
http://www.rikkertkoppes.com/thoughts/smurf-language/

Bovendien is het antwoord op de vraag al gegeven, dus lichtelijk offtopic behulpzaam doen is niet verboden.

[ Voor 25% gewijzigd door NMe op 28-02-2009 19:27 ]

[Verwijderd]

En dan nog een passend filmpje:

[Onbekend]

Ik krijg het submenu nog niet goed geïmplementeerd, maar ik ga de gegeven tips allemaal uitproberen totdat het werkt.


Voor de discussie over het aantal divjes heb ik hier een voorbeeld online gezet:
http://tweakers.awardspace.com/
Als het met minder divjes kan hoor ik het graag.

[NMe]

Je omvat zowat elk element in drie verschillende containers. Daarnaast heb je blijkbaar niet goed naar mijn linkje gekeken of niet naar de tips hierboven geluistert, want nog steeds is het enige block level element dat je gebruikt de div.

[ReseTTim]

Onbekend schreef op zaterdag 28 februari 2009 @ 18:31:
Ik ben bezig met een website waarvan de layout er ongeveer zo uit ziet:
[afbeelding]
De vereenvoudigde html-code is dit:

HTML:

    <div>
        <div>
            <div>
            <div></div>
                Titel
            </div>
            <div><div></div></div>
        </div>
    </div>

    <div>
        <div>
            <div>
            <div></div>
                <a>Menu1</a> 
                <a>Menu2</a> 
                <a>Menu3</a>
            </div>
            <div><div></div></div>
        </div>
    </div>

    <div>
        <div>
            <div>
            <div></div>
                Content
            </div>
            <div><div></div></div>
        </div>
    </div>

ok, ffies een voorbeeld wat voor jou voldoende is

HTML:

<body>

<div id="container">
    <div id="header"></div>
    <div id="navigation"></div>
    <div id="content">
        <div class="Top"></div>

        <div class="Bottom"></div>
   </div>

</div>
</body>

meer heb je echt niet nodig..
gewoon gebruik maken van padding, margin enz..

btw als je header statisch wordt dan kan je die gehele kader beter als een afb. opslaan.. zoveel kb zal dat niet zijn..

edit:

html aangepast

[ Voor 14% gewijzigd door ReseTTim op 28-02-2009 20:53 ]

[Onbekend]

Ik denk dat ik er uit ben.
Het worden gewoon tables voor de layout, want anders blijft de layout niet goed zitten.

Ik heb de bovenstaande links gelezen en de voorbeelden uitgeprobeerd, maar die divs voor de layout gaan niet goed i.c.m. de <ul> en <li>-tags. Ze komen namelijk onder elkaar te staan, en dat is niet de bedoeling.

[Verwijderd]

Dan moet je de <li> een float: left; geven, dan staan ze naast elkaar. Tabellen gebruiken voor je layout is echt not-done. Wat is er mis met de opbouw van ReseTTim?

[Onbekend]

Het punt is dat ik nu de divs zo heb, dat ze zichzelf aanpassen aan de grootte van de box.
In de opbouw van ReseTTim zitten <div class="Top"> en <div class="Bottom"> op het zelfde niveau, terwijl ik dat niet heb.
De div die ik daar omheen heb, is met margins left en rigt op auto in het midden gepositioneerd, maar de <div class="Top"> en <div class="Bottom"> zitten op een negatieve positie t.o. deze div. Het gevolg is dat het het geheel niet netjes in het midden staat, maar een stukje te ver naar links. Om dat op te lossen heb ik er een div omheen gezet waarvan ik de padding heb aangepast.
Vandaar dat ik zoveel divjes gebruik.

Op het moment dat ik object met style="float: left;" er in zet, wordt alles links uitgelijnd. Ook de divs waar ze in zitten. Als ik dat niet doe, komen de <li></li> onder elkaar te staan.

[NMe]

Wat je nu doet is een zwaktebod. Je hebt waarschijnlijk ooit iemand horen roepen dat tables slecht zijn en nu gebruik je voor alles wat los en vast zit een div. Nou lukt het niet, en is het eerste wat je wil terugstappen op tables? Da's meteen het andere uiterste.

Ik denk dat je jezelf een groot plezier gaat doen als je nog eens een keer na gaat lezen hoe het centreren van divs precies werkt, en hoe je ervoor zorgt dat list items worden weergegeven zoals jij wil in plaats van onder elkaar. Tables gaan dat niet voor je oplossen.