Text in Spalten teilen

[Sebastian Goertz]

Hi,

ich möchte gerne einen Text mit CSS in zwei Spalten teilen.

Die Idee ist folgende:
Eine Linkliste soll die Links untereinander positionieren. Die Menge der Links bringt mich dazu, dass ich diese lieber in zwei Spalten aufteilen möchte, um nicht zu viel Platz zu verschwenden.
Da ich keine Tabelle nutzen möchte (warum wohl?), kommt mir nur die Lösungsidee, zwei separate Listen zu erstellen, die ich entsprechend positioniere:
<ul id="1.Spalte">...</ul>
<ul id="2.Spalte">...</ul>

Diese Lösung finde ich aber nicht elegant, weil die Links sinngemäß ja eigentlich in eine Liste gehören und nicht in zwei.

Also gibt es eine Möglichkeit, nur eine Liste zu nutzen, diese jedoch mit CSS in zwei Spalten aufzuteilen?

Dank und Gruß,
  Seb

[Beat]

Hi,

ich möchte gerne einen Text mit CSS in zwei Spalten teilen.

CSS zeichnet Elemente in HTML aus. CSS kann nicht "teilen"

...Diese Lösung finde ich aber nicht elegant, weil die Links sinngemäß ja eigentlich in eine Liste gehören und nicht in zwei. Also gibt es eine Möglichkeit, nur eine Liste zu nutzen, diese jedoch mit CSS in zwei Spalten aufzuteilen?

-moz-column-count
-moz-column-width

Derzeit gibt es nur proprietäre Lösungen
Wir warten auf Gotot und globales CSS3 Layout.
mfg Beat

[Sebastian Goertz]

Hi,

CSS zeichnet Elemente in HTML aus. CSS kann nicht "teilen"

Schön, dass du verstanden hast, was ich meinte ;-)

Derzeit gibt es nur proprietäre Lösungen

So etwas dachte ich mir schon irgendwie, aber man weiß ja nie...
Dann wohl ohne.

Besten Dank,
 Seb

[Tom]

Hello,

semantisch gesehen ist es och eine Tabelle aus zwei Listenteilen...

Ein harzliches Glückauf

Tom vom Berg

[ChrisB]

Hi,

semantisch gesehen ist es och eine Tabelle aus zwei Listenteilen...

*Bitte* gib zu, dass das nur schraeger Humor sein soll.

MfG ChrisB

[Tom]

Hello,

semantisch gesehen ist es och eine Tabelle aus zwei Listenteilen...

*Bitte* gib zu, dass das nur schraeger Humor sein soll.

Eher Hilflosigkeit über soviel Aufwand, der nach 17 Jahren HTML-Entwicklung immer noch nicht funktioniert

Ein harzliches Glückauf

Tom vom Berg

[Beat]

Also gibt es eine Möglichkeit, nur eine Liste zu nutzen, diese jedoch mit CSS in zwei Spalten aufzuteilen?

Eventuell ein unschöner Lösungsansatz.
Floate deine <li> Elemente, und gib ihnen eine Breite von 50%
(eventuell etwas weniger)

[at]

Hallo.

Eventuell ein unschöner Lösungsansatz.

Was soll daran unschön sein? Er erfüllt seinen Zweck und bringt im konkreten Fall auch keine Nachteile mit sich. Dass sich die visuelle Reihenfolge verändert, spielt bei einer <ul> ja keine Rolle.
MfG, at

[Beat]

Was soll daran unschön sein? Er erfüllt seinen Zweck und bringt im konkreten Fall auch keine Nachteile mit sich. Dass sich die visuelle Reihenfolge verändert, spielt bei einer <ul> ja keine Rolle.
MfG, at

Das Unschöne ist, dass er bei zwei Spalten eine vertikale Ordnung hat, was bei Floats nicht der Fall ist
Beispiel:

CSS1    CSS2
CSS3    HTML1
HTML2   Java-Script

Es ist eben doch oft erwünscht (wie bei der konkret betroffenen Seite), dass eine listenartige Ordnung primär in der Vertikalen, und Spalten dann als Columnen-artige Fortsetzung der Liste visuell verstanden wird.

Einen schöneren Ansatz wird uns vielleicht CSS3 bescheren.

mfg Beat

[at]

Hallo.

Das Unschöne ist, dass er bei zwei Spalten eine vertikale Ordnung hat, was bei Floats nicht der Fall ist

Das meinte ich mit der visuellen Reihenfolge die bei einer <ul> ja explizit irrelevant ist -- sonst wäre es ja eine <ol>.

Beispiel:

CSS1    CSS2
CSS3    HTML1
HTML2   Java-Script

Da hätte ich vermutlich eine <ol> verwendet und auf den von dir vorgeschlagenen Ansatz verzichtet. Im Falle dieses Beispiels hätte man sogar beispielsweise alle Einträge der rechten Spalte einzeln selektieren und absolut ausrichten können. Aber bei längeren Listen grenzt so etwas natürlich an Arbeit, und außerdem ist absolute Positionierung stets für unangenehme Überraschungen gut.

Es ist eben doch oft erwünscht (wie bei der konkret betroffenen Seite), dass eine listenartige Ordnung primär in der Vertikalen, und Spalten dann als Columnen-artige Fortsetzung der Liste visuell verstanden wird.

Dann hat diese Reihenfolge aber meist auch eine Bedeutung, der mittels <ol> Rechnung getragen werden sollte.

Einen schöneren Ansatz wird uns vielleicht CSS3 bescheren.

Wahrscheinlich.
MfG, at

[Sebastian Goertz]

Hi,

Das Unschöne ist, dass er bei zwei Spalten eine vertikale Ordnung hat, was bei Floats nicht der Fall ist

richtig

Es ist eben doch oft erwünscht (wie bei der konkret betroffenen Seite), dass eine listenartige Ordnung primär in der Vertikalen, und Spalten dann als Columnen-artige Fortsetzung der Liste visuell verstanden wird.

bedingt richtig ;-) Tatsächlich käme es bei meiner Seite nicht unbedingt darauf an. Dennoch ging meine Frage auch interessenhalber in die Richtung, auch einfachen Text (zeitungs-artig) in zwei Spalten darstellen zu lassen.

Die Möglichkeit der absoluten Positionierung einzelner Listenpunkte finde ich unpraktisch. Dann doch lieber auf die sinnvolle Auszeichnung als eine Liste verzichten und zwei Listen nebeneinander darstellen.

Hat mit aber alles hier gut weiter gebracht :)

Vielen Dank,
  seb

[suit]

<ul id="1.Spalte">...</ul>
<ul id="2.Spalte">...</ul>

ids dürfen nicht mit ziffen beginnen
punkte sind prinzipiell nicht empfehlenswert, da du dann in selektoren probleme bekommen wirst

id="foo.bar"

-> #foo.bar
könnte heissen die id "foo.bar" oder die id "foo" mit der klasse "bar"

[Sebastian Goertz]

*grml*

Richtig... Hätte ich wirklich erwähnen müssen, dass es sich um ein kleines Codeschnipsel zur Verdeutlichung handelt? Da finde ich "1.Spalte" und "2.Spalte" durchaus nicht verkehrt.
Vielleicht sollte man dann noch erläutern, dass in eine unsortierte Liste natürlich Listenelemente gehören und nicht einfach nur drei Punkte. Das ergäbe ja überhaupt keinen Sinn sonst!

[suit]

*grml*

Richtig... Hätte ich wirklich erwähnen müssen, dass es sich um ein kleines Codeschnipsel zur Verdeutlichung handelt? Da finde ich "1.Spalte" und "2.Spalte" durchaus nicht verkehrt.

ich schon - du hättest ja id="spalte1" und id="spalte2" scheiben können, das wäre sogar für den endgültigen code vernünftig

Vielleicht sollte man dann noch erläutern, dass in eine unsortierte Liste natürlich Listenelemente gehören und nicht einfach nur drei Punkte. Das ergäbe ja überhaupt keinen Sinn sonst!

dass die 3 punkte eine auslassung anzeigen ist klar ;)

[ChrisB]

Hi,

Richtig... Hätte ich wirklich erwähnen müssen, dass es sich um ein kleines Codeschnipsel zur Verdeutlichung handelt? Da finde ich "1.Spalte" und "2.Spalte" durchaus nicht verkehrt.

Wir koennen hier schlecht beurteilen, ob du das "nur zu Beispielzwecken" gemacht hast - oder ob du echte Fehler in deinen Code einbaust, weil es dir an Ahnung fehlt.
Deshalb waere es hilfreich, wenn du auch bei Beispielen zumindest so viel Sorgfalt walten laesst, dass in der Hinsicht keine Zweifel entstehen koennen. Das erspart dir und uns dann erstens diesbezuegliche Hinweise, und verhindert zweitens auch, dass jemand anderes, der Beispielcode spaeter im Archiv findet, diesen ggf. fehlerhaft uebernimmt.

MfG ChrisB