Het probleem is dat een <li>-tag een block-tag is.
Daardoor zullen alle items onder elkaar staan en krijg je dus een verticaal menu.
Daar heb ik 2 oplossingen voor gevonden:
1. De li-tags de style display: inline; meegeven
2. De li-tags de style float: left; meegeven.
Bij 1 heb ik het probleem dat ik de <a>-tag die er in genest zit niet display: block kan meegeven (zodat ik width en height kan gebruiken in de <a>-tag) omdat de li-tag dan ook weer een blockelement wordt.
Bij 2 is het probleem dat het menu links komt te staan, en ik wil hem gecentreerd hebben.
Ik hoop dat jullie dit verhaal een beetje kunnen volgen (ik weet dat ik soms onduidelijk kan schrijven;-))
Weet iemand hier een oplossing voor?
Velen zullen blij kijken bij het zien van deze code, want dit is toch wat we al heel de tijd proberen? Nou nee, dat is het niet. DIV is kort voor division, een sectie, een gedeelte. Het is bedoelt om verschillende elementen te groeperen. Dit betekent dus niet dat je geen divs moet gebruiken, in de originele broncode van mijn bedrijf staan ze ook, zie hieronder:
...
Moet toegeven dat die code ook nog niet optimaal is, maar dat komt binnenkort goed. Nu, kijk eens naar de website van dit webdevelopmentbedrijf, ziet de <h2 /> er uit als een 'gewone' <h2 />?
Inderdaad niet. Dit komt door het gebruik van CSS. Met CSS kun je namelijk elk element stylen, niet alleen divs.
Zo kun je voor je navigatie een lijst gebruiken (en kijk nog maar eens, dat horizontale menu zonder rare bolletjes is echt een lijst!), omdat het eigenlijk een lijst met links is. Op deze manier werkt alles ook goed in speech browsers, textbrowsers en als we IE (Internet Explorer) even in quirksmode zetten, ook nog eens crossbrowser.
Nu duidelijk?;-)
[edit]en als ik div's zou gebruiken zou ik niet deze code gebruiken. Maar meer zoiets:
Helemaal geweldig!
Hier heb je helemaal gelijk in: code === kunst:P
Alleen 1 nadeel: Je zult iedere keer als je een item toevoegd of verwijdert de width van het ul-element moeten veranderen.
Als je daar nog een oplossing voor weet is het helemaal perfect!, maar anders pas ik dat wel gewoon iedere keer aan:O
@Jan Koehoorn: Naja, dat maakt dan eigenlijk ook niet zoveel uit want ik ben van plan om het menu dynamisch te genereren uit een database, en als ik dan gewoon het aantal menuitems tel en dat keer Xaantal px doe en dat in de width zet is het ook perfect.
@Djemo: Ik geloof niet dat je mijn post boven de eerste post van Jan hebt gelezen.
@Jan Koehoorn: Naja, dat maakt dan eigenlijk ook niet zoveel uit want ik ben van plan om het menu dynamisch te genereren uit een database, en als ik dan gewoon het aantal menuitems tel en dat keer Xaantal px doe en dat in de width zet is het ook perfect.
Wat nog zou kunnen, is dat je de <ul> in een div zet die text-align: center heeft. Niet uitgeprobeerd, maar is een test waard.
Hiermee geef je de ul en li's ook een horizontale lijn. ;)
Heb t uit de bron van een site gekopieerd waar ze dat gebruikte. Ik weet niet of alles nodig is, maar het zal. :P
