css Menu tut

Simpel css menu.

we beginnen met de vakken.

#menu {

}

#menu:hover {
}

Nu voegen we de minimale grote en lengte toe

#menu {
min-width:130px;
min-height:33px;
}

#menu:hover {
min-width:130px;
min-height:33px;
}

nu is de minimale lengte 130px en de minimale grote 33px
nu voegen we een leuk kleurtje toe.

#menu {
min-width:130px;
min-height:33px;
background-color:#333333;
}

#menu:hover {
min-width:130px;
min-height:33px;
background-color:eeeeee;
}

en de tekst moet natuurlijk in het midden komen.

#menu {
min-width:130px;
min-height:33px;
background-color:#333333;
text-align:center;
}

#menu:hover {
min-width:130px;
min-height:33px;
background-color:eeeeee;
text-align:center;
}

Dus wat hebben we nu gemaakt.
een vakje met een minimale lengte 130px en de minimale grote 33px
met 2 leuke kleurtjes waar de tekst in het midden staat en als je er over heet gaat dat het een ander leuk kleurtje word <3
nu moet alles nog naast elkaar staan
dat doen we met een floa(t)

#menu {
min-width:130px;
min-height:33px;
background-color:#333333;
text-align:center;
float:left;
}

#menu:hover {
min-width:130px;
min-height:33px;
background-color:eeeeee;
text-align:center;
float:left;
}

Nu staat alles leuk naast elkaar met een Leuke mouse over.
Nu moet je er nog op kunnen klikken.
eerst moeten we de div ophalen dat doen we zo

<div id="menu">Dit is een coewl Geile menu </div>

nu willen we het uber coewle menu klikbaar maken dat doen we met een javascript functie onlick om alles in de div klikbaar te maken.

we gebruiken deze code

<div id="menu" onclick="location.href=#;" style="cursor: pointer;">

Nu is je heele Link klikbaar

eind resultaat

<html>
    <head>
        <title>titel</title>
    <style>
#menu 
{
    min-width:130px;
    min-height:33px;
    background-color:#333333;
    text-align:center;
    float:left;
}

#menu:hover 
{
    min-width:130px;
    min-height:33px;
    background-color:eeeeee;
    text-align:center;
    float:left;
}
</style>
    </head>
    <body>
<div id="menu" onclick="location.href=#;" style="cursor: pointer;">uber geile klik menu</div>
<div id="menu" onclick="location.href=#;" style="cursor: pointer;">uber geile klik menu</div>
<div id="menu" onclick="location.href=#;" style="cursor: pointer;">uber geile klik menu</div>
    </body>
</html>

En klaar Ons super coewle menu

Heb je ook een demo van hoe het eruit ziet?

http://yibbo.nl/test.php

Als je wil dat er ruimte tussen zit doe je er margin-left:1px; bij

Waarom werk je niet gewoon met a??
a:link {}
etc??

Freestyle schreef:

Waarom werk je niet gewoon met a??
a:link {}
etc??

weet ik niet ik vind dit fijner

leuk, alleen niet xhtml/css-valid. Als je een div meerdere malen gebruik dan doe je dit met een class, niet met een id

voor de mensen die een class willen gebruiken.
inplaats van #menu gebruik je .menu en inplaats van

Nee, .

Jup , sorry stom foutje

Link werkt jammer genoeg niet.