CSS: verschachtelte Listen - vertikal und horizontal darstellen

Manjo

Manjo

Aktives Mitglied
Thread Starter
Dabei seit
25.07.2005
Beiträge
906
Reaktionspunkte
24
Hallo!

Ich möchte 2 Listen ineinander verschachteln, wobei die Punkte der ersten Ebene untereinander, die der jeweiligen Unterebene nebeneinander dargestellt werden. Ich weiß, es geht auch ohne 2. Liste, einfach aneinanderreihen, aber sauberer ist es hier nunmal mit einer 2. Liste.
Code: 
<ul>
  <li>Ebene 1_1
    <ul>
      <li>Ebene 1_2_1</li>
      <li>Ebene 1_2_2</li>
      <li>Ebene 1_2_3</li>
      <li>Ebene 1_2_4</li>
    </ul>
  </li>
  <li>Ebene 2_1</li>
  <li>Ebene 3_1
    <ul>
      <li>Ebene 3_2_1</li>
      <li>Ebene 3_2_2</li>
    </ul>
  </li>
  <li>Ebene 4_1</li>
  <li>Ebene 5_1</li>
</ul>
dazu in css folgendes:
HTML: 
ul li ul {margin: 0; padding:0;list-style-type:none;}
ul li ul li {float:left;}
Das führt allerdings dazu, dass die Elemente der Ebene 2_1 und folgende nicht mehr in der gleichen Spalte wie Ebene 1_1 sondern direkt hinter dem letzen Element der 2. Ebene angeordnet werden. Mit clear:both; kann ich nicht arbeiten, da sich das Ganze in einer Umgebung, die bereits mit float arbeitet, befindet.

Eine Idee?

Viele Grüße
Manjo.
 
Meinst Du es so?


listen.png



Wenn ja heisst das Schlüsselwort "display: inline" für die 2. Liste.


PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Liste</title>
<style type="text/css">
<!--
.nav_1 {
	color:#FF0000;

}

.nav_2 {
	color:#00FF00;

}

.nav_2 li {
	display: inline;

}
-->
</style>
</head>

<body>

<ul class="nav_1"> 
	<li>Ebene 1_1 
		<ul class="nav_2"> 
			<li>Ebene 1_2_1</li> 
			<li>Ebene 1_2_2</li> 
			<li>Ebene 1_2_3</li> 
			<li>Ebene 1_2_4</li> 
		</ul> 
	</li>
	<li>Ebene 2_1</li> 
	<li>Ebene 3_1 
		<ul class="nav_2"> 
			<li>Ebene 3_2_1</li> 
			<li>Ebene 3_2_2</li> 
	  </ul> 
	</li>
	<li>Ebene 4_1</li> 
	<li>Ebene 5_1</li>
</ul>


</body>
</html>

2nd
 
Oh ja klasse! Danke!

Man, manchmal sieht man den Wald vor lauter Bäumen nicht mehr.
 
Zurück
Oben Unten