Menü hover / active

  • Hallo zusammen. Ich habe eine Homepage basierend auf Joomla 2.5 erstellt. Das Hauptmenü liegt unter dem Headerbild!


    Ziel ist es, dass wenn man ein Menüpunkt anklickt, der Hintergrund eine andere Farbe erhält.


    Ist active da nicht der richtige Befehl? Unter hover funktioniert es.


    Meine css sieht so aus:




    der eingebundene Part in der Index lautet:




    Könnt ihr mir helfen?


    ... und so siehts aus: http://www.stephanrohling.com/joomla/

  • Erstmal hast du ja für active und hover die gleiche Hintergrundfarbe, da kann sich also nichts ändern.
    Meinst du mit active vielleicht den Menupunkt auf dem man sich gerade befindet?
    Der CSS-State :active bezeichnet nur den Zustand wenn der Mauszeiger sich auf dem Link befindet und die linke Maustaste gedrückt ist. Er hat nichts damit zu tun, ob der Link zufällig zu dem Menupunkt gehört auf dem man sich gerade befindet. Da musst du eine eigene Klasse für vergeben und dieser die gewünschten Definitionen zuweisen.

    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  • Danke, erstmal.


    Ich stehe jetzt nur auf dem Schlauch weil ich nicht genau weiss, wo ich was verändern muss!?


    Ich kann styles lesen und mir meinen Teil denken aber selber schreiben ist so ein Problem. Meine Arbeit besteht daraus strg + C und strg + v und entsprechende, mir bekannte Änderungen zu erledigen. Dann hörts aber auf.


    Wär jemand so nett und könnte mir detaillierter helfen?


    Danke


    - - - Aktualisiert - - -


    :-(


    - - - Aktualisiert - - -


    so vielleicht?

    Code
    1. #main-navigation .current { background: #999999;}
  • Füge ins CSS an passender Stelle diesen Code ein:

    Code
    1. #main-navigation .menu li.active {
    2. background-color: rgb(153, 153, 153);
    3. }


    Wenn du öfter solche Änderungen machen willst, empfiehlt es sich die Hilfe bei Joomla durchzulesen und CSS und Html zumindest im Zusammenhang zu verstehen.
    Es ist nicht nötig CSS auswendig zu können, dafür gibt es Referenzen, wo man das dann nachlesen kann, aber das Prinzip zu verstehen ist schon hilfreich.

  • Das gehört auch nicht auf das li-Tag, sondern auf das a-Tag:

    Code
    1. [COLOR=#333333]#main-navigation .menu li.active > a {
    2. background:#999;
    3. }

    [/COLOR]

    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  • Musste selber 2x hinschauen, aber dann über Chrome-Devtools gesehen, dass das li kein display:inline-block, sondern display:list-item und height:0 hat. :)

    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  • Noch was: ;-)
    wäre es möglich, - und wenn wie - für alle Menüpunkte im horizontalen Hauptmenü einen Bilderwechsel bei Klick auf einen Menüpunkte im Header zu veranlassen. Sprich, dass wenn man im Menüpunkt "Home" surft, headergrafik-01 angezeigt wird, wenn man unter dem Menüpunkt "Über uns" surft, Grafik headergrafik-02 im Header angezeigt wird, und so weiter???
    wenn ja, Tipps? Hilfen? Danke