Horizontaal 100% menu in CSS

Ik probeer een menu te maken zoals op de site van [url=http://www.julyknives.com]July Knives[/url]. Ik krijg het niet voor elkaar om het menu netjes over 100% breedte te verdelen.

Dit is het stukje CSS dat ik als basis heb:

[code:1:c897ef4380]ul.navigatie {
margin : 0;
padding : 0;
text-indent : 0;
border-left : 1px solid #999;
border-bottom : 1px solid #999;
}

ul.navigatie li {
display : inline;
border-top : 1px solid #999;
border-right : 1px solid #999;
}[/code:1:c897ef4380]

En zo roep ik het menu aan in XHTML:

[code:1:c897ef4380]
<ul class="navigatie">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>[/code:1:c897ef4380]

In de mooiste oplossing zou het niet uitmaken hoeveel list-items er voorkomen, maar een stuk CSS dat uitgaat van een x-aantal list-items (in mijn geval 5) zou al geweldig zijn. Als je de breedte van de list-items op 20% gooit, worden ze te breed door de border.

Ik ben een beetje bang dat ik dit alleen met de DOM voor elkaar ga krijgen met een aangepaste versie van het footers artikel op ALA.

Over de DOM gesproken, iemand een goede uitleg daarover? Wat valt wel onder de DOM en wat is iexplore / netscape / etc specifieke code die je niet mag gebruiken? ;]

Tennapel? Help? ;]

waarom knal je het niet in een tabel en geef ja de td's een class?

[quote:d8170bd2c1="eiskoud"]waarom knal je het niet in een tabel en geef ja de td's een class?[/quote:d8170bd2c1]

Verschillende redenen. ;] Table-gebruik op die manier is layout en geen structuur. Ik probeer de huidige webstandaarden te leren en de grondbeginselen daarvan zijn het scheiden van structuur, layout en gedrag. Daarbij degraderen tables met classes niet goed en de list-items perfect. ;]

Kan je bij ul.navigatie geen width: 100% toevoegen of maakt dat geen steek uit...?

[quote:4b6a1e495f="Mirg"]Table-gebruik op die manier is layout en geen structuur.[/quote:4b6a1e495f]

dan kun je toch gebruik maken van id i.p.v. class en die ook toepassen op table en tr?

[quote:c03b2769c2="eiskoud"][quote:c03b2769c2="Mirg"]Table-gebruik op die manier is layout en geen structuur.[/quote:c03b2769c2]

dan kun je toch gebruik maken van id i.p.v. class en die ook toepassen op table en tr?[/quote:c03b2769c2]

Maar dan blijft het layout in plaats van structuur, en dat is nou net niet de bedoeling. Tabellen zijn bedoeld voor het aanbieden van data in tabelvorm, niet voor het bouwen van layout, dat is voor CSS weggelegd.

Het menu heb ik binnen een paar tellen gebouwd met een table, dat is het probleem niet zozeer. Het gaat mij er juist om dat ik het in CSS wil hebben. ;]

Kippewit: Dat maakt inderdaad niks uit. De list-items verspreiden zich dan namelijk niet automatisch over de 100% breedte en de <ul> is sowieso al 100% geloof ik. ;]

Het is een geloofskwestie: kijk voor meer geloofsbelijdenissen en uiteraard heel veel how-to's op www.alistapart.com

Met CSS kun je inhoud en vorm gescheiden houden zodat deze te gebruiken is op je Ericsson p900 en je Palm, in Lynx, de inhoud laten printen of laten voorlezen.

Bovendien kun je van de 500 regels code die je nodig hebt om een menu met rollovers in een tabel met preloaded images er al gauw 450 scharappen door het te doen met CSS.

Daarom 8)

[code:1:00a0e39f7a] <!-- ul.navigatie { margin : 0; padding : 0; text-indent : 0; border-left : 1px solid #999; border-bottom : 1px solid #999; width: 100%; table-layout: fixed }

ul.navigatie li {
border-top: 1px solid #999;
border-right: 1px solid #999;
width: 20%;
display: inline
}

[/code:1:00a0e39f7a]

…en…

[code:1:00a0e39f7a]
<ul class="navigatie">
<li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li><li><a href="#">Menu 4</a></li><li><a href="#">Menu 5</a></li>
</ul>[/code:1:00a0e39f7a]

moet het probleem oplossen…