Um beliebigen Text in Browsern mit HTML darzustellen, braucht es nicht vieler Kenntnisse. Am einfachsten ist es den gewünschten Text zwischen zwei <p> Tags zu packen und schon wird er als Paragraph auf der Seite dargestellt. Doch wie schafft man es Text wie in einer Zeitung über mehrere Spalten hinweg darzustellen? Also so, dass der Text unten in der ersten Spalte endet und oben in der zweiten Spalte fortgeführt wird! Das ist mit HTML nicht möglich? Falsch! Mit dem neuen CSS3 Modul: Multi-column layout soll dies nun doch möglich werden. Und wer schon den neuen Browser Firefox 1.5 besitzt, kann dies gleich hier an dieser Stelle testen!
Anzahl der Spalten festlegen
Um festzulegen, mit wievielen Spalten ein Text dargestellt werden soll, braucht man nur folgende CSS Eigenschaft anzugeben: -moz-column-count. Wobei das Prefix -moz- speziell für den Firefox definiert wurde, da es sich hierbei noch nicht um einen endgültig anerkannten Standard handelt. Sollte sich dieser Standard durchsetzen, würde man das Prefix weglassen und nur noch column-count verwenden. Als Wert gibt man nun die Anzahl der Spalten an:
Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird dieser Absatz einfach so wie immer mit nur einer Spalte dargestellt werden. Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird dieser Absatz einfach so wie immer mit nur einer Spalte dargestellt werden.
Das Ergebnis würde dann so aussehen:
Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird diesr Absatz einfach so wie immer mit nur einer Spalte dargestellt werden. Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird diesr Absatz einfach so wie immer mit nur einer Spalte dargestellt werden.
[funktioniert vorerst nur im Mozilla Firefox 1.5]
Minimale Spaltenbreite festlegen
Wenn man nun möchte, dass die Spalten nun immer mindestens 200 Pixel breit sein sollen, so kann man dies mit der Eigenschaft -moz-column-width festlegen. Die Spalten sind dann immer mindestens 200 Pixel breit. Und wenn man die Eigenschaft -moz-column-count wegläßt, dann werden automatisch immer so viele Spalten angezeigt wie für die angegebene Breite benötigt werden. Das bedeutet, das folgendes:
Dieser Text wird in einer oder mehreren
Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt. Dieser Text wird in einer oder mehreren Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt.
dann folgendes Ergebnis bringt:
Dieser Text wird in einer oder mehreren Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt. Dieser Text wird in einer oder mehreren Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt.
[funktioniert vorerst nur im Mozilla Firefox 1.5]
Und wenn ich zusätzlich noch die Anzahl der Spalten angebe, kann ich erreichen, dass immer zwei Spalten angezeigt werden, außer wenn der zur Verfügung stehende Platz nicht außreicht um mindestens zwei Spalten mit einer Breite von je 200 Pixeln anzuzeigen.
Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verfügung stehende Platz reicht nicht aus um
die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu können. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt. Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verfügung stehende Platz reicht nicht aus um die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu können. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt.
Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verfügung stehende Platz reicht nicht aus um die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu können. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt. Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verfügung stehende Platz reicht nicht aus um die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu können. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt.
[funktioniert vorerst nur im Mozilla Firefox 1.5]
Den Abstand zwischen den Spalten festlegen
Normalerweise schließen die einzelnen Spalten immer direkt aneinander an. Dies ist aber nicht immer so gewünscht, da der Text viel besser lesbar ist, wenn sich zwischen den einzelnen Spalten ein gewisser Abstand befindet. Um diesen Abstand festzulegen, kann man die CSS3 Eigenschaft -moz-column-gap verwenden.
Dieser Text wird in zwei Spalten angezeigt, wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 50 Pixeln angezeigt wird. Dieser Text wird in zwei Spalten angezeigt, wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 40 Pixeln angezeigt wird.
Das Ergebnis sollte dann wie erwartet so aussehen:
Dieser Text wird in zwei Spalten angezeigt, wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 40 Pixeln angezeigt wird. Dieser Text wird in zwei Spalten angezeigt, wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 50 Pixeln angezeigt wird.
[funktioniert vorerst nur im Mozilla Firefox 1.5]
Wie zu sehen ist, lassen sich diese neuen CSS3 Eigenschaften sehr gut für das Layout von übersichtlichen Webseiten einsetzen. Es ist abzuwarten, wann dies auch von anderen Browsern außer dem Firefox 1.5 übernommen wird. Ich bin überzeugt, dass wir in der nächsten Zeit mehr Seiten sehen werden, die sich diese Features zu Nutzen machen werden.
Hallo vielen Dank für die ausführliche Beschreibung! Nur leider ist der IE nicht fähig…
Hatte auch nach weiter Entwicklungen geschaut. Aber nicht wirklich viel gefunden.
Danke nochmal!
Viele Grüße
Natascha
Ja, leider immer noch nicht. Aber immerhin wird auch dort der Text ordentlich angezeigt, so dass die IE Nutzer es gar nicht merken, dass etwas eigentlich anders aussehen sollte.