[CSS] Non-wrapping horizontale navigatie

Ik heb de volgende structuur voor een navigatie:

[img:1a047e6dce]http://www.radiologic.be/experimental/structuur_navigation.png[/img:1a047e6dce]

  • div#bg_navigation: Een relatief gepositioneerde div, zonder width en met height, zodat hij horizontaal 100% breed komt. Op deze div is een tegelende background gedeclareerd.

  • div#navigation: Een wrapper voor de horizontale ul navigatie. Op deze div wordt een logo als background gezet.

  • ul: De horizontale navigatie zelf. In de li’s zitten de links uiteraard. De list items worden als inline element gedeclareerd, zodat ze horizontaal komen. Op de ul is een white-space: nowrap gedeclareerd, zodat de links niet gaan wrappen wanneer het venster minder breed is dan de navigatie zelf.

Het probleem is nu het volgende. Op de links in de list items wil ik ook een background declareren, en de links een height meegeven. Dit kan enkel wanneer ik de links een display: block meegeef of een float: left. Maar bij float: left gaan de links sowieso wrappen wanneer het venster minder breed is dan de navigatie, of je nu nowrap declareerd of niet. Bij display: block gaan ze verticaal gezet worden.

Hier heb ik een aanzet gedaan, maar ik ben vastgelopen bij het probleem dat ik hier beschrijf. Dus hoe kan ik nu links een height meegeven zodat ze horizontaal blijven en toch niet wrappen?

Staan er a -elementen binnen je <li>? Zo ja, dan kan je de a-elementen een display:block meegeven en daar een height op zetten (of beter, een line-height).

Verder kan je ook overwegen om het logo op de <ul> te zetten, dat scheelt weer een div.

[quote:8e378e0f85="tennapel"]Staan er a -elementen binnen je <li>? Zo ja, dan kan je de a-elementen een display:block meegeven en daar een height op zetten (of beter, een line-height). [/quote:8e378e0f85]

Wanneer ik een display: block meegeef aan de a-elementen in de li-elementen, werkt de height, maar staan mijn links om de één of andere reden onder mekaar, dus block-level. Wat ik eigenlijk niet goed snap, want de li-elementen staan op display: inline.

[quote:8e378e0f85=“tennapel”]Verder kan je ook overwegen om het logo op de <ul> te zetten, dat scheelt weer een div.[/quote:8e378e0f85]

Goed idee. Dat had ik over het hoofd gezien.

Een float: left op je div#navigatie li zetten?

[quote:8f46de23b2="Syndic"]Een float: left op je div#navigatie li zetten?[/quote:8f46de23b2]

Wanneer je elementen gaat floaten gaan deze by default wrappen wanneer er niet voldoende plaats is.

Lezen is idd. ook een kunst :roll: Moet nog ff wakker worden merk ik :wink:

[quote:230a5b4117="Syndic"]Lezen is idd. ook een kunst :roll: Moet nog ff wakker worden merk ik :wink:[/quote:230a5b4117]

Dan zijn we al met twee :slight_smile: Ik ben er pas bij met mijn verstand in de vroege namiddag…

Ik heb even wat getest. De beste methode om het allemaal voor elkaar te krijgen is uiteindelijk de volgende: [code:1:14156ca6eb] ul { padding : 0; margin : 0; list-style : none; min-width: 300px; overflow : auto; border : 1px solid green; }

li {
float : left;
border : 1px solid blue;
}

a {
display : block;
line-height : 300%;
padding : 1em;
border : 1px solid red;
}
[/code:1:14156ca6eb]

De overflow:auto kan je ook vervangen door de easyclearing methode (http://www.positioniseverything.net/easyclearing ) of door een padding-top te gebruiken; het is alleen om ervoor te zorgen dat de background die je op de <ul> zet ook zichtbaar wordt.

De min-width zorgt ervoor dat de boel niet op een volgende regel komt als het browser window te klein is.

[quote:4764a5215e="tennapel"]Ik heb even wat getest. De beste methode om het allemaal voor elkaar te krijgen is uiteindelijk de volgende: [code:1:4764a5215e] ul { padding : 0; margin : 0; list-style : none; min-width: 300px; overflow : auto; border : 1px solid green; }

li {
float : left;
border : 1px solid blue;
}

a {
display : block;
line-height : 300%;
padding : 1em;
border : 1px solid red;
}
[/code:1:4764a5215e]

De overflow:auto kan je ook vervangen door de easyclearing methode (http://www.positioniseverything.net/easyclearing ) of door een padding-top te gebruiken; het is alleen om ervoor te zorgen dat de background die je op de <ul> zet ook zichtbaar wordt.

De min-width zorgt ervoor dat de boel niet op een volgende regel komt als het browser window te klein is.[/quote:4764a5215e]

Heel fel bedankt [b:4764a5215e]tennapel[/b:4764a5215e]! Ik zag even de bomen door het bos niet meer.