Zwei mal UL nebeneinander
Jochen
- css
Moin,
wollte mal fragen ob es möglich ist, zwei Listen nebeneinander zu haben:
<ul class="t1" id="t1_on">
<li>
<img src="1.jpg" border="0"/></div>
</li>
<li>
<img src="f2.jpg" border="0"/></div>
</li>
<li>
<img src="f3.jpg" border="0"/></div>
</li>
<li>
<img src="f4.jpg" border="0"/>
</li>
</ul>
so sieht das bis jetzt aus, und jetzt würde ich nochmals 4 daneben haben. Ist das möglich? Wenn ja wie mache ich das ?
Gruß,
Jochen
Hi,
wollte mal fragen ob es möglich ist, zwei Listen nebeneinander zu haben:
Listen floaten, oder per display behandeln.
MfG ChrisB
Hallo,
so sieht das bis jetzt aus, und jetzt würde ich nochmals 4 daneben haben. Ist das möglich? Wenn ja wie mache ich das ?
Die Frage ist, ob Du wirklich zwei voneinander unabhängige Liste nebeneinander platzieren möchtest (dann siehe oben), oder eine Liste so "umbrechen" möchtest, dass sie in mehreren Spalten dargestellt wird. Letzteres habe ich mich vor ein paar Tagen auch gefragt - und dann die Forensuche betätigt. In Kürze: ul eine Breite geben, li die Hälfte, ein Drittel, ein Viertel, ...; dann display+float.
Grüße, luti
ps: Was sollen die </div>
in Deinem Code?
Hi,
Letzteres [eine Liste so "umbrechen" möchtest, dass sie in mehreren Spalten dargestellt wird] habe ich mich vor ein paar Tagen auch gefragt - und dann die Forensuche betätigt. In Kürze: ul eine Breite geben, li die Hälfte, ein Drittel, ein Viertel, ...; dann display+float.
ja, dann erhältst du aber zeilenweise angeordnete Listenelemente, nicht spaltenweise:
Listenpunkt1 Listenpunkt2
Listenpunkt3 Listenpunkt4
Listenpunkt5 Listenpunkt6
Listenpunkt7 Listenpunkt8
Möchte man aber wirklich eine spaltenweise Anordnung, wie ich sie in diesem Fall auch bevorzugen würde, ...
Listenpunkt1 Listenpunkt5
Listenpunkt2 Listenpunkt6
Listenpunkt3 Listenpunkt7
Listenpunkt4 Listenpunkt8
... dann muss man die Liste "von Hand" in der Mitte splitten und dann, wie oben beschrieben, als zwei Listen nebeneinander plazieren. Denn leider unterstützt CSS keinen echten automatischen Spaltenfluss.
So long,
Martin
Hallo,
Denn leider unterstützt CSS keinen echten automatischen Spaltenfluss.
Leider nicht ... das wäre praktisch ;)
Ich finde den Link nicht mehr, aber auf irgend einer Seite war ein Lösung beschrieben, bei der die "Spaltung" durch hinzufügen einer Klasse bei dem Listenpunkt, der in einer neuen Spalte stehen soll, gelöst wurde. (Oder sonst müsste halt jedem LI eine Spalten-Klasse zugewiesen werden.) Wenn ich an eine aus einer DB erzeugten Liste denke, wäre diese (erstere) Lösung wohl einfacher. Und wohl auch semantisch korrekter, nicht wahr?
Grüße,
luti
Hi,
Ich finde den Link nicht mehr, aber auf irgend einer Seite war ein Lösung beschrieben, bei der die "Spaltung" durch hinzufügen einer Klasse bei dem Listenpunkt, der in einer neuen Spalte stehen soll, gelöst wurde.
die spannende Frage dabei wäre: Wie bestimmt man den Listenpunkt, an dem der Spaltenumbruch erfolgen soll? Serverseitig bestimmen geht nicht, weil man nicht absehen kann, wieviel Platz jeder Eintrag auf dem Bildschirm des Nutzers einnimmt (Textlänge, Schriftgröße, Abstände). Nur wenn sicher ist, dass alle Einträge gleichartig aufgebaut sind und daher auch gleich viel Platz beanspruchen, ist dieser Weg gangbar. Ansonsten höchstens per JS nach dem erstmaligen Rendern des Inhalts (und nach jedem Resize aufs Neue), wenn die tatsächlichen Maße abfragbar sind; das ergibt dann halt einen recht unruhigen Bildaufbau mit hin- und herspringenden Elementen.
Außerdem behaupte ich mal, um einen Spaltenumbruch zu realisieren, reicht es nicht, ein Listenelement speziell auszuzeichnen, solange die umschließende Liste (ol, ul) noch einen zusammenhängenden Block bildet. Aber ich lasse mich gern überzeugen. :-)
(Oder sonst müsste halt jedem LI eine Spalten-Klasse zugewiesen werden.) Wenn ich an eine aus einer DB erzeugten Liste denke, wäre diese (erstere) Lösung wohl einfacher. Und wohl auch semantisch korrekter, nicht wahr?
Semantisch ist beides eine üble Krücke, denn da muss sich die Programmlogik schon um die Darstellung kümmern - das ist ja noch schlimmer, als im Markup auf die Darstellung einzuwirken.
Ciao,
Martin
Hallo,
Wie bestimmt man den Listenpunkt, an dem der Spaltenumbruch erfolgen soll? [...] Nur wenn sicher ist, dass alle Einträge gleichartig aufgebaut sind und daher auch gleich viel Platz beanspruchen, ist dieser Weg gangbar.
Stimmt, daran hatte ich jetzt gar nicht gedacht. Ich nehme mal an, dass Beispiel ging davon aus ...
Ich jedenfalls habe _ich_ mich mit einer links-rechts Leserichtung begnügt. Wenn dann mal ein LI länger ist, fängt die nächste Zeile halt etwas weiter unten an.
Semantisch ist beides eine üble Krücke, denn da muss sich die Programmlogik schon um die Darstellung kümmern - das ist ja noch schlimmer, als im Markup auf die Darstellung einzuwirken.
Wo Du Recht hast ...
Grüße, luti
@@Der Martin:
nuqneH
Möchte man aber wirklich eine spaltenweise Anordnung, wie ich sie in diesem Fall auch bevorzugen würde, ...
Listenpunkt1 Listenpunkt5
Listenpunkt2 Listenpunkt6
Listenpunkt3 Listenpunkt7
Listenpunkt4 Listenpunkt8... dann muss man die Liste "von Hand" in der Mitte splitten
Nein, muss man nicht.
Denn leider unterstützt CSS keinen echten automatischen Spaltenfluss.
Glücklicherweise unterstützt CSS 3 das doch: [CSS3-MULTICOL]. Und vernünftige Browser können das auch schon (mit Präfixen).
Du wolltest sagen: Leider unterstützt mein Lieblingsbrowser IE das nicht. Und Ich-wäre-gern-ein-IE-Opera auch noch nicht.
Na und? IE und Opera kann kann man mit JavaScript auf die Sprünge helfen (im IE möglicherweise als CSS-Expression).
http://forum.de.selfhtml.org/archiv/2009/8/t189484/#m1262437 ff.
Qapla'
Hallo,
Denn leider unterstützt CSS keinen echten automatischen Spaltenfluss.
Glücklicherweise unterstützt CSS 3 das doch
ja, soweit die Theorie.
[CSS3-MULTICOL]. Und vernünftige Browser können das auch schon (mit Präfixen).
"Mit Präfix" heißt: Experimentell; proprietär; wir sind uns noch nicht so sicher; wir testen das schon; wir machen das mal so, wie wir uns das vorstellen. Das ist nicht das, was ich als tatsächlich verfügbare Implementierung bezeichnen würde.
Du wolltest sagen: Leider unterstützt mein Lieblingsbrowser IE das nicht. Und Ich-wäre-gern-ein-IE-Opera auch noch nicht.
Ich bin mir da nicht ganz sicher - aber wenn selbst Ich-will-der-Größte-sein-Firefox das nur als proprietäre Eigenschaft mit Präfix bietet, gilt das für mich noch nicht.
Na und? IE und Opera kann kann man mit JavaScript auf die Sprünge helfen (im IE möglicherweise als CSS-Expression).
Ciao,
Martin