[CSS] Div achtergrond kan niet over andere?

[macciez]

Is het mogelijk om een DIV een andere achtergrond mee te geven wanneer deze "active" wordt?
Ik heb onderstaande code, maar het lijkt alsof er met geen mogelijkheid een andere achtergrond kan worden meegegeven wanneer deze active wordt.

Cascading Stylesheet:

            #mainmenu a, #mainmenu a:visited {
            float: left;
            display: block;
            font-family: "Lucida Sans Unicode","Lucida Grande",Garuda,sans-serif;
            text-decoration: none;
            color: #444444;
            font-size: 12px;
            text-transform: uppercase;
            height: 28px;
            line-height: 28px;
            padding-left: 15px;
            padding-right: 15px;
            border-right: 1px solid white;
            border-left: 1px solid #ababab;
            background: url('/images/bg_menu.gif') repeat-x;
            }

            #mainmenu .active a,
            #mainmenu .active a:visited 
            {
            background: url('/images/bg_menu_active.png') ;
            color: white;
            margin-top: -7px;
            padding-top: 7px;
            }               

Zodra het menu item active wordt, wordt het item een stukje hoger. Met een kleur als achtergrond is dit geen probleem, maar ik wil natuurlijk iets moois daar hebben (gradient, ronde hoek).
Ik heb inmiddels veel geleerd over CSS in mijn zoektoch hiernaar, echter nog geen concreet antwoord waarom de image gewoon comlpeet genegeerd wordt.
Iemand een idee?

[OkkE]

Het is me niet helemaal duidelijk wat je nu precies wilt doen, maar de bovenstaande CSS heeft alleen betrekking op links (<a>...</a>), niet op de <div> zelf.

-- edit --

Nogmaals gelezen, het probleem is dat de background van de <a> niet veranderd? Een aantal vragen die zo in me op komen;

• Zit de class "active" niet op het zelfde element als #mainmenu? Dit moet op een element daar binnen staan, zoals je de CSS nu hebt.
• Bestaat de image en is het pad er naar goed? Werkt het bijvoorbeeld wel met alleen een andere background-color?

[ Voor 56% gewijzigd door OkkE op 17-02-2009 16:39 ]

[Da Weef]

OkkE schreef op dinsdag 17 februari 2009 @ 16:30:
Het is me niet helemaal duidelijk wat je nu precies wilt doen, maar de bovenstaande CSS heeft alleen betrekking op links (<a>...</a>), niet op de <div> zelf.

Nou, het is mij zelfs helemaal niet duidelijk wat je wilt... Voorbeeld?

Maar crucialer nog, weet je zelf wat je momenteel hebt?

In de CSS zoals hij hier staat declareer je een andere achtergrond voor links binnen elementen met de class active. Classes moet je zelf toewijzen en in de wijze zoals je het nu hebt gedaan moet je het element waarin de link zich bevindt deze class meegeven.

Andere mogelijkheden zijn de class meegeven aan de link:

Cascading Stylesheet:

#mainmenu a.active {}

of andere achtergrond declareren aan een actieve link

Cascading Stylesheet:

#mainmenu a:active {}

[macciez]

Wat ik exact wil is volgende:
Een horizontaal menu heeft 5 items van verschillende lengtes, over de hele achtergrond wordt een achtergrond gezet (repeat-x). Wordt echter een item aangeklikt wordt deze active en moet een andere (hogere) achtergrond krijgen.

In de css voor de div declareer ik alleen de positionering en de grootte.

De aanroep in de code klopt wel, aangezien de andere code in het active stuk wel werkt.
Ook heb ik het pad meerdere keren gecontroleerd en ook met andere images geprobeerd. telkens komt alleen de achtergrond van de 'normale' a, a:visited er te staan. Daarom dacht ik, dat het wellicht niet mogelijk is om een bestaande achtergrond te vervangen voor een active.
Verander ik echter van een image naar alleen een kleur, werkt het weer wel normaal.

Is dit een css regel die ik niet ken?

[Pkunk]

macciez schreef op dinsdag 17 februari 2009 @ 19:33:
Wat ik exact wil is volgende:
Een horizontaal menu heeft 5 items van verschillende lengtes, over de hele achtergrond wordt een achtergrond gezet (repeat-x). Wordt echter een item aangeklikt wordt deze active en moet een andere (hogere) achtergrond krijgen.

In de css voor de div declareer ik alleen de positionering en de grootte.

De aanroep in de code klopt wel, aangezien de andere code in het active stuk wel werkt.
Ook heb ik het pad meerdere keren gecontroleerd en ook met andere images geprobeerd. telkens komt alleen de achtergrond van de 'normale' a, a:visited er te staan. Daarom dacht ik, dat het wellicht niet mogelijk is om een bestaande achtergrond te vervangen voor een active.
Verander ik echter van een image naar alleen een kleur, werkt het weer wel normaal.

Is dit een css regel die ik niet ken?

Als je zegt dat de rest van de css wel werkt dan moet het aan het plaatje liggen. Dus:
- kijk het pad nogmaals na en/of
- kijk of de background-position ervoor zorgt dat het plaatje niet goed gepositioneerd wordt.

[Da Weef]

Timlog schreef op dinsdag 17 februari 2009 @ 19:41:
[...]

Als je zegt dat de rest van de css wel werkt dan moet het aan het plaatje liggen. Dus:
- kijk het pad nogmaals na en/of
- kijk of de background-position ervoor zorgt dat het plaatje niet goed gepositioneerd wordt.

Als de rest van de css binnen de active class wel werkt, moet het inderdaad liggen aan een van de zaken die Tim aanstipt (overigens als je CSS is als hierboven zou background-position geen issue moeten zijn). Hou er hierbij ook rekening mee dat als je op een Linux server host, dat deze hoofdletter gevoelig is.

[OkkE]

macciez schreef op dinsdag 17 februari 2009 @ 19:33:
[...]
Verander ik echter van een image naar alleen een kleur, werkt het weer wel normaal.

Is dit een css regel die ik niet ken?

Als het veranderen van background-color wel werkt, moet het aan de afbeelding liggen. Zou handig zijn wanneer je een werkende testcase online hebt staan.