Navigation (Sprite) ist nicht sichtbar

**flickflack** · 03.02.2013, 12:31

Hallo,

ich habe eine horizontale Navigation mit Grafiken erstellt.
Leider ist diese im Frontend nicht sichtbar.
Woran liegt das?

**tblumrich** · 03.02.2013, 12:42

Hi.

Wo soll deine Spritegrafik denn eingebunden sein?
Deine <a> in der Navigation haben doch gar kein background Attribut.

Gruß
Thomas

**flickflack** · 03.02.2013, 12:51

Die Spritegrafik habe ich über css eingefügt

Code:

#header .mod_navigation {
    width:600px;
}

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

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

#header .mod_navigation a, #header .mod_navigation span {
    height:45px;
    display:block;
    text-indent:-3000px;
}

#header .mod_navigation .startseite a, 
#header .mod_navigation .startseite a:link, 
#header .mod_navigation .startseite a:visited {
    background:url(/tl_files/twoanytime/nav.png) no-repeat top left;
}

#header .mod_navigation .startseite a:hover, 
#header .mod_navigation .startseite a:focus, 
#header .mod_navigation .startseite a:active, 
#header .mod_navigation .startseite span {
    background:url(/tl_files/twoanytime/nav.png) no-repeat 0 -45px;
}

#header .mod_navigation .vita a, 
#header .mod_navigation .vita a:link, 
#header .mod_navigation .vita a:visited {
    background:url(/tl_files/twoanytime/nav.png) no-repeat -120px 0;
}

#header .mod_navigation .vita a:hover, 
#header .mod_navigation .vita a:focus, 
#header .mod_navigation .vita a:active, 
#header .mod_navigation .vita span {
    background:url(/tl_files/twoanytime/nav.png) no-repeat -120px -45px;
}

#header .mod_navigation .media a, 
#header .mod_navigation .media a:link, 
#header .mod_navigation .media a:visited {
    background:url(/tl_files/twoanytime/nav.png) no-repeat -240px 0;
}

#header .mod_navigation .media a:hover, 
#header .mod_navigation .media a:focus, 
#header .mod_navigation .media a:active, 
#header .mod_navigation .media span {
    background:url(/tl_files/twoanytime/nav.png) no-repeat -240px -45px;
}

#header .mod_navigation .galerie a, 
#header .mod_navigation .galerie a:link, 
#header .mod_navigation .galerie a:visited {
    background:url(/tl_files/twoanytime/nav.png) no-repeat -360px 0;
}

#header .mod_navigation .galerie a:hover, 
#header .mod_navigation .galerie a:focus, 
#header .mod_navigation .galerie a:active, 
#header .mod_navigation .galerie span {
    background:url(/tl_files/twoanytime/nav.png) no-repeat -360px -45px;
}

#header .mod_navigation .kontakt a, 
#header .mod_navigation .kontakt a:link, 
#header .mod_navigation .kontakt a:visited {
    background:url(/tl_files/twoanytime/nav.png) no-repeat -480px 0;
}

#header .mod_navigation .kontakt a:hover, 
#header .mod_navigation .kontakt a:focus, 
#header .mod_navigation .kontakt a:active, 
#header .mod_navigation .kontakt span {
    background:url(/tl_files/twoanytime/nav.png) no-repeat -480px -45px;
}

**tblumrich** · 03.02.2013, 13:00

Ah, ja. Deswegen sieht man in Firebug nichts.

Wie mir scheint hast du deinen Seiten gar keinen Klassennamen vergeben.

Gruß
Thomas

**flickflack** · 03.02.2013, 13:06

ja stimmt, mein Fehler

Das Problem besteht leider trotzdem

**tblumrich** · 03.02.2013, 13:17

Im CSS fehlt bei den Pfaden zur Grafik ein vorangestelltes Slash.

Seltsamerweise unterscheidet sich der oben gepostete CSS Code von dem, der auf der Seite ausgegeben wird. Oben fehlen die Anführungsstriche und im Code der Slash vorneweg.

Gruß
Thomas

**flickflack** · 03.02.2013, 13:43

Das erklärt sich mir jetzt auch nicht.
Habe mir die CSS-Zeile mal per FTP gezogen und dort werden auch keine Anführungsstriche angezeigt.

**plastiko** · 03.02.2013, 14:22

Da sind keine Anführungsstriche in den Background-url (auch wenn Firebug sie anzeigt). Das ist schon OK.
Die richtige url für background sollte so aussehen:

Code:

../../tl_files/twoanytime/nav.png

#header .mod_navigation a, #header .mod_navigation span braucht unbedingt eine passende Angabe zu width.

**flickflack** · 04.02.2013, 05:30

Habe eure Tipps jetzt umgesetzt und selber noch etwas herumprobiert, leider ohne Erfolg.
Der CSS-Code sieht nun so aus:

Code:

#header .mod_navigation {
    width:600px;
}

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

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

#header .mod_navigation a, 
#header .mod_navigation span {
    height:45px;
    width:120px;
    display:block;
    text-indent:-3000px;
}

#header .mod_navigation .startseite a, 
#header .mod_navigation .startseite a:link, 
#header .mod_navigation .startseite a:visited {
    background:url(../../tl_files/twoanytime/nav.png) no-repeat top left;
}

#header .mod_navigation .startseite a:hover, 
#header .mod_navigation .startseite a:focus, 
#header .mod_navigation .startseite a:active, 
#header .mod_navigation .startseite span {
    background:url(../../tl_files/twoanytime/nav.png) no-repeat 0 -45px;
}

#header .mod_navigation .vita a, 
#header .mod_navigation .vita a:link, 
#header .mod_navigation .vita a:visited {
    background:url(../../tl_files/twoanytime/nav.png) no-repeat -120px 0;
}

#header .mod_navigation .vita a:hover, 
#header .mod_navigation .vita a:focus, 
#header .mod_navigation .vita a:active, 
#header .mod_navigation .vita span {
    background:url(../../tl_files/twoanytime/nav.png) no-repeat -120px -45px;
}

#header .mod_navigation .media a, 
#header .mod_navigation .media a:link, 
#header .mod_navigation .media a:visited {
    background:url(../../tl_files/twoanytime/nav.png) no-repeat -240px 0;
}

#header .mod_navigation .media a:hover, 
#header .mod_navigation .media a:focus, 
#header .mod_navigation .media a:active, 
#header .mod_navigation .media span {
    background:url(../../tl_files/twoanytime/nav.png) no-repeat -240px -45px;
}

#header .mod_navigation .galerie a, 
#header .mod_navigation .galerie a:link, 
#header .mod_navigation .galerie a:visited {
    background:url(../../tl_files/twoanytime/nav.png) no-repeat -360px 0;
}

#header .mod_navigation .galerie a:hover, 
#header .mod_navigation .galerie a:focus, 
#header .mod_navigation .galerie a:active, 
#header .mod_navigation .galerie span {
    background:url(../../tl_files/twoanytime/nav.png) no-repeat -360px -45px;
}

#header .mod_navigation .kontakt a, 
#header .mod_navigation .kontakt a:link, 
#header .mod_navigation .kontakt a:visited {
    background:url(../../tl_files/twoanytime/nav.png) no-repeat -480px 0;
}

#header .mod_navigation .kontakt a:hover, 
#header .mod_navigation .kontakt a:focus, 
#header .mod_navigation .kontakt a:active, 
#header .mod_navigation .kontakt span {
    background:url(../../tl_files/twoanytime/nav.png) no-repeat -480px -45px;
}

**tblumrich** · 04.02.2013, 09:56

Zitat von plastiko

Da sind keine Anführungsstriche in den Background-url (auch wenn Firebug sie anzeigt). Das ist schon OK.

Nach meiner Meinung ist das nicht unbedingt ok.
Ich habs hier gerade in diversen Projekten getestet. Ohne Anführungsstriche verschwindet die Background-Grafik in modernen Browsern. Warum auch immer. Scheinbar setzt Contao nur dann den Pfad in der Ausgabe richtig...

Die Navigationsgrafik liegt hier: http://www.twoanytime.de/tl_files/twoanytime/nav.png

@flickflack
Im Moment sieht es aber nicht so aus... (Und nein, ich hab nicht mit Firebug geguckt).

Ich finde immer noch:

Code:

#header .mod_navigation .vita a,#header .mod_navigation .vita a:link,#header .mod_navigation .vita a:visited{background:url(tl_files/twoanytime/nav.png

Ich nehme an, du nutzt nicht den internen CSS Editor, richtig? Vorschlag: Nimm den zumindest für die Backgroundgrafik selbst... da wird dir definitiv der richtige Pfad ausgeworfen.

Gruß
Thomas

**darki777** · 04.02.2013, 10:51

Ich seh ebenfalls noch dass deine Background-Images ohne "../../" sind. Als nächstes fehlen die Anführungsstriche wie tblumrich selbst bereits erwähnt hat. Ohne diese können sogar noch ganz andere Probleme auftretten als ich mich damit mal rumschlagen musste. Als letztes fehlt dir noch die Breitenangabe bei den jeweiligen Links, du hast bisher nur eine Höhe von 45px festgelegt, aber keine Breite, wie soll das sonst funktionieren wenn es nur ein Sprite sein soll? ;-)

Viele Grüße
darki

**plastiko** · 04.02.2013, 16:16

Es reicht nicht die css-Datei immer wieder per ftp in tl_files zu laden. Das css für die Sprites befindet sich in system/scripts/48ec09080617.css. Es wurde also importiert. Die Änderungen aber scheinbar nicht.
http://de.contaowiki.org/CSS

**flickflack** · 04.02.2013, 18:51

Hallo,

Danke für eure schnelle Hilfe tblumrich hat den Fehler aufgedeckt.
Ich habe nicht mit dem internen CSS editor gearbeitet und hatte die Anführungstriche vergessen.
Es hat mal wieder gezeigt Code verzeiht keine Fehler.
Jetzt muss ich nur noch die Grafik anpassen und dann ist schick.

Danke nochmal an alle beteiligten.
Gruß
Marco