Homepage » Tutorials » HTML & CSS » Menu met semantische html en css (horizontaal)

Menu met semantische html en css (horizontaal)

Info 
Door: pinkyboy Moeilijkheidsgraad: 1/3
Views:34.653Reacties: 18(Bekijken)
  Log in om zelf te reageren
 Waardering:5.3/10 (3 stemmen)

Gerelateerde items

Menu met semantische html en css (verticaal)

Semantiek, wat heb ik er aan?

Inleiding: wat is CSS?




Zoals je aan de titel kunt zien is dit het vervolg op mijn vorige tut. In die tut toonde ik hoe je op een semantische manier een menu kan maken.
Omdat het nogal vaak gevraagd wordt op het forum ga ik hier even tonen hoe je dan een horizontaal menu kan maken.
We keren even terug naar de code van vorige keer, als je deze code niet begrijpt kan je beter even naar de eerste tut kijken aangezien ik er hier geen uitleg meer bij geef.

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<ul id="menu">
<li><a href="#" class="menu">home</a>
<li><a href="#" class="menu">nieuws</a>
<li><a href="#" class="menu">info</a>
<li><a href="#" class="menu">blaat</a>
</ul>


ul#menu {
list-style: none;
width: 100px;
}

ul#menu li {
margin-top: none;
}

ul#menu li a {
color: red;
border: #000 solid 1px;
background: yellow;
display: block;
height: 100%;
width: 100%;
}

ul#menu li a:hover {
background: red;
color: black;
border: #000 solid 1px;
display: block;
}


Om dit menu horizontaal te maken moeten we eigenlijk niet veel doen, we gaan gewoon bij "ul#menu li", de list-items dus, iets nieuw toevoegen, namelijk "display: inline". Dat zorgt ervoor dat de list-items na elkaar worden gezet in plaats van onder elkaar.
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<ul id="menu">
<li><a href="#" class="menu">home</a>
<li><a href="#" class="menu">nieuws</a>
<li><a href="#" class="menu">info</a>
<li><a href="#" class="menu">blaat</a>
</ul>


ul#menu {
list-style: none;
width: 100px;
}

ul#menu li {
margin-top: none;
display: inline;
}

ul#menu li a {
color: red;
border: #000 solid 1px;
background: yellow;
display: block;
height: 100%;
width: 100%;
}

ul#menu li a:hover {
background: red;
color: black;
border: #000 solid 1px;
display: block;
}


Als je dit nu in de browser bekijkt zie je dat het resultaat verschrikkelijk is. Dat komt door de "display: block" die bij de anchors staat. Halen we die weg zijn er geen problemen meer, en hebben we het menu dat we wilden.
De uiteindelijke code:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<ul id="menu">
<li><a href="#" class="menu">home</a>
<li><a href="#" class="menu">nieuws</a>
<li><a href="#" class="menu">info</a>
<li><a href="#" class="menu">blaat</a>
</ul>


ul#menu {
list-style: none;
width: 100px;
}

ul#menu li {
margin-top: none;
}

ul#menu li a {
color: red;
border: #000 solid 1px;
background: yellow;
display: block;
height: 100%;
width: 100%;
}

ul#menu li a:hover {
background: red;
color: black;
border: #000 solid 1px;
display: block;
}


Om dit menu horizontaal te maken moeten we eigenlijk niet veel doen, we gaan gewoon bij "ul#menu li", de list-items dus, iets nieuw toevoegen, namelijk "display: inline". Dat zorgt ervoor dat de list-items na elkaar worden gezet in plaats van onder elkaar.
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<ul id="menu">
<li><a href="#" class="menu">home</a>
<li><a href="#" class="menu">nieuws</a>
<li><a href="#" class="menu">info</a>
<li><a href="#" class="menu">blaat</a>
</ul>


ul#menu {
list-style: none;
width: 100px;
}

ul#menu li {
margin-top: none;
display: inline;
}

ul#menu li a {
color: red;
border: #000 solid 1px;
background: yellow;
height: 100%;
width: 100%;
}

ul#menu li a:hover {
background: red;
color: black;
border: #000 solid 1px;
}


Ziezo, dat was het dan weer, ik hoop dat je er wat aan hebt!

18 reacties
edter Geplaatst op 16-08-2006 om 21:22
Avatar van edter

Regular		 dan moet je de width in ul#menu veranderen/verhogen
Decarlo Geplaatst op 20-05-2006 om 14:44
Avatar van Decarlo

Regular		 ik weet niet in welk browser dit werkt maar in IE krijg ik gewoon alles onder elkaar en in FF krijg ik de eerste twee naast elkaar en daaronder de twee laatste naast elkaar
ruvis Geplaatst op 18-03-2006 om 22:09
Avatar van ruvis

Regular		 Netjes, maar die laatste lijkt me overbodig aangezien dat hij er al instaat ;)

Pagina 1 2 3 4 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be