CSS3 - Mehrspaltige Layouts - Die Details
1. column-count
- 18.0
- 12.x (*)
- 5.1 (*)
- 23.0
- 10.0
Damit legt man bei einem Blockelement (gewöhnlich ein <div>) die Anzahl der Spalten fest. Für den Firefox, Safari und Chrome muss man dabei
die browsereigenen Formate nehmen.
div.multicolumn {
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}
* Wichtig!
Leider arbeiten der Opera und Safari hier nicht besonders sauber. Denn die ziehen gerne noch eine "Leerzeile" mit in die nächste Spalte. Und da kann es abhängig von der Textmenge auch schon mal passieren, dass die letzte Spalte nicht gefüllt ist. Außerdem arbeitet der Opera auch nicht besonders sauber mit den einheitlichen Höhen. Probiert es ruhig mal aus.
PS: Kann durchaus sein, dass die übrigen Browser das ebenfalls so handhaben. Allerdings konnte ich dieses Verhalten bei denen noch nicht sehen. Wer dazu mehr Infos hat, soll mir doch bitte eine Mail schicken. Danke.
2. column-gap
- 18.0
- 12.x
- 5.1
- 23.0
- 10.0
Definiert den Abstand der einzelnen Spalten zueinander, also erste zu zweite, zweite zu dritte und so weiter. Für den Firefox, Safari und Chrome muss man ebenfalls
die browsereigenen Formate nehmen. Der Standardwert ist ohne weitere Angaben zur Schriftgröße 1em also 16 Pixel.
div.multicolumn {
...
-moz-column-gap: 40px;
-webkit-column-gap:40px;
column-gap:40px;
}
3. column-rule
- 18.0
- 12.x
- 5.1
- 23.0
- 10.0
Damit kann man die Spalten durch einen senkrechten Strich zusätzlich optisch voneinander trennen. Es ist dabei alles zugelassen, was auch für border gilt.
Auch gelten hier dieselben Regeln für die schon erwähnten Browser.
div.multicolumn {
...
-moz-column-rule: 1px dashed #414141;
-webkit-column-rule: 1px dashed #414141;
column-rule: 1px dashed #414141;
}
4. column-width
- 18.0
- 12.x
- 5.1
- 23.0
- 10.0
Kann nicht zusammen mit column-count verwendet werden, da die Anzahl der Spalten aus obiger Angabe errechnet werden. Stehen zum Beispiel 600 Pixel
in der Breite zur Verfügung, so erfolgt folgende Berechnung. column-width (200px) + column-gap (40px) = 240px. Also wird der Text in zwei Spalten
aufgeteilt (200px +40px + 200px = 440px), da eine dritte nicht mehr hineinpasst.
div.multicolumn {
-moz-column-width: 200px;
-webkit-column-width: 200px;
column-width: 200px ;
}
5. column-span
- 12.x
- 5.1
- 23.0
- 10.0
Hier kann man für einzelne Elemente festlegen, ob sie trotz der Spalten die gesamte Breite einnehmen, also sozusagen aus dem Raster fallen. Leider kommt der Firefox damit nicht klar.
div.multicolumn h2 {
-webkit-column-span: all;
column-span: all;
}
Neben all gibt es noch none als möglichen Wert. Dann befindet sich das Element wieder im Spaltenraster. Ist übrigens das Standardverhalten
und muss nur angegeben werden, wenn man ein all wieder überschreiben will.
6. Fazit
Eigentlich wäre diese Mehrspalter eine echt tolle Sache ... wenn die Browserunterstützung nicht wieder so mau wäre. Einsetzen kann man es meiner Meinung nach, aber nur ohne Gewähr, dass das Ergebnis dann auch überall identisch ist. In den kommenden Tutorials werde ich dann auf Details eingehen.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt