Hoi!

Ik was me een beetje aan 't verdiepen in het maken van een menu met de nieuwe html5-tag (nav, maar volgens mij doe ik iets niet helemaal goed. Om de één of andere reden krijg ik het menu, wat gemaakt is met een unordered list, niet op display: inline;... geen idee wat ik verkeerd doe, want van wat ik kan zien staat alles gewoon op de goede plek.

Ik bekijk het testbestandje trouwens in Safari 5.0.4., wat volgens mij prima moet werken  Zou iemand heel even willen meekijken om te zien of ik iets grandioos over het hoofd zie? Het is een heel klein stukje code omdat 't me puur om een klein testje ging, en de CSS is nog inline en niet extern:
http://dl.dropbox.com/u/23967/html5%20index.html

Alvast bedankt!

Groet,
Joram

Niemand die een piepklein blikje kan werpen (cola asjeblieft, mét inhoud en antwoord!) naar het html-bestandje?

Misschien float:left; ipv display:inline?

Het is mij niet helemaal duidelijk waarin het resultaat afwijkt van wat je wilt.

Ik moet geen display:inline weghalen in ieder geval

Wat je nu ziet is een groot grijs vlak met een verticale lijst in het midden daarvan. In dat grijze vlak staat nu het woord "hallo", wat ónder het grijze vlak zou moeten staan. En ik gebruik display:inline juist omdat ik een horizontaal menu wil, iets wat nu niet gebeurt om de één of andere reden. Ik zie maar niet waarom de lijst niet horizontaal komt te staan en waarom "hallo" niet onder 't menu staat. Ik heb talloze voorbeelden bekeken, maar ze gebruiken nergens een "clear:both" voor zoiets simpels als een menu

mvg,
Joram

De "display: block;" bij "nav ul li a" is de boosdoener.
In Firefox staat "hallo" trouwens wel in het rode vlak.

Oh... da's vervelend. Als ik die "display:block" weghaal, dan heb ik ook geen hover-effect meer namelijk. Of doe ik daar dan ook iets verkeerd?

Haal de list maar eens weg, dan komt 'ie wel horizontaal! Logisch natuurlijk.

Haal de list weg? Bedoel je "nav ul li"?

Nee!!!! (Die heeft trouwens niet echt zin). De list die je maakt. Ofwel je li tags! Weg ermee!!!!

Eh, als ik je verkeerd begrijp, sorry: maar een Unordered List gebruik je voor een horizontaal menu. Die Ul's en Li's moet ik volgens mij juist laten staan. Dat is de hele functie van een menu toch?

Dit is de standaard html(5) code voor een horizontaal menu:

< nav>
  < ul>
     < li>< a href="#">knopje< /a>< /li>
     < li>< a href="#">knopje< /a>< /li>
     < li>< a href="#">knopje< /a>< /li>
     < li>< a href="#">knopje< /a>< /li>
  < /ul>
< /nav>

Dan kan ik die list toch niet weghalen?

(Bewerkt door joram om 17:26, 19-04-2011)

Een unordered list gebruik je volgens mij voor een verticale lijst. Maar ok, je hoeft mij niet op mijn woord te geloven. Je kunt het uitproberen of b.v. hier kijken: http://www.w3schools.com/html5/tag_nav.asp

Och, nou zie ik 't

Met de "oude" html-variant gebruik je een unordered list voor álle menu's, of ze nu horizontaal of verticaal zijn. Met html 5 gebruik je alléén de nav-tag, en niet de unordered list. Dan kan ik gelukkig makkelijk oplossen door inderdaad de unordered list weg te laten.

Maar dat neemt niet weg dat als ik 't op de "html4" manier wil doen, dat die unordered list juist gebruikt zou moeten worden en dat "display:inline" nou net bedoelt is om deze lijsten horizontaal weer te (kunnen) geven

Mvg,
Joram

Tsja, ach. display heeft natuurlijk weer niets met HTML5 te maken. Maar alles met CSS.

Ik denk dat de meeste coders nog gewoon een unordered list binnen de nav tag gebruiken. In de boeken die ik heb gelezen over HTML5 doen ze dat ook.

Okay, verander de volgorde en verwijder die diplay:block. Dus die met display: inline na de hover

nav {
 margin: 0 auto;
 padding: 0;
 text-align: center;
 width: 100%;
 height: 30px;
 background-color: gray;
}

