Ansicht:   

#215701 HTML/CSS Formatierung von Listen? (web.design)

verfaßt von MudGuard zur Homepage von MudGuard, München, 11.06.2010, 18:53:42

> 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.

--
[image]
MudGuard
O-o-ostern

 

gesamter Thread:

Ansicht:   
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz