[CSS] Background-image (hover) verschijnt niet

[A64_Luuk]

Hoi mensen,

Ik ben nu al een tijdje aan het prutsen (beginner ), en ik krijg het niet voor elkaar m'n menu items, bij hover, te laten veranderen in een plaatje. Hier is de website die ik geheel eigenhandig (niet gehinderd door enige kennis of kunde) heb gemaakt.

Het probleem is dus dat de menuknoppen niet in een plaatje veranderen, wat ze wel horen te doen. Tenminste, dat heb ik ze in CSS verteld, en verder luisterd de website vooralsnog aardig naar het CSS document.

code:

#leftPanel li:hover {
    background-image: url(images/1.png);
    cursor: pointer;
    background-repeat: no-repeat;
}

Verder heeft de website van mijn broertje () een vergelijkbaar systeem, en daar werkt ie wel. Nou ja, vergelijkbaar... Voor zover wij zien is het hetzelfde, het doet het alleen niet.

Ik ben heel benieuwd hoe dit op te lossen valt... Mijn dank zou groot zijn _/-|o_

Luuk

[RobIII]

Begin eens met het correct nesten van elementen. Binnen een li zijn helemaal geen paragraphs of h3's toegstaan en een h3 in een anchor ook weer niet.

Verder vind ik je classes nogal verwarrend (leftpanel/rightpanel terwijl ze boven en onder staan). Sowieso is het niet verstandig je classes te noemen naar "hoe ze er uit zien". Noem ze beter "menu", "header", "footer", "content", "subnav", whatever.

[ Voor 46% gewijzigd door RobIII op 28-01-2010 21:49 ]

[kaesve]

een paar seconden rondklooien in firebug doet wonderen.. hint: kijk nog eens goed naar de url ;D

[A64_Luuk]

kaesve schreef op donderdag 28 januari 2010 @ 21:47:
een paar seconden rondklooien in firebug doet wonderen.. hint: kijk nog eens goed naar de url ;D

Voor zover ik weet klopt die?

code:

background-image: url(images/1.png);

Dit is toch een goede manier om naar dit plaatje te verwijzen? Of bedoel je wat anders?

RobIII schreef op donderdag 28 januari 2010 @ 21:46:
Begin eens met het correct nesten van elementen. Binnen een li zijn helemaal geen paragraphs of h3's toegstaan en een h3 in een anchor ook weer niet.

Verder vind ik je classes nogal verwarrend (leftpanel/rightpanel terwijl ze boven en onder staan). Sowieso is het niet verstandig je classes te noemen naar "hoe ze er uit zien". Noem ze beter "menu", "header", "footer", "content", "subnav", whatever.

Daar wees mijn broertje me inderdaad ook al op. Het probleem is dat k begonnen was met een left/right indeling, en hem daarna spelenderwijs met CSS boven/onder heb gemaakt, maar de namen niet gewijzigd. Begrijp goed dat het verwarrend is.


PS. De <h3> en <p> binnen de <li> kwamen gewoon door de validator, al had ik er ook mijn twijfels bij

[RobIII]

A64_Luuk schreef op donderdag 28 januari 2010 @ 21:54:
[...]

Voor zover ik weet klopt die?

code:

background-image: url(images/1.png);

Dit is toch een goede manier om naar dit plaatje te verwijzen? Of bedoel je wat anders?

Het pad klopt niet. Het is relatief aan de locatie van je css file. Dus als je stylesheet in /css staat en je afbeeldingen in /images dan dien je /images/1.png (absolute url) te gebruiken of ../images/1.jpg (relatieve url).

[ Voor 9% gewijzigd door RobIII op 28-01-2010 21:56 ]

[A64_Luuk]

RobIII schreef op donderdag 28 januari 2010 @ 21:55:
[...]

Het pad klopt niet. Het is relatief aan de locatie van je css file. Dus als je css in /css staat en je images in /images dan dien je url('/images/1.png') te gebruiken of url('../images/1.jpg').

Verhip *controleert* het werkt...

Mijn dank ik groot, echt zoiets simpels om over het hoofd te zien


En nu gauw dat gedrogt offline halen

[crisp]

RobIII schreef op donderdag 28 januari 2010 @ 21:46:
Begin eens met het correct nesten van elementen. Binnen een li zijn helemaal geen paragraphs of h3's toegstaan

quote: http://www.w3.org/TR/html401/sgml/dtd.html

<!ELEMENT LI - O (%flow;)* -- list item -->

LI mag dus zowel inline- als blocklevel elementen bevatten

en een h3 in een anchor ook weer niet.

dat dan weer niet inderdaad

[ Voor 13% gewijzigd door crisp op 28-01-2010 22:03 ]

[RobIII]

crisp schreef op donderdag 28 januari 2010 @ 22:02:
LI mag dus zowel inline- als blocklevel elementen bevatten

Ik gebruik het ~1000 keer op een dag
Tijd voor koffie

[ Voor 4% gewijzigd door RobIII op 28-01-2010 22:09 ]