menu hover in css

float: left;

En jawel....dat was hem!

Jezpur DANK!

Dan ken je én float én display niet. [google]Google[/google] er maar wat over, float en display verschillen namelijk enorm. Je moet float: left; wel i.c.m. met een vaste breedte gebruiken, anders werkt het niet.

Inderdaad....helemaal nieuw in floats en css.
Heb mijn (foutieve) uitspraak van hierboven verwijderd. (edit)

Je hebt gelijk: ook met de display bleef ie goed werken.

Ik wilde dat hover-effect voor elkaar krijgen zonder javascript. Ik had lang zitten prutsen. Die display: block; die heb ik gebruikt omdat die <a> verder leeg waren. Zonder die display kreeg ik mn achtergrondje nog niet te zien.

Mooi. Misschien slim om nog wat meer over [google]CSS float[/google] en [google]CSS display[/google] te lezen? :) Je kunt er een hoop mee; zeker als je straks ingewikkelde lay-outs gaat omzetten naar een HTML opbouw met divs, zul je float veel nodig hebben.

@Jezpur. Dank. ben inmiddels aardig opgeschoten. Heb veel gehad aan deze tut:

http://www.subcide.com/tutorials/csslayout/index.aspx

Maar nu doet mn menuutje het nog niet helemaal zoals ik wens. Het 'hover'-effect werkt helemaal goed. Maar eigenlijk zou ik nu nog willen dat de link 'opgelicht' blijft zolang de gebruiker op die pagina is. Zodat ie aan de menu-balk kan zien waar hij zich bevindt.

Hoe doe ik dat? Ook gewoon in css? Of moet er dan toch javascript aan te pas komen?

Dit heb ik:

In de html:

<a id="menu1" href=""></a>
<a id="menu2" href="werkwijze/"></a>
<a id="menu3" href="prijzen/"></a>

En in de css:

#menu1 {
width: 67px;
height: 25px;
display:block;
float:left;
background-image: url(img/menu_top_home.jpg);
}

#menu1:hover {
background-image: url(img/menu_top_home_h.jpg);
}

#menu1:active {
background-image: url(img/menu_top_home_h.jpg);
}

#menu2 {
width: 107px;
height: 25px;
display:block;
float: left;
background-image: url(img/menu_top_werkwijze.jpg);
}

#menu2:hover {
background-image: url(img/menu_top_werkwijze_h.jpg);
}

#menu2:active {
background-image: url(img/menu_top_werkwijze_h.jpg);
}

Ik zou willen dat wanneer de gebruiker in 'werkwijze' is, dat dan ook de 'hover'-image getoond wordt...

Je zou moeten kijken of de pagina waar men zich op bevindt de pagina is waar die link naartoe gaat. Van de hover maak je dan ook nog een aparte CSS-class, die je aan de link toekent als die pagina actief is.

.....dat betekent toch een javascriptje? Of kan dit in css?

PHP. Check per link of je op die pagina bent. Zo ja, geef hem een class="active".
Zet in je CSS dit i.p.v. de :hover

#menu1:hover,
#menu1 .active {
background-image: url(img/menu_top_home_h.jpg);
}

Hebbes! Nou ja zeg. Moest verdorie 5x lezen voor ik begreep wat je advies betekende!

Het is vrijdag! ;-)

Maar hij doet het helemaal nu!