Background Image Problem bei Navi

html.de-Forum HTML, XHTML & CSS
1

Das Hover Image funktioniert einwandfrei
[HTML]li.item53 a:hover {background:url(…/img/menu-bg.jpg) no-repeat -125px -365px;}[/HTML]Nun, wenn der Link aktiv ist, sieht das ganze so aus:
[HTML]

  • …[/HTML]Die Class active erscheint nur, wenn der Link aktiv ist.

    Wenn ich dem aktiven Link nun auch das Image geben möchte, will das ganze nicht funktionieren. Ich habe es ausprobiert mit [HTML]li.active .item53 a { … }[/HTML]
    allerdings ohne erfolg.

    Hab ihr einen Lösungsansatz für mich?

    • 2

    Hallo,

    laut deinem CSS-Selektor „li.active .item53 a“ befindet sich .item53 innerhalb von .active, was es aber nicht tut. .active und .item53 sind das selbe Element. → li.active a

    Gruß

    3

    Danke schonmal für die Antwort.

    Allerdings haben die verschiedenen Menüpunkte andere BG Bilder, daher muss ich jedes li spezifisch mit seiner Item Nummer ansprechen. In demfalle also .item53
    li.active a würde also nicht funktionieren, da eben jeder Menüpunkt ein anderes BG Bild hat.

    4

    Dann müsstest du es mit einer ID oder mit individuellen Klassen für die Elemente versuchen.

    5

    das aktive li hat auch noch die id „current“

    allerdings funktioniert li#current .item53 a … leider nicht

    6

    Hat sonst keiner evtl. einen Lösungsnsatz?

    7

    Wenn das Element eine ID hat, kannst du es direkt mit „#current a“ ansprechen, da eine ID nur ein Mal im Dokument vorkommen darf.

    8

    allerdings ist ja dann wieder das problem, da in meinem menü jedes listen element ein anderes bg bild hat.

    kann es sein, dass es einfach nicht funktioniert?

    9

    Das ist sicher möglich.

    Ansonsten muss eine, für jedes Menüelement, individuelle ID für den aktiven Zustand her. Das ist vielleicht etwas umständlich, aber funktionieren tut das sicher.
    Bsp.:
    .item53 → .item53active
    .item54 → .item54active

    10

    Bei dem CMS handelt es sich um Joomla. Das heisst ich bin da mit der vergabe der IDs etwas eingeschränkt. Wäre es evtl. möglich den Elementen per jQuery verschiedene IDs zuzuweisen?

    Und dann eben über diese ID dann die class active ansprechen.