[Semantiek] Hoe 2 rijen en 2 kolommen semantisch neerzetten?

[TeeDee]

Voor een nieuwe website heeft de 'designer' bedacht dat het wel mooi stond als we het menu als volgt zouden plaatsen:

menu optie 1	menu optie 2
menu optie 3	menu optie 4

Maar hoe krijg je dit nu fatsoenlijk en semantisch correct in je website? Een simpele list ligt het meest voor de hand.
Voorbeeld:

HTML:

<ul id="nav">
    <li id="nava">menu optie 1</li>
    <li id="navb">menu optie 2</li>
    <li id="navc">menu optie 3</li>
    <li id="navd">menu optie 4</li>
</ul>

Als CSS hebben we dit:

Cascading Stylesheet:

#nav li {
    float:left;
    list-style-type:none;
}
#navc {
    clear:left;
}

Dit geeft in FireFox het gewenste resultaat. Alleen Internet Explorer 6, of 7 dit ook doet kan ik hier nog niet testen, komt met het volgende resultaat op de proppen:

menu optie 1	menu optie 2	menu optie 4
menu optie 3

De 'clear:left;' op #navc wordt inderdaad correct getoond, alleen staat #navd netjes achter #navb in plaats van achter #navc.

Als ik op #navd ook een clear:left zet komt het er als volgt uit:

menu optie 1	menu optie 2
menu optie 3
menu optie 4

Hoe kan ik dit het beste oplossen? Gewoon niet te moeilijk doen en helemaal van het gebruik van een list afstappen of is er een andere element wat zich hier beter voor leent?

[moozzuzz]

Clear: right; op de #navb? (zuiver gokje?)

Kan je ze niet inline plaatsen waarbij je stelt dat de <ul> maar 2 <li> breed is?

[TeeDee]

moozzuzz schreef op maandag 02 oktober 2006 @ 15:54:
Clear: right; op de #navb? (zuiver gokje?)

Gedaan, maar er is geen fysieke verandering te zien.

Kan je ze niet inline plaatsen waarbij je stelt dat de <ul> maar 2 <li> breed is?

Que?

Dus:

HTML:

<ul>
<li>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
</li>
<li>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
</li>
</ul>

Of doel je ergens anders op?

[BtM909]

Ik weet 99,99% zeker dat ik een artikel op www.alistapart.com heb gezien, maar kan die niet vinden (betreffende dit onderwerp)

[azteke]

http://www.alistapart.com/articles/multicolumnlists/ misschien?

[TeeDee]

BtM909 schreef op maandag 02 oktober 2006 @ 16:06:
Ik weet 99,99% zeker dat ik een artikel op www.alistapart.com heb gezien, maar kan die niet vinden (betreffende dit onderwerp)

Klopt, ik kon deze ook niet meer vinden.

Azteke schreef op maandag 02 oktober 2006 @ 16:11:
http://www.alistapart.com/articles/multicolumnlists/ misschien?

Bedankt, deze was het inderdaad. Lomp dat ik 'm niet kon vinden daar.

[azteke]

Zoeken op 'list' was genoeg, 1e hit

[Reveller]

BTW: semantisme > semantiek

[TeeDee]

Reveller schreef op maandag 02 oktober 2006 @ 23:23:
BTW: semantisme > semantiek

offtopic:
Je hebt gelijk. Zag trouwens dat er nog wat meer zaken aan de TS / Titel niet helemaal correct waren. Bedankt voor het aanpassen!