Problem mit CSS Navigation

[Hazelnut]

Hallo allerseits,

habe da ein Problem mit einer CSS Navigation. Ich benutze Pfeile, um anzuzeigen, das ein Eintrag über Untermenüs verfügt.

Leider ist da wohl im CSS etwas verbuggt, sodass die Pfeile einen schlechten Abstand zueinander haben. Ich weiß momentan überhaupt nicht, wie ich das fixen kann.

Link zur Seite: Edit: Erledigt!

 

[Wustersoss]

Wie wäre es denn wenn du dich erst mal auf ein Stylesheet einlässt. Du hasst sage und schreibe 8 Stylesheets.
Da wird dir keiner helfen können, weil du mit jedem neuem Stylesheet das vorherige überschreibst und damit auch die dort drin stehenden Eigenschaften.

Da ist wohl erst mal aufräumen angesagt.

 

[Hazelnut]

Wo siehst du da 8 Stylesheets? Ich benutze nur dies hier: Edit: Erledigt!

Ich hatte eben kurz auf das alte Theme geswitcht um etwas zu testen. Da waren mehr Stylesheets drin. Schau dir den Sourcecode daher noch einmal an.

 

[Tronjer]

Was ich auf Anhieb sehe, ist dass jedes list-item eine eigene ID und dazu noch mehrere Klassen besitzt. Das ist extrem unübersichtlich und obendrein unnötig komplex.

Der Pfeil liegt in

#nav li.sub-nav > a {
    background: url("http://www.html.de/images/arrow
}

und der Border in

#nav a {
    border-right: 1px solid
}

Isoliere das Menü in einer neuen Datei und schreibe dafür ein minimales CSS. Gib den list-items der obersten Menü-Ebene eine feste Breite. Bau dort den Pfeil als background-image ein und verschiebe ihn mit background-position an die gewünschte Position. Anschließend mit border-right die Begrenzung festlegen.

Wenn alles stimmt, das geänderte HTML / CSS wieder zurück in die Ursprungsdateien kopieren.

 

[Hazelnut]

Meinst du mit list-items die "li" elemente? Als background-image kann ich sie nicht setzen. Dann erscheinen die gar nicht mehr.

 

[Tronjer]

Ich meine die List-Elemente auf der obersten Hierarchie, und als background-image sollst du den Pfeil setzen.

 

[Hazelnut]

Habe es nun gefixt. Danke! :)