CSS3 Mehrspaltige Layouts by Stefanie Graf

Zwar wird der Wechsel von CSS 2 auf CSS 3 bekanntermaßen wohl noch etwas dauern. Aber eine hilfreiche Neuerung ist das CSS3-Modul “multi-column layout”. Auch wenn es nicht mehr wirklich “taufrisch” ist, möchte ich es trotzdem kurz vorstellen. Denn wenn die Seite nicht in allen Browsern gleich aussehen muß, spart man sich dadurch verschachtelte divs – von tables gar nicht zu reden…
Geeignete Anwendungen wären, Listenaufzählungen, Navigationslisten aber auch Textebereiche.

Beispiel:

Code für Mozilla-Browser:
#TopNav ul{
-moz-column-count: 3;
-moz-column-width: 32%;
-moz-column-gap: 1em;
-moz-column-rule: solid #818285 1px;}

Über column-count wird die Spaltenanzahl definiert.

Column-width bestimmt die jeweilige Spaltenbreite. Derzeit sind alle Spalten immer gleich breit & hoch. (Das kann sich zukünftig ggf. noch ändern.)

Column-gap regelt den horizontalen Abstand zwischen den einzelnen Spalten. Der Wert darf nicht negativ sein.

Mit column-rule kann eine Trennlinie definiert werden.

Bitte nicht vergessen, für Safari-Browser wird statt “-moz” einfach “-webkit” definiert.

Umbrüche:

Um Umbrüche in die nächste Spalte gezielt zu steuern, stehen folgende Eigenschaften zur Verfügung:

• break-before
• break-after
• break-inside

Versucht Umbrüche innerhalb von p Elementen zu  vermeiden:
p { break-inside: avoid-column }

Umbruch nach Bildern:
img { break-after: column }

Umbruch vor h2:
{ break-before: column; }

Weitere Möglichkeiten:

Element über alle Spalten darstellen:
h2 { colum-span: all;}

Wer noch tiefer einsteigen möchte, dem empfehle ich dazu die Seite des W3C:
http://www.w3.org/TR/css3-multicol/

Browser Kompatibilität:

mac:

• Chrome  5
• Firefox 3.6
• Safari 4

Win:

• Chrome 4
• Firefox 3, 3.6
• Safari 4

Bisher keine Unterstützung:

• IE 6,7 und 8
• Opera 10, 10.1 und 10.5

Tags: CSS, Javascript/ HTML/ CSS

This entry was posted on Tuesday, April 27th, 2010 at 11:32 and is filed under Javascript/ HTML/ CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.