Hallo CSS-Gurus,

kann man mittels CSS Listen-Einträge auf unterschiedlichen Ebenen unterschiedlich formatieren?

Ich habe beispielsweise folgenden HTML-Code:

Code :

1 2 3 4 5 6 7 8 9

<ul>     <li>Ebene 1</li>     <ul>         <li>Ebene 2</li>         <ul>             <li>Ebene 3</li>         </ul>     </ul> </ul>

Nun würde ich hierfür gerne in einem externen Stylesheet eigene "Bullet"-Grafiken definieren, das geht ja mit "list-style-image".
Ich will aber für jede "Ebene" eine eigene Bullet-Grafik, und zwar ohne dass für die Ebenen jeweils eigene Klassen angegeben werden müssen.
Geht das? Wenn ja: wie?

Viele Grüße,
Martin

Ja, das ist möglich. Ich weiß zwar gerade nicht, wie ich das am besten erklären kann, aber versuch mal folgendes:

Code :

1 2 3 4 5 6 7 8 9

ul li {     list-style-image: url(Ebene1.png); } ul li ul li {     list-style-image: url(Ebene2.png); } ul li ul li ul li {     list-style-image: url(Ebene3.png); }

Hallo Gumbo,
vielen Dank! Das war's zwar nicht ganz, aber das hat mich auf den richtigen Weg gebracht. Noch ein bischen Trial-and-Error und jetzt gehts:

Code :

1 2 3

ul li { list-style-image: url(ebene1.png); } ul ul li { list-style-image: url(ebene2.png); } ul ul ul li { list-style-image: url(ebene1.png); }

Nochmal Danke,
Martin

Also, um ehrlich zu sein ist mein Vorschlag korrekt, da ul-Elemente nicht direkt in ul-Elementen stehen dürfen.

Hatte Deinen Code genau so ausprobiert und es hat nicht exakt funktioniert. So wie ich's dann geschrieben habe klappt es.

Vielleicht liegt's an dem HTML-Code. Auf den habe ich allerdings keinen Einfluss, der wird von einem CMS produziert. Und der sieht vom Aufbau her so aus wie mein Beispiel, da stehen eben <ul>-Elemente direkt in <ul>-Elementen.

Naja, was soll's. Die Seiten sehen jetzt so aus wie ich sie haben will, Deine Antwort hat mir geholfen und ich bin glücklich

Martin

Dann ist das CMS aber nicht sehr empfehlenswert.