nav ul {
 margin: 0;
 padding: 0;
 width: 100%
 list-style-type: none;
 background-color: silver;
}

nav ul li a:hover {
 color: red;
}

nav ul li {
 margin: 0 20px 0 0;
 padding: 0;
 display: inline;
}

Met display: block in combinatie met  float: left heb je een mooier en gebruiksvriendelijker hover effect wat je gemakkelijker kan stylen.

Dat dacht ik ook blender. Nu ik Willemijn's linkje naar een html5-menu heb gezien zie ik dat ik, als ik een html5 menu maak, het ook zonder unordered list kan doen en 't wat dat betreft een stuk makkelijker is, maar zoals ik 't altijd geleerd heb met unordered list-menu's, is een display:blok in combinatie met een float:left een stuk praktischer… vandaar dat ik ook zo gek stond te kijken dat m'n menu als verticale list tevoorschijn kwam. Ik begreep er de ballen niet van om 't zo maar even te zeggen

Aan de andere kant, ik begreep ook niet zo goed waarom ik met 't menu zoals ik die heb opgebouwd in 't voorbeeldje, een display:block nodig had om het inactive-state (blauw) van het menu te laten zien, en pas de rode hover-variant als je er met je muis overheen gaat.

De meeste voorbeelden van html4-menu's in combinatie met css2 die ik kan vinden zijn al redelijk oud, en de enige versies die ik kan vinden die écht wat nieuwer zijn, zijn al vaak opgebouwd als html5/css3. Zelfs Listamatic's voorbeelden voelen al redelijk antiek aan

Mvg,
Joram

p.s.: je had inderdaad gelijk Willemijn! Die display:block verwijderen loste inderdaad 't probleem op. Vreemd dat ik die display:block zo vaak tegen kom in horizontale menu's die unordered lists gebruiken. Ik moet er nog maar eens goed induiken om te zien waar dat nou aan lag dan

(Bewerkt door joram om 22:37, 19-04-2011)

Het werkt wel degelijk met display: block en float: left ik heb het resultaat online gezet.

www.x41.nl/joram/  (Je had ook een regeltje niet juist afgesloten bij nav ul)

Een Unordered List is inderdaad niet verplicht binnen een HTML5 nav tag maar wel handig als je bijvoorbeeld later een submenu wilt toevoegen.

(Bewerkt door Blender om 9:17, 20-04-2011)

Daar zat ik ook 'n beetje mee inderdaad. Volgens mij zie ik ook in jouw CSS wat je gedaan hebt en wat ik over 't hoofd heb gezien… die code heb ik even gekopiëerd om met m'n eigen CSS te vergelijken. Ik begon al te twijfelen zeg; ik was er zo zeker van dat ik 't (nagenoeg) goed had gedaan, hehe.

Nu heb ik alleen nog één probleem. Het menu horizontaal zetten gaat nu uitstekend, maar ik krijg 'm nog niet goed gecentreerd. Ik heb de UL-tag een hoogte gegeven zodat ik kan zien waar deze staat... hij heeft namelijk een zilveren kleur ten opzichte van de NAV-tag, die een grijze kleur heeft. Nu staat de UL zélf wel goed in het midden, maar de LI's blijven maar aan de linkerkant geplakt zitten.

Ik heb wel al gezien dat dat komt doordat de linkjes een float:left hebben, maar zelfs met "margin:0 auto" en/of "text-align:center" krijg ik dat menuutje niet goed gecentreerd. Zie ik iets over 't hoofd toevallig?

Mvg,
Joram

p.s.: een geupdate  html-bestandje: http://dl.dropbox.com/u/23967/html5%20index.html

(Bewerkt door joram om 9:48, 20-04-2011)

Ik heb 't eindelijk gevonden!

Nu werkt hij nagenoeg perfect, met het menu netjes gecentreerd én horizontaal.
http://dl.dropbox.com/u/23967/html5%20index2.html

't Enige waar ik een beetje mee zit te stoeien is de hoogte van de LI's, maar goed

en als je aan je nav ul li een line-height meegeeft (waarde van de line-height zetten op de gewenste hoogte van de li) ?

Ja, dat was 'm! Ik moest aan de "nav ul li a" ook nog een padding toekennen om deze goed weer te geven, maar zo werkt 't wel uitstekend

Bedankt allen! (Moxie, jou heb ik al een poos niet meer gezien hier zeg )

Mvg,
Joram