Hallo an alle!
Es geht um diese Grafik:
.
Die von mir händisch gebastelte Website findet ihr hier: http://passaujazzorchestra.culturebase.org.
Die Einbindung in XHTML ist denke ich mal korrekt, deswegen poste ich die mal jetzt nicht. Das Problem ist, dass ab dem Menüpunkt "Repertoire" unten rechts in der Navigationsleiste ein Darstellungsfehler bei allen Browsern aufkommt.
Die jeweiligen Verschiebungen der einzelnen Grafikabschnitte sind alle korrekt (jedes li-Element ist 80 Pixel breit und 25 Pixel hoch), deswegen verstehe ich den Darstellungsfehler überhaupt nicht.
Vielleicht kann mir ja irgendjemand aus meiner Denkblockade helfen. Bin für alle Vorschläge dankbar!
Es geht um diese Grafik:
Die von mir händisch gebastelte Website findet ihr hier: http://passaujazzorchestra.culturebase.org.
- Die Grafik ist 640 Pixel breit und 75 Pixel hoch.
- Die Navi ist 640 Pixel breit und 25 Pixel hoch.
- Es gibt also drei Zustände: normal, hover und on.
/* HEADER */
#header { width:640px;height:25px;margin:50px auto 10px;position:relative; }
#header #nav { margin:0px;padding:0px; }
#header #nav li { display: inline; }
#header #nav li a { width:80px;height:0px;padding-top:25px;overflow:hidden;background:url(../img/header.png) top no-repeat;float:left; }
/* HEADER NORMAL */
#header #nav li#startseite a { background-position:0px 0px; }
#header #nav li#band a { background-position:-80px 0px; }
#header #nav li#repertoire a { background-position:-160px 0px; }
#header #nav li#termine a { background-position:-240px 0px; }
#header #nav li#fotos a { background-position:-320px 0px; }
#header #nav li#presse a { background-position:-400px 0px; }
#header #nav li#gaestebuch a { background-position:-480px 0px; }
#header #nav li#kontakt a { background-position:-560px 0px; }
/* HEADER HOVER + HEADER PRESSED */
#header #nav li#startseite a:hover, a:active {background-position:0px -25px; }
#header #nav li#band a:hover, a:active { background-position:-80px -25px; }
#header #nav li#repertoire a:hover, a:active { background-position:-160px -25px; }
#header #nav li#termine a:hover, a:active { background-position:-240px -25px; }
#header #nav li#fotos a:hover, a:active { background-position:-320px -25px; }
#header #nav li#presse a:hover, a:active { background-position:-400px -25px; }
#header #nav li#gaestebuch a:hover, a:active { background-position:-480px -25px; }
#header #nav li#kontakt a:hover, a:active { background-position:-560px -25px; }
/* HEADER ON */
#header.startseite #nav li#startseite a { background-position:0px -50px !important; }
#header.band #nav li#band a { background-position:-80px -50px !important; }
#header.repertoire #nav li#repertoire a { background-position:-160px -50px !important; }
#header.termine #nav li#termine a { background-position:-240px -50px !important; }
#header.fotos #nav li#fotos a { background-position:-320px -50px !important; }
#header.presse #nav li#presse a { background-position:-400px -50px !important; }
#header.gaestebuch #nav li#gaestebuch a { background-position:-480px -50px !important; }
#header.kontakt #nav li#kontakt a { background-position:-560px -50px !important; }
Die Einbindung in XHTML ist denke ich mal korrekt, deswegen poste ich die mal jetzt nicht. Das Problem ist, dass ab dem Menüpunkt "Repertoire" unten rechts in der Navigationsleiste ein Darstellungsfehler bei allen Browsern aufkommt.
Die jeweiligen Verschiebungen der einzelnen Grafikabschnitte sind alle korrekt (jedes li-Element ist 80 Pixel breit und 25 Pixel hoch), deswegen verstehe ich den Darstellungsfehler überhaupt nicht.
Vielleicht kann mir ja irgendjemand aus meiner Denkblockade helfen. Bin für alle Vorschläge dankbar!