Das CSS3 Modul Namens Multi-column layout ist eine wirklich wunderbare Sache, die leider noch nicht von allen Browsern verstanden wird. Mit Hilfe diverser “column-Eigenschaften” kann zb. in Windeseile ein Text in 3 oder mehr spalten dargstellt werden.
Hier ein kleines Beispiel mit 3 Spalten (Firefox & Mozilla only)
Nein, meine Texte les ich nicht, so nicht, stöhnte Oxmox. Er war mit Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel) zugange. Sie warteten auf die fette Gill, um bei der Bank of Helvetica die Kapitälchen in Kapital umzuwandeln. Oxmox liess nicht locker. Ich fleh euch an, rettet meine Copy, gebt meinem Body nochn Durchschuss! Kein Problem, erbarmte sich Old Face Baskerville, streichelte seinen Hund, zog seine einspaltige Poppl, legte an und traf! (Zeidank nichts Ernstes � nurn bisschen Fraktur.) Oxmox: Danke, ist jetzt mit Abstand besser. Derweil jumpte der Fox leise over the Buhl, die sich mal wieder immerdar wie jedes Jahr gesellte. Diesmal war Guaredisch ihr Erwählter, weil seine Laufweite einem vollgetankten Bodoni entsprach und seine ungezügelte Unterlänge ihre Serifen so serafisch streifte.
Erklärung des Beispieles
Für dieses Beispiel wurde einfach nur dem p Tag in dem sich der Text befindet folgende Eigenschaft gegeben:
column-count:3; column-gap:20px; height:240px;
Damit das ganze auch im Firefox funktioniert muss man den schon altbekannten -moz- prefix an die Eigenschaften hängen also folgendermaßen: -moz-column-count:3; -moz-column-gap:20px;
<p style="column-count:3; column-gap:20px; -moz-column-count:3; -moz-column-gap:20px; height:240px;">Hier steht dann der Fließtext.... </p>
Eigenschaften
Folgende Eigenschaften stehen für die Arbeit mit columns zur Verfügung
- column-count Anzahl der Spalten
- column-width Spalten Breite
- column-min-width Mindestbreite der Spalten
- column-width-policy Verhalten der Spaltenbreite (flexible, strict, inherit)
- column-gap Abstand zwischen den Spalten (wie padding)
- column-rule Rand zwischen den Spalten (wie border)
- column-rule-color Randfarbe
- column-rule-style Randart
- column-rule-width Randbreite
- column-span Anzahl der Spalten die das Element umspannen soll
Unterstützt wird diese praktische und wirklich nützliche CSS3 Eigenschaft bislang nur von Mozilla 1.8+ (Firefox 1.5+).
Mehr Infos über das CSS3 Multi-Column Layout Modul
Florian Stanek schreibt:
Super Sache mit den Spalten. Ich freute mich schon sehr auf den IE7, damit ich diese Eigenschaften verwenden konnte, doch meine Freude war getrübt beim ausprobieren des IE7 Beta1. 2 und schließlich mit der final version.
MS ließ verlauten, dass sie keine halbfertigen Sachen(CSS3) in Ihre Browser einbauen. Schade, denn jetzt muss man vielleicht wieder mehrere Jahre warten bis der IE8 kommt….
Zum Glück interprediert jetzt der IE7 das Boxmodell laut CSS Deffinition *gg
Es gab da mal vor vielen Jahren einen HTML Befehl der Spalten erzeugte. Leider nur für Netscape 3. Den Namen hab ich leider vergessen, weil eh nicht mehr funktioniert hat.