Hallo,

habe folgende Liste:

<ul id=\"Navigation_Gesamt_ul\">


 <li class=\"Oberpunkte_li\">
	<a href=\"#\">Liste 1
	<ul class=\"Unterpunkte_ul\">
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 1</li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 2</li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 3</li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 4</li>
	</ul>
 </li>
 <li class=\"Oberpunkte_li\">
	<a href=\"#\">Liste 2
	<ul class=\"Unterpunkte_ul\">
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 1</li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 2</li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 3</li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 4</li>
	</ul>
 </li>

 
</ul>

Diese wird unter anderem mit folgendem CSS formatiert:

.Oberpunkte_li {
display:inline;
}

.Unterpunkte_li {
display:block
}

Das sieht dann so aus:
http://www.shtml.de/he/shot.gif


Wie bekomme ich es hin, dass die Liste 2 rechts neben der Liste 1 ist?

hi

> Wie bekomme ich es hin, dass die Liste 2 rechts neben der Liste 1 ist?

mit float:left; bzw float:right;
btw deine a-tags solltest du auch schließen  

<ul id=\"Navigation_Gesamt_ul\">
 <li class=\"Oberpunkte_li floatleft\">
	<a href=\"#\">Liste 1</a>
	<ul class=\"Unterpunkte_ul\">
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 1</a></li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 2</a></li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 3</a></li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 4</a></li>
	</ul>
 </li>
 <li class=\"Oberpunkte_li floatright\">
	<a href=\"#\">Liste 2</a>
	<ul class=\"Unterpunkte_ul\">
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 1</a></li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 2</a></li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 3</a></li>
	 <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 4</a></li>
	</ul>
 </li>
</ul>

für deine css-file
.floatright {float:right;}
.floatleft {float:left;}

wenn du die liste nicht in der breite begrenzt wird sie sich aber so weit ausdehnen wie möglich ... da musst du also noch weiter anpassen/nacharbeiten.

gruß schnake

--
"Wenn die Welt von Frauen regiert würde, hätten wir keine Kriege, nur erbitterte Verhandlungen alle 28 Tage." Robin Williams [RIP]


"Wenn der Teufel machtlos ist, schickt er seine Frau." [ukrainisches Sprichwort]

> hi
>
> > Wie bekomme ich es hin, dass die Liste 2 rechts neben der Liste 1 ist?
>
> mit float:left; bzw float:right;
> btw deine a-tags solltest du auch schließen  
>
>

<ul id=\"Navigation_Gesamt_ul\">
> <li class=\"Oberpunkte_li floatleft\">
> <a href=\"#\">Liste 1</a>
> <ul class=\"Unterpunkte_ul\">
> <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 1</a></li>
> <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 2</a></li>
> <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 3</a></li>
> <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 4</a></li>
> </ul>
> </li>
> <li class=\"Oberpunkte_li floatright\">
> <a href=\"#\">Liste 2</a>
> <ul class=\"Unterpunkte_ul\">
> <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 1</a></li>
> <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 2</a></li>
> <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 3</a></li>
> <li class=\"Unterpunkte_li\"><a href=\"#\">Punkt 4</a></li>
> </ul>
> </li>
> </ul>

>
> für deine css-file
> .floatright {float:right;}
> .floatleft {float:left;}

Da sind einige überflüssige class-Angaben.
Oberpunkte_li und Unterpunkte_li braucht\'s nicht.

#Navigation_Gesamt_ul > li
für die li, die jetzt Oberpunkte_li haben.

#Navigation_Gesamt_ul ul
für die ul, die jetzt class Unterpunkte_ul haben.

#Navigation_Gesamt_ul ul li
für die li, die jetzt Unterpunkte_li haben.

Merke: wenn alle Elemente einer Ebene dieselbe Klasse haben, ist die Klasse überflüssig.

Und Klassennamen sollten nicht wie die derzeit gewünschte Darstellung heißen, also nicht floatleft oder floatright.
Stell Dir vor, Du willst irgendwann die Darstellung ändern, so daß die beiden Listen gar nicht mehr floaten.
Dann steht da .floatleft { float:none; } - was eher verwirrend ist.

Mein Vorschlag wäre

#Navigation_Gesamt_ul > li
{
display: inline-block;
}

Und schon sitzen die inneren Listen nebeneinander, ohne die Nebenwirkungen von float.

--

MudGuard
O-o-ostern

> Da sind einige überflüssige class-Angaben.
> Oberpunkte_li und Unterpunkte_li braucht\'s nicht.

na von mir stammen sie nicht  

> #Navigation_Gesamt_ul > li
> für die li, die jetzt Oberpunkte_li haben.
>
> #Navigation_Gesamt_ul ul
> für die ul, die jetzt class Unterpunkte_ul haben.
>
> #Navigation_Gesamt_ul ul li
> für die li, die jetzt Unterpunkte_li haben.

das weiß ich alles  

> Merke: wenn alle Elemente einer Ebene dieselbe Klasse haben, ist die
> Klasse überflüssig.

jo

> Und Klassennamen sollten nicht wie die derzeit gewünschte Darstellung
> heißen, also nicht floatleft oder floatright.
> Stell Dir vor, Du willst irgendwann die Darstellung ändern, so daß die
> beiden Listen gar nicht mehr floaten.
> Dann steht da .floatleft { float:none; } - was eher verwirrend ist.

schon klar, der name war aber für den zweck des verstehens gedacht.
hatte jetzt nicht vor das css des TOs zu optimieren.
generell hast du natürlich recht. 

> Mein Vorschlag wäre
>
> #Navigation_Gesamt_ul > li
> {
> display: inline-block;
> }
>
> Und schon sitzen die inneren Listen nebeneinander, ohne die Nebenwirkungen
> von float.

durchaus ne elegantere lösung als mit float  

--
"Wenn die Welt von Frauen regiert würde, hätten wir keine Kriege, nur erbitterte Verhandlungen alle 28 Tage." Robin Williams [RIP]


"Wenn der Teufel machtlos ist, schickt er seine Frau." [ukrainisches Sprichwort]

Funktioniert einwandfrei.

Meine Liste sieht derzeit so aus:

http://shtml.de/he/shot2.gif

Wie bekomme ich es hin, dass die Listen 1 und 2 neben der Liste 3 oben sind?


Und wieso ist die Liste nicht zentriert?

<div style=\"align:center;\">
<ul id=\"Navi\">

 <li>
 <a href=\"\">Liste 1
 </li>

 <li>
 <a href=\"\">Liste 2
 </li>

 <li>
 <a href=\"\">Liste 3
 <ul>
  <li><a href=\"\">Punkt 1</li>
 </ul>
 <ul>
  <li><a href=\"\">Punkt 2</li>

 </ul>
 <ul>
  <li><a href=\"\">Punkt 3</li>
 </ul>
 <ul>
  <li><a href=\"\">Punkt 4</li>
 </ul>
 </li>

 
</ul>
</div>

Wenn ich

<div align=\"center\">

verwende, funktioniert es - ist halt nicht W3-konform..

huhu 

- schon wieder keine a-tags geschlossen, mach die mal zu (willst doch w3c-konformes html/css schreiben)

<a href=\"\">blablbablubb</a>

- bei den Punkten 1-4 reicht doch eine Unterliste. warum setzt du jeden einzelnen li in eine seperate ul?  
wenn es dafür keinen wichtigen Grund gibt ist das voll unnötig.

- ändere im css das display:inline-block; in display:inline-table; dann sind deine Navilisten auf gleicher Höhe unabhängig von der Anzahl der Unterpunkte

#Navi > li {display:inline-table;}

- nur align gibt es nicht. das heißt richtig text-align für die horizontale Ausrichtung und fürs Vertikale vertical-align.

#Navi {text-align:center;}

Gruß schnake

--
"Wenn die Welt von Frauen regiert würde, hätten wir keine Kriege, nur erbitterte Verhandlungen alle 28 Tage." Robin Williams [RIP]


"Wenn der Teufel machtlos ist, schickt er seine Frau." [ukrainisches Sprichwort]

ich kann zwar definieren, wie viel platz zwischen dem Text und der Umrandung sein soll (padding).

Wie kann ich die Gesamtbreite der Umrandung definieren, dass alle Links gleich breit sind?

> ich kann zwar definieren, wie viel platz zwischen dem Text und der
> Umrandung sein soll (padding).
>
> Wie kann ich die Gesamtbreite der Umrandung definieren, dass alle Links
> gleich breit sind?

Wo bzw. für welches Element hast du denn den Rahmen definiert?
Hast du nen Link zu deiner Navi-Testseite?

--
"Wenn die Welt von Frauen regiert würde, hätten wir keine Kriege, nur erbitterte Verhandlungen alle 28 Tage." Robin Williams [RIP]


"Wenn der Teufel machtlos ist, schickt er seine Frau." [ukrainisches Sprichwort]

Ja, hier:

http://shtml.de/he/?liste=1

Und zwar möchte ich, dass die Links in der Leiste oben, also die Umrandungen alle gleich breit sind, damit es zu keinen \"Sprüngen\" kommt.