<li>-Einträge auf unterschiedlichen Ebenen

[ManicMarble]

Hallo CSS-Gurus,

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

Ich habe beispielsweise folgenden HTML-Code:

<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

 

[Gumbo]

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

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);
}

 

[ManicMarble]

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:

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

 

[Gumbo]

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

 

[ManicMarble]

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

 

[Gumbo]

Dann ist das CMS aber nicht sehr empfehlenswert.