Navigation funktioniert nicht obwohl alles richtig vom Buch abgeschrieben

Hallo,

ich habe mich jetzt Stundenlang mit Contao beschäftigt, Lese derzeit das Buch "Mit Contao Webseiten Erfolgreich gestalten" von Thomas Weitzel und komme nicht bei der Navigation nicht weiter.

Ich wollte eine sogenannte Spritegrafik-Navigation gestalten habe ein Bild erstellt was 850 x 80px groß ist, die einzelnen Menüpunkte sind 113px und habe diesen Code in einen eigens angelegten Stylesheet angelegt Namens NAVIGATION:

HTML-Code:

---

#left .mod_navigation
{
        width:113px;
}

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

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

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

#left .mod_navigation .startseite a,
#left .mod_navigation .startseite a:link,
#left .mod_navigation .startseite a:visited
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat top left;
}

#left .mod_navigation .startseite a:hover,
#left .mod_navigation .startseite a:focus,
#left .mod_navigation .startseite a:active,
#left .mod_navigation .startseite span
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat 0 -40px;
}

#left .mod_navigation .komponente a,
#left .mod_navigation .komponente a:link,
#left .mod_navigation .komponente a:visited
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat -113px 0;
}

#left .mod_navigation .komponente a:hover,
#left .mod_navigation .komponente a:focus,
#left .mod_navigation .komponente a:active,
#left .mod_navigation .komponente span
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat -113px -40px;
}

#left .mod_navigation .module a,
#left .mod_navigation .module a:link,
#left .mod_navigation .module a:visited
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat -226px 0;
}

#left .mod_navigation .module a:hover,
#left .mod_navigation .module a:focus,
#left .mod_navigation .module a:active,
#left .mod_navigation .module span
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat -226px -40px;
}

#left .mod_navigation .leuchten a,
#left .mod_navigation .leuchten a:link,
#left .mod_navigation .leuchten a:visited
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat -339px 0;
}

#left .mod_navigation .leuchten a:hover,
#left .mod_navigation .leuchten a:focus,
#left .mod_navigation .leuchten a:active,
#left .mod_navigation .leuchten span
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat -339px -40px;
}

#left .mod_navigation .anwendungen a,
#left .mod_navigation .anwendungen a:link,
#left .mod_navigation .anwendungen a:visited
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat -452px 0;
}

#left .mod_navigation .anwendungen a:hover,
#left .mod_navigation .anwendungen a:focus,
#left .mod_navigation .anwendungen a:active,
#left .mod_navigation .anwendungen span
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat -452px -40px;
}

#left .mod_navigation .service a,
#left .mod_navigation .service a:link,
#left .mod_navigation .service a:visited
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat -565px 0;
}

#left .mod_navigation .service a:hover,
#left .mod_navigation .service a:focus,
#left .mod_navigation .service a:active,
#left .mod_navigation .service span
{
        background:url (tl_files/schahlLED_Theme/navigation_oben.gif) no-repeat -565px -40px;
}

---

Ich habe jedem Menüpunkt (Seitenstruktur / Eigenschaften) in der CSS-Klasse einen Namen gegeben, ein Modul wurde erstellt Namens Navigation OBEN mit der Eigenschaft: Navigationsmenü und habe in Seitenlayouts Stylesheet (Navigation) und Modul Navigation OBEN aktiviert für den Bereich Kopfbereich.

Ich verstehe nicht wo der Fehler liegt, das Bild wird nicht geladen und es kommt lediglich das Menü unformatiert.

Das Menü wollte ich oben und horizontal ablegen jedoch kommt es nicht :-(

Könnt ihr mir helfen und sagen wo der Fehler liegt?

Gruß

Das erste was ich schon nicht verstehe, wenn jeder Menüpunkt 113px breit werden soll, warum machst du die ganze Navigation auch nur 113px Breit? Die Breite der Menüpunkte wird entweder durch die LIs bestimmt, den Links oder dem innenliegenden Span Element (als Block Element Deklariert).

Wenn Background Images nicht geladen werden die Pfade noch mal überprüfen, im CSS Files selbst sind die Pfade etwas anderes als würdest du ein Bild direkt im HTML Dokument als IMG aufrufen. In der Regel liegt das CSS Files in "system" und nicht im Root wo die Index.php liegt also musst du den Pfad entsprechend umleiten mit "../tl_files........".

Ansonsten Hilft auch mal ein kurzer Blick in den Quellcode mit Firebug oder den Google Dev Tool um herauszufinden ob die entsprechenden Klassen und IDs im Dokument überhaupt vorliegen, dann tut man sich wesentlich leichter.