Grafiken bei Sprite Nav werden nicht dargestellt

[Labur]

Guten Tag alle miteinander!

Ich hatte vor einigen Monaten mit einer älteren Version von Contao erfolgreiche eine Sprite-Navigation hinbekommen, allerdings scheitere ich gerade kläglich bei einem neuen Projekt und finde den Fehler nicht...

Es geht um folgende Seite: http://defunk-official.de

Das Menü sollte in der linken Spalte befinden. Die Schaltflächen sind alle anklickbar und funktionieren einwandfrei, aber eben ohne die gewünschten Grafiken =(

Der CSS-Code sieht wie folgt aus und ist erstellt nach dem Wiki-Tutorial zu Sprite-Grafiken:

#left .mod_navigation .defunk_news a,
#left .mod_navigation .defunk_news span {
    background-image:url("files/Defunk_Theme/news_button.jpg");
}

#left .mod_navigation a:active {
    background-position:0 -80px;
}

#left .mod_navigation a:hover,
#left .mod_navigation a:focus,
#left .mod_navigation span {
    background-position:0 -40px;
}

#left .mod_navigation a:link,
#left .mod_navigation a:visited {
    background-position:left top;
}

#left .mod_navigation a,
#left .mod_navigation span {
    width:154px;
    height:40px;
    display:block;
    background-repeat:no-repeat;
    text-indent:-3000px;
}

#left .mod_navigation li {
    margin:0;
    padding:0;
}

#left .mod_navigation ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

.mod_navigation {
    width:154px;
}

Ich hoffe ihr könnt mir schnell weiterhelfen, ich sitze schon seit über einem Tag an dem Problem und mache nur kleinere Fortschritte.

MfG

[InitArt]

Du musst in der Seitenstruktur den jeweiligen Seiten eine Klasse zuweisen, dann funktioniert es auch.
Sprich in deinem Fall "defunk_news".

[Labur]

*facepalm*

Erstmal vielen Dank für die schnelle und hilfreiche Antwort!

Ja, ich dachte, das geht über den Seitenalias...
Ok, die Grafik wird jetzt immerhin angezeigt, aber beim Hover- oder Active-Zustand wird die Grafik noch falsch verschoben, bzw. der Hover-Effekt ist gar nicht vorhanden und der Active-Zustand entspricht eigentlich dem, was ich für den Hover-Zustand haben wollte. Wie kommt das denn nun?

Edit: Hover-Zustand habe ich jetzt erreicht mit folgendem Code:

#left .mod_navigation .defunk_news a:hover,
#left .mod_navigation .defunk_news a:focus {
    background-image:url("files/Defunk_Theme/news_button.jpg");
    background-position:0 -40px;
}

Nur den aktiven Zustand bekomme ich weder mit "#left .mod_navigation .defunk_news a:active" nocht mit "#left .mod_navigation li.defunk_news.active" hin.

[planepix]

Ggf. daran, das in deinem CSS erst Hover und active kommen und danach dann a?

LOVE HATE -> http://css-tricks.com/remember-selec...love-and-hate/

[Labur]

a:link und a:visited muss ich ja nicht anfassen, das bleibt da unverschoben. a:hover habe ich grad gelöst, nur noch a:active ist das Problem. wie müsste dann der CSS Code in richtiger Reihenfolge lauten?

[InitArt]

Die Reihenfolge sollte egal sein, es gibt jedoch kein a.active oder dergleichen, lediglich ein span.active.

Gegebenenfalls musst du auch noch die anderen Möglichkeiten einbauen, ich nutze bei mir folgendes:

      > a:hover {  } /* Mouseover */
      > span.active { }  /* Active */
      > span.forward { }  /* redirect is active */
      > a.trail { }  /* subitem is active */

[Labur]

"span.active" funktioniert!
Wunderbar! Vielen, vielen Dank für die superschnelle Hilfe!! =)

Liebe Grüße und noch einen wunderschönen Tag!

P.S.: Das a.trail kann ich auch sehr gut gebrauchen für die Unterseiten! Danke