Grafiken bei Sprite Nav werden nicht dargestellt

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:

Code:

---

#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

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

*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:

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.

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/

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?

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:

Code:

---

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

---

"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 ;)