Listenformatierung CSS

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
kreutner-winkler

kreutner-winkler hat kostenlosen Webspace.

15:37, 16.7.2012
Hallo

Habe folgendes Problem:
Ich bearbeite gerade das Design eines Menüs. Dabei habe ich ein Menü, das aus einer äußeren und einer inneren Liste besteht.
Wenn ich in der CSS-Datei Formatierung an der äußeren Liste vornehme, übernimmt es diese Formatierung auch für die innere Liste, was ich aber nicht will.

Aufbau:

<ul class="level_1">
<li>Menüpunkt1
<ul class="level_2>
<li>Unterpunkt1</li>
<li>Unterpunkt2</li>
<li>Unterpunkt3</li>
<li>Unterpunkt4</li>
</ul>
<li>Menüpunkt2
<ul class="level_2>
<li>Unterpunkt1</li>
<li>Unterpunkt2</li>
<li>Unterpunkt3</li>
<li>Unterpunkt4</li>
</ul>
......

Im CSS bearbeite ich die Liste folgendermaßen:

#mainmenu .level_1 ul {}
#mainmenu .level_1 li {}
#mainmenu .level_2 ul {}
#mainmenu .level_2 li {}

wenn ich eine Formatierung bei #mainmenu .level_1 ul vornehme übernimmt es sie auch bei level_2!

Hätte jemand eine Idee, wie ich die beiden Formatierung getrennt machen könnte?

greets Gerhard
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

~~m****r~~

15:52, 16.7.2012

Sorge für valides HTML, dann geht es auch:

<ul class="level_1">
	<li>
		<ul class="level_2">
			<li>Unterpunkt1</li>
			<li>Unterpunkt2</li>
			<li>Unterpunkt3</li>
			<li>Unterpunkt4</li>
		</ul>
	</li>

	<li>
		<ul class="level_2">
			<li>Unterpunkt1</li>
			<li>Unterpunkt2</li>
			<li>Unterpunkt3</li>
			<li>Unterpunkt4</li>
		</ul>
	</li>
</ul>

<style type="text/css">

.level_1 {
border:thin solid red;
}
.level_1 li {
border:thin solid black;
}
.level_2 {
border:thin solid yellow;
}
.level_2 li {
border:thin solid green;
}

</style>

fabo

fabo hat kostenlosen Webspace.

16:49, 16.7.2012
Ansonsten mal mit !important probieren.

spiele2012

spiele2012 hat kostenlosen Webspace.

0:40, 23.7.2012

Für Aufzählungslisten können Sie das Erscheinungsbild des Bullet-Zeichens bestimmen. Für nummerierte Liste können Sie die Darstellung der Durchnummerierung beeinflussen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>list-style-type</title>
</head><body>

<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>disc</i></h4>
<ul style="list-style-type:disc">
<li>Probieren geht &uuml;ber Studieren</li>
<!--usw.-->
</ul>
<h4>Aufz&auml;hlungsliste &lt;ul&gt; mit Darstellungstyp <i>circle</i></h4>
<ul style="list-style-type:circle">
<li>Probieren geht &uuml;ber Studieren</li>
<!--usw.-->
</ul>
<!--usw.-->

<h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>decimal</i></h4>
<ol style="list-style-type:decimal">
<li>Tagesordnung</li>
<!--usw.-->
</ol>
<h4>Nummerierte Liste &lt;ol&gt; mit Darstellungstyp <i>lower-roman</i></h4>
<ol style="list-style-type:lower-roman">
<li>Tagesordnung</li>
<!--usw.-->
</ol>

<!--usw.-->
</body></html>

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city

Listenformatierung CSS

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!