[HTML/CSS] Menu knoppen

Hi,

Ben nog niet echt zo goed in css/html maar weet iemand hoe ik op de site: http://azdin.s2.one2xs.com zegmaar menu knoppen maak?
Zoiets, dat als er over heen gaat dat de kleur anders wordt:
http://i44.tinypic.com/1fvl79.jpg

Thanks

a:hover
{ 
color:yellow;
}

Nu word de tekst kleur geel zodra je met je muis er op gaat staan.

Met een hover. En dan gewoon een background color meegeven

Ja kan iemand de CSS geven Oh ja de hover heb ik nu.
Maar zon menuknopjes, hoe doe ik dat.

Ik heb mijn bericht bewerkt.

Moet de kleur alleen veranderen of het hele plaatje?

Alleen de kleur, maar ik wil dus zon menu in blokjes, en dat heel dat blokje verandert in een andere kleur

<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: black;
border: #000 solid 1px;
background: white;
display: block;
height: 100%;
width: 100%;
}

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

Zoals dit? Nu heb je witte blokken die zwart worden bij een hover. Natuurlijk aanpasbaar.

http://azdin.s2.one2xs.com/#

Raar..

Margin gebruiken.

Desire schreef:

Margin gebruiken.

Jup dat staat er nog niet tussen.

<!DOCTYPE html> 
<html>
<head>
    <title>Azdin: Index</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Azdin" />
    
    <link rel="stylesheet" href="stylesheets/default.css" type="text/css" />
    
</head>
<body>
<div id="container">
    <header>
        <div id="header">
        </div>
    </header>
    
    <nav>
        <div id="nav">    
    
            <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>
        </div>
    </nav>

    <section>
        <div id="section">
                        <p>Welkom op mijn website!</p>
            Welkom op mijn website! Mijn naam is Azdin en ik ben een beginnde websitemaker. Op deze website kan je alles over mij vinden. Gebruik het menu, links, om op andere paginas te komen. Als je nog vragen hebt kan je ze gerust stellen! De website is nog in onderhoud.<br />&nbsp;
        <br><br><br><br><br></div>
    </section>
</div>
</body>
</html>

Dat is mn index nu, iemand die het er ff in kan bouwen?

Drakonfly schreef:

Eerdere citaten tonen

Desire schreef:

Margin gebruiken.

Jup dat staat er nog niet tussen.

Daarom zeg ik het ook
Ik help je wel ff:

ul#menu {
list-style: none;
width: 100px;
margin-top: 10px; //zelf aanpassen
margin-right: 10px; //zelf aanpassen
}

ul#menu li {
margin-top: none;
margin-top: 10px; //zelf aanpassen
margin-right: 10px; //zelf aanpassen
}

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

ul#menu li a:hover {
background: black;
color: white;
border: #000 solid 1px;
display: block;
margin-top: 10px; //zelf aanpassen
margin-right: 10px; //zelf aanpassen
}

Ik weet niet of dit helemaal goed is, maar test maar ff.

toevoeging op 20 maart 2012, 20:08:39:
Owkee dat wil dus ook niet hmm

Hier ook mijn css:

Spoiler tonen

body {
    font-family: Arial;
    background-color: #ED2129;
}
#container { 
    margin: 0px auto; 
        padding: 5px;
    width: 990px; 
    height: auto; 
}
#header {
    width: 990px;
    height: 170px;
    background: url(http://azdin.s2.one2xs.com/header.png);
    color: #000000;
    font-size: 48px; 
    font-style: normal; 
    font-weight: bold; 
    text-decoration: none; 
    text-align: center; 
    text-transform: none; 
}
#nav {
        border: 1px solid silver;
        margin-left: 12px;
    width: 150px; 
        float: left;
        background: white url(../images/header.png) repeat-x;
           
        }    
#nav ul {
    list-style: none;
}
#section {
        border: 1px solid silver;
        margin-right: 12px;
    width: 812px; 
    float: right;
        background-color: white;
        background: white url(../images/header.png) repeat-x;
    text-align: center;   
}
ul#menu {
list-style: none;
width: 100px;
margin-top: 10px; //zelf aanpassen
margin-right: 10px; //zelf aanpassen
}

ul#menu li {
margin-top: none;
margin-top: 10px; //zelf aanpassen
margin-right: 10px; //zelf aanpassen
}

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

ul#menu li a:hover {
background: black;
color: white;
border: #000 solid 1px;
display: block;
margin-top: 10px; //zelf aanpassen
margin-right: 10px; //zelf aanpassen
}

Ik krijg m maar niet goed

En maak van die margin eens padding?

Geen resultaat.
Kijk hier: http://azdin.s2.one2xs.com/

Je ziet dat knopje een beetje scheef staan, hij moet meer naar beneden maar hoe?
(Ook moet dat knopje wat groter)