UL LI format Problem. Nebeneinander, untereinander

[Collin]

Ich gebe mein Menü, Verzeichnis als Liste aus , UL LI.

Jetzt möchte ich das die Hauptüberschriften neben einander sind und unter den einzelen Hauptüberschriften, die UnterÜberschriften:

xx!xx!xx!xx!xx
--!xx!--!--!xx
--!xx!--!--!xx

Aber ich bekomme das irgendwie nicht hin...

.nav {  
	text-align:left;  
	font-size: 15px;  
	max-width:1200px;  
	margin:0px auto;  
	}  
  
  
.nav ul {  
	padding: 0;  
	list-style: none;  
	display: inline-table;  
	background: #ff0000;  
	}  
  
.nav li {  
	float:left;  
	padding:20px;  
	}  
  
.nav ul ul {  
background: #c0c0c0;  
	}

  
<div class="nav">  
<ul>  
	<li>  
		<a href="">Ueberschrift</a>  
	</li>  
	<li>  
		<a href="">Ueberschrift</a>  
		<ul>  
			<li>  
				<a href="">Unter Ueberschrift</a>  
			</li>  
			<li>  
				<a href="">Unter Ueberschrift</a>  
			</li>  
		</ul>  
	</li>  
	<li>  
		<a href="">Ueberschrift</a>  
	</li>	  
	<li>  
		<a href="">Ueberschrift</a>  
	</li>	  
	<li>  
	<a href="">Ueberschrift</a>  
		<ul>  
			<li>  
				<a href="">Unter Ueberschrift</a>  
			</li>  
			<li>  
				<a href="">Unter Ueberschrift</a>  
			</li>  
		</ul>  
	</li>  
</ul>  
</div>  

[Ole]

Hi Collin,

Mal Step by Step

Schritt 1: Überschriften in eine Zeile und mittig auf der Seite

• nutze "inline-block" statt "float" für die Listenelemente der Überschriften
• dann funktioniert auch "text-align: center" auf dem Elternelement ".nav" und du musst nicht "margin: auto" probieren
• damit der Text der Überschriften im Element wieder linksbündig ist brauchen diese ein "text-align: left"

Schritt 2: Unterüberschriften unter die Überschriften

• mach aus deinen Überschriften-Links block-Elemente
• mach aus den Listen, welche die Unterüberschriften enthalten inline-block-Elemente
• richte sie in der Vertikalen "top" aus
• entferne bei Bedarf Listenzeichen und die Innen- und Außenabstände

Zumindest bei meinem flüchtigen Test im Chrome brachte dieser Ansatz das gewünschte Ergebnis

Gruß
Ole

[Collin]

Super, jetzt verstehe ich es. Danke.

Vieleicht kannst du mir noch weiterhelfen.
ich habe also dann mehrere Überschriften, die ich jetzt mit

, die .nav > ul > li {
display: inline-block;
text-align: left;
vertical-align: top;
padding:0 30px 0 0;
}

formatieren.

Jetzt sind die Bereiche aber unterschieldich lang, wegen der jeweiligen Wortänge der Überschrift.

Wie bewerkstellige ich es, das jeder Bereich (Überschriften) gleich breit ist.

Collin

[Ole]

Hi Collin

Wie bewerkstellige ich es, das jeder Bereich (Überschriften) gleich breit ist.

Da fallen mir nur 2 Wege ein:

1. Du setzt die Breite mit CSS
2. Du schaust mit JS welches der Elemente das breiteste ist und setzt dann die Breite aller Elemente entsprechend

Gruß
Ole

[Baba]

Aber ich bekomme das irgendwie nicht hin...

Bitte stell das nächste mal das Beispiel in jsfiddle oder ähnliches ein. Du musst bei Deinem Beispiel nur der ersten li ebene ein float geben. Das erreichst Du mit dem > - Selektor. jsfiddle

<div class="nav">
</div>

Schau mal, ob das <nav> Element was für Dich ist.

Cheers,
Baba

[Jörg Reinholz]

Moin!

Jetzt möchte ich das die Hauptüberschriften neben einander sind und unter den einzelen Hauptüberschriften, die UnterÜberschriften:

Sowas?

Dann schau mal in den Quelltext und ins CSS-File.  Ich bin zu müde um es zu beschreiben.
Nich was: Das JS kannst Du ignorieren. Das ist für Asbach-IEs.

Jörg Reinholz