Webdesign, Tutorials und mehr - Webmasterpro.de

CSS 3 Columns - Mehrspalten Layout

Mit CSS 3 Column ist es möglich schnell und sauber Mehrspalten Layouts zu realisieren.
Mit nur wenigen Eigenschaften kann man einen langweilig anmutenden Fließtext in ein schickes Zeitungsdesign überführen.

Als Beispiel für den Artikel haben wir folgenden HTML Code

1
2
3
4
5
6
7

<div id="article">
    <h1>Überschrift des Artikels</h1>
    <img src="/blau.jpg" /> 
    <p>
        Artikel Text
    </p>    
</div>

Im Firefox 4 ohne CSS sieht es so aus

Column Count - Spaltenanzahl

Grundsätzlich gibt es zwei Möglichkeiten mit denen man festlegen kann, in wie viele Spalten der Text eingeteilt werden soll. Die erste Möglichkeit ist column-count, mit dieser beschäftigen wir uns in diesem Abschnitt und im nachfolgenden Teil lernen wir column-width kennen.
Mit der Eigenschaft column-count kann man den Text in beliebig viele Spalten einteilen.
Jedoch gilt es die Browser Präfixe zu beachten, für den Firefox wäre dies -moz-, für Chrome und Safari -webkit-.
Fügen wir zu unserer HTML Seite folgenden CSS Code hinzu.

1
2
3
4
5
6
7

#article {
    margin: 0 auto;
    width: 75%; 
    column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
}

Um den Text transformieren zu können, benötigen wir nur den umschließenden Container, im diesen Fall article und weisen diesem die entsprechenden Eigenschaften zu.
Wenn wir dies nun im Browser ausgeben erhalten wir folgende Ausgabe.

Zu beachten gilt bei dieser Methode, dass die Höhe automatisch angepasst wird d.h. wenn die Schriftgröße erhöht wird, wird auch entsprechend mehr Platz nach unten benötigt.

siehe auch: CSS Referenz column-count

Column Width - Spaltenbreite

Wie weiter oben schon beschrieben, gibt es noch eine zweite Möglichkeit Spalten zu erzeugen und zwar mit column-width. Man beschreibt, wie breit eine Spalte sein darf, danach wird geschaut wie oft sie in die Parent-Box passt, der Wert des Quotienten ist nun die Anzahl der Spalten. Wieder muss die Höhe beachtet werden.

Die zweite Möglichkeit wäre nun

1
2
3
4
5
6
7

#article {
    margin: 0 auto;
    width: 75%; 
    column-width: 380px;
      -moz-column-width: 380px;
      -webkit-column-width: 380px;
}

siehe auch: CSS Referenz column-width

Column Gap - Spaltenabstand

Auch ist es möglich den Spaltenabstand zu definieren und zwar mit column-gab.
Die Spaltenabstände gelten jedoch nur für die Spalten zueinander und nicht für die Spalten zu anderen Containern.

In der CSS Datei sieht es nun folgendermaßen aus

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

#article {
    margin: 0 auto;
    width: 75%; 
    column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
    column-gap: 30px;
      -moz-column-gap: 30px;
      -webkit-column-gap: 30px;
}

siehe auch: CSS Referenz column-gap

Column Rule - Spaltengestaltung

Wenn man es noch etwas aufstylen möchte, kann man column-rule benutzen.
column-rule fasst die drei Eigenschaften column-rule-style, column-rule-color und column-rule-width zusammen. Mit der Rule Eigenschaft kann man den Spaltenabstand mit einem Strich versehen. Dabei stehen einem die gleichen Werte zur Verfügung wie man sie von der Border Eigenschaft her kennt.

siehe auch: CSS Referenz column-rule

Erweitern wir unsere CSS Datei durch folgende Angaben

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

#article {
    margin: 0 auto;
    width: 75%; 
    column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
    column-gap: 30px;
      -moz-column-gap: 30px;
      -webkit-column-gap: 30px;
    column-rule: 4px dotted #9B7A15;
      -moz-column-rule: 4px dotted #9B7A15;
      -webkit-column-rule: 4px dotted #9B7A15;
}

Wenn wir uns nun unseren frisch gestylten Text im Firefox 4 ansehen, müsste er in etwa genau so aussehen

Mit nur diesen wenigen Zeilen CSS Code wurde aus einem langweiligen Text ein sauberer Artikel im Zeitungsformat.
Nachteil: Bis jetzt wird Columns nur von wenigen Browsern unterstützt. Dazu zählt leider nicht Opera 11.

Kommentare: CSS 3 Columns - Mehrspalten Layout

Neuen Kommentar schreiben

andere Browser

Beantworten

gefällt mir, jedoch geht das nicht mit dem IE und Opera?
Oder gibts da auch hierfür noch spezielle css-Eigenschaften?

Ninos Ego am 29.04.2011 um 19:11