nicht angemeldet
Verschachtelte Listen mit CSS formatieren
Hallo,
ich habe bei der erstellung einer webseite ein problem mit der Formatierung von ul und li elementen mit css.
insgesamt soll die liste mindestens 3 ebenen haben: die erste ebene vertical, die zweite horizontal und die dritte wieder vertical.
das Ganze sollte dann etwa so aussehen:
Listen Formatierung
Ich habe schon verschiedene möglichkeiten ausprobiert.
mit "float:left" <ul> elementen funtioniert bei mir nur die erste ebene horizontal (bzw. alle drei, aber nicht erst ab der 2. ebene horizontal).
mit "display:inline" <li> elementen ist nur die unterste ebene horizontal...
Kann mir vielleicht irgentwer weiterhelfen?
Wie müsste der css Text aussehn um eine solche Formatierung zu erreichen?
-
das Ganze sollte dann etwa so aussehen:
Listen FormatierungIch kenne den Inhalt nicht, aber fällt Dir an Deiner Darstellung etwas auf? Nein? Das sieht verdächtig nach einer Tabelle aus. Insofern würde mich erst einmal interessieren, was gegen den Einsatz einer solchen spricht - nicht, dass noch unschuldige <li>-Elemente gequält werden.
-
hallo,
ich habe bei der erstellung einer webseite ein problem mit der Formatierung von ul und li elementen mit css.
insgesamt soll die liste mindestens 3 ebenen haben: die erste ebene vertical, die zweite horizontal und die dritte wieder vertical.Zum Verständnis hilft dein Bildchen nicht viel weiter. Vielleicht möchtzest du, daß aus deiner "horizontalen" Liste die "dritte Ebene" als Auklappmenü nach unten herausragt ...
Tatsächlich ist das ein etwas komplexeres Ding.
mit "float:left" <ul> elementen funtioniert bei mir nur die erste ebene horizontal
"float" wird dir hier nicht weiterhelfen. Was eventuell hilft, ist, die "eingeschatelten" Listen mit eigenen Klassennamen zu versehen. Denek daran, daß CSS das Prinzip der Vererbung berücksichtigt. Wenn du also für die erste Ebene "display:block" formuliert hast, mußt du es in der zweiten Ebene mit "display:inline" korrigieren, und in der dritten Ebene eben wieder "display:block" einsetzen.
MadS
-
Hallo sebastian
Listen Formatierung
Ich habe schon verschiedene möglichkeiten ausprobiert.Meintest du etwa so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>seltsame Liste</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> [code lang=css]ul, li { list-style:none; margin:0; padding:0; display:block; } li { margin: 1em 0; float: left; clear:left; border-bottom: 1px solid #000; } ul ul { margin: 0 0 0 5em; } li li { clear:none; padding: 0 0.5em; margin:0; border: 0 none; } ul ul ul { margin: 1em 0; } li li li { float:none; margin:0; padding: 0; } ~~~ </style> </head> <body> <ul> <li>Ebene1 <ul> <li>Ebene2 <ul> <li>Ebene3</li> <li>Ebene3</li> <li>Ebene3</li> </ul> </li> <li>Ebene2 <ul> <li>Ebene3</li> <li>Ebene3</li> <li>Ebene3</li> </ul> </li> <li>Ebene2 <ul> <li>Ebene3</li> <li>Ebene3</li> <li>Ebene3</li> </ul> </li> <li>Ebene2 <ul> <li>Ebene3</li> <li>Ebene3</li> <li>Ebene3</li> </ul> </li> </ul> </li> <li>Ebene1 <ul> <li>Ebene2 <ul> <li>Ebene3</li> <li>Ebene3</li> <li>Ebene3</li> </ul> </li> <li>Ebene2 <ul> <li>Ebene3</li> <li>Ebene3</li> <li>Ebene3</li> </ul> </li> <li>Ebene2 <ul> <li>Ebene3</li> <li>Ebene3</li> <li>Ebene3</li> </ul> </li> <li>Ebene2 <ul> <li>Ebene3</li> <li>Ebene3</li> <li>Ebene3</li> </ul> </li> </ul> </li> </ul> </body> </html> [/code] Auf Wiederlesen Detlef -- - Wissen ist gut - Können ist besser - aber das Beste und Interessanteste ist der Weg dahin!-
@Detlef
Ja, genau so :)
vielen dank -
Hallo Detlef,
Ich habe die Liste gerade noch einmal im Internet Explorer getestet.
Während sie im Firefox richtig angezeigt wird, werden im Internetexplorer die floatenden Listenelemente schon umgebrochen wenn das browserfenster noch doppelt so groß ist wie die angezeigte Liste.Im Firefox hingegen wie erwartet dann, wenn das browserfenster wirklich zu klein wird.
Weist du woran das liegt, bzw. ob man das Problem im IE beheben kann?
Hier ist noch ein Screenshot von dem Problem:
Detlefs Liste im IE 6.0-
Hallo sebastian
Während sie im Firefox richtig angezeigt wird, werden im Internetexplorer die floatenden Listenelemente schon umgebrochen wenn das browserfenster noch doppelt so groß ist wie die angezeigte Liste.
Ich hatte nur dein Beispiel umgesetzt, ohne im IE kleinere Browserfenster oder/und noch längere Listen zu testen.
Weist du woran das liegt,
Welcher der mannigfachen Bugs des IE für diesen Blödsinn genau verantwortlich ist, weiß ich nicht.
bzw. ob man das Problem im IE beheben kann?
Entweder flexibel, mit durchgehendem Border:
* html li { height:1%; float:none; } * html li li { height:auto; float:left; }oder:
* html li { width:100%; } * html li li { width:auto; }oder mit fester, an den Inhalt anpassbarer Breite:
* html li { width:36em; } * html li li { width:auto; }Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-