CSS menu hover werkt niet

Ik ben een css menu aan het maken. De menuitems komen uit de database. Ik wil de <li> items een achtergrond plaatje geven. Dat lukt. Wat niet lukt is dat bij hover of active er een ander achtergrond plaatje wordt getoond. Ik heb er verschillende css handleidingen bij gepakt om te zien of ik een verkeerde schrijfwijze hanteer, maar ik kan niet vinden wat ik fout doe.

CSS:

#menu ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}

#menu ul li {
float: left;
padding: 0;
margin: 0;
}

#menu ul li a:link {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu.jpg);
border: solid 1px black;
}

#menu ul li a:hover {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu1.jpg);
border: solid 1px black;
}

#menu ul li a:active {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu1.jpg);
border: 1px solid black;
}

#menu ul li a:visited {
text-decoration: none;
padding: 2px;
border: solid 1px;
background-image: url(../afbeeldingen/menu.jpg);
}

Grts.

Is het niet zo dat alleen elementen die als block worden weergegeven een achtergrond afbeelding kunnen krijgen? Probeer eens
Cascading Stylesheet:

1 2 3

display:block; /* of */ display:inline-block;

in je hover te zetten.

en als je

#menu ul li a:link {

gewoon houdt op

#menu ul li a {

?

quote:

Bitage schreef op zaterdag 05 juli 2008 @ 23:31:
Is het niet zo dat alleen elementen die als block worden weergegeven een achtergrond afbeelding kunnen krijgen? Probeer eens
Cascading Stylesheet:

1 2 3

display:block; /* of */ display:inline-block;

in je hover te zetten.

Ik heb bij de link ook geen block opgenomen, en daar verschijnt het plaatje wel. Het toevoegen van block bij a:hover is niet de oplossing. Wat dan gebeurt is dat het menuitem 1 px omlaag springt zodra er met de muis over wordt gegaan.
Dus niet de oplossing die ik zoek, namelijk het veranderen van achtergrond plaatje.

quote:

WeeJeWel schreef op zaterdag 05 juli 2008 @ 23:34:
en als je

#menu ul li a:link {

gewoon houdt op

#menu ul li a {

?

Nee, dan verandert er niets.

Suggesties?

Heb je een online voorbeeld? Want dit stuk code klopt wel..

Met je huidige CSS zet je het plaatje op de 'a' elementen, niet op de 'li' elementen. Dat wil je wss ook, maar let er even op.

LI is verder standaard een block element, 'a' is inline. Ik zou zeker je 'a' op block zetten. De :link pseudoclass zou ik weglaten. Verder kun je beter CSS sprites gebruiken (1 plaatje met alle states erin, waarbij je de goede weergeeft middels background-position) ipv verschillende plaatjes (waarbij je de background-image aanpast) omdat je in het laatste geval een 'lag' ziet bij de eerste hover. Het plaatje moet dan nog geladen worden.

Ik heb het menu online gezet. In 1e instantie werkt de hover wel, maar als een link bezocht is, doet de hover het niet meer. Ook als de link actief is, verschijnt niet de juiste achtergrond afbeelding.

http://www.extreemweer.nl/phptest/menutesten.php

grts.

Haal dat hele stuk gewoon weg, nergens voor nodig.
Cascading Stylesheet:

1 2 3 4 5 6

#menu ul li a:visited {   text-decoration: none;   padding: 2px;   border: solid 1px;   background-image: url(../afbeeldingen/menu.jpg); }

EDIT: toch even onderbouwen. Omdat visited een hogere prioriteit heeft dan hover, blijft hij die volhouden

WeeJeWel wijzigde dit bericht 06-07-2008 00:44 (20%)

quote:

Verder kun je beter CSS sprites gebruiken (1 plaatje met alle states erin, waarbij je de goede weergeeft middels background-position) ipv verschillende plaatjes (waarbij je de background-image aanpast) omdat je in het laatste geval een 'lag' ziet bij de eerste hover. Het plaatje moet dan nog geladen worden.

Je bedoelt dat ik background-position: top of bottom kies? En dan de juiste waarde kiezen afhankelijk welke achtergrond ik nodig heb?

Ik ga het eens proberen.

De a:link is trouwens nu a: (maakt overigens geen verschil)

quote:

Haal dat hele stuk gewoon weg, nergens voor nodig.

Goede tip, de hover werkt nu fatsoenlijk. Alleen wil ik graag als een link actief is, dat er het plaatje hetzelfde is als de hover. Wat zou ik nog aan kunnen passen? Ik heb nu:

#menu ul li a {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu.jpg);
border: solid 1px black;
}

#menu ul li a:hover {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu1.jpg);
border: solid 1px black;
}

#menu ul li a:active {
text-decoration: none;
padding: 2px;
background-image: url(../afbeeldingen/menu1.jpg);
border: 1px solid black;
}

Dat is het toch al, met je stuk in :active?

Overigens kun je de rest ook weglaten, dus
Cascading Stylesheet:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

#menu ul li a { text-decoration: none; padding: 2px; background-image: url(../afbeeldingen/menu.jpg); border: solid 1px black; } #menu ul li a:hover { background-image: url(../afbeeldingen/menu1.jpg); } #menu ul li a:active { background-image: url(../afbeeldingen/menu1.jpg); }

quote:

Dat is het toch al, met je stuk in :active?

In de css staat dat hover en active dezelfde afbeelding moeten hebben. Maar als je in het menu een link aanklikt, blijft deze niet 'oranje'.
Active wil toch zeggen dat een link is aangeklikt, en actief is en blijft? En dat wil ik graag tonen dmv een andere achtergrond.
Hoe krijg ik dit gedaan?

Thanx.

Als je hem aanklikt blijft hij gewoon oranje hoor. Geloof dat alleen IE6 hier moeilijk mee deed, maar de fatsoenlijke browsers doen het hier gewoon goed

Ik heb FF 3.0 en daar verdwijnt het oranje weer zodra een link is aangeklikt. Met welke browser kijk jij?

uhm, FF3

Hoe kan dat nou weer?
Bij mij verdwijnt de oranje kleur zodra een link actief is. Bij jou blijft de link wel oranje, ook al ga je met je muis eraf?

Nee, als ik eraf ga wordt hij weer grijs, maar wat wou je dan?

Als een item is aangeklikt, het item een oranje achtergrond krijgt. Zodat je ziet bij welk menu item je bent.

Bij mij (opera) blijft hij ook niet oranje, en dat ook niet gebeuren met een :active (die :active blijft afaik enkel actief tot de volgende pagina geladen wordt, maw met een gewone link krijg je die enkel tijdens de klik te zien).

Wat jij moet doen om het gewenste effect bereiken is per pagina in je "actieve" link een aparte class zetten. Bijvoorbeeld class="actief", en dan
Cascading Stylesheet:

1 2 3

.actief {  background-image: url(../afbeeldingen/menu1.jpg);  }

quote:

Wat jij moet doen om het gewenste effect bereiken is per pagina in je "actieve" link een aparte class zetten. Bijvoorbeeld class="actief", en dan
Cascading Stylesheet:

1 2 3

.actief {  background-image: url(../afbeeldingen/menu1.jpg);  }

Welk object krijgt dan die class? De pagina's komen uit een database.

Je link is voldoende. Dus <a href="..." class="actief">. Of haalt hij de gehele html opmaak ook uit die database?

quote:

onclick="this.className='actief'"

neen, want dat verliest hij direct weer, zodra hij de geklikte link inlaadt

Boeboe wijzigde dit bericht 06-07-2008 01:48 (71%)

onclick="this.className='actief'" oid?

quote:

Je link is voldoende. Dus <a href="..." class="actief">. Of haalt hij de gehele html opmaak ook uit die database?

ik heb een class actief toegvoegd en deze class aan de <a> meegegeven. Maar het functioneert niet.

Misschien moet ik het toch maar met background-position doen.

Moet ik dan bij a:active zoiets zetten:
Cascading Stylesheet:

1 2 3 4

#menu ul li a:active {   background-image: url(../afbeeldingen/menu1.jpg);   background-position: bottom; }

als het oranje natuurlijk de onderste afbeelding is.

Ik heb zowel in de <a> een verwijzing naar class actief gemaakt, als gewerkt met background-position. Maar de actieve link blijft niet oranje.
Cascading Stylesheet:

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

#menu ul li a {   text-decoration: none;   padding: 2px;   background-image: url(../afbeeldingen/menu.jpg);   background-position: top;   border: 1px solid black;   font-family: "Verdana";   font-size: 11px;   color: #000033;   border: 1px solid black;   height: 21px; }   #menu ul li a:hover {   background-image: url(../afbeeldingen/menu.jpg);   background-position: bottom; } #menu ul li a:active {   background-image: url(../afbeeldingen/menu.jpg);   background-position: bottom; } .actief {    background-image: url(../afbeeldingen/menu.jpg);    background-position: bottom; }

PHP:

1	<?php echo "<a class='actief' href=...>"; ?>

Plaatje:


Hoe krijg ik het nu werkend dat een link die actief is ook de juiste 'oranje' achtergrond krijgt??

Grts.