Spalten

Spalten mit CSS

Mit CSS3 sind zu CSS Eigenschaften hinzugekommen, mit denen auf Webseiten Spalten definiert und gestaltet werden können. Dabei wird der Inhalt eines Elements automatisch gleichmäßig auf die angegebene Anzahl an Spalten verteilt:

CSS-Eigenschaft „column-count“

Mit der CSS-Eigenschaft „column-count“ kann die Anzahl an Spalten für ein Element festgelegt werden:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

CSS-Eigenschaft „column-gap“

Mit der CSS-Eigenschaft „column-gap“ kann der Abstand zwischen den Spalten definiert werden. Die Werte werden dabei in der Einheit Pixel („px“) definiert:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

CSS-Eigenschaft „column-rule“

Mit der CSS-Eigenschaft „column-rule“ kann ein Trennstrich zwischen den Spalten eingefügt und gestaltet werden. Dabei kann Linientyp, Liniendicke und Linienfarbe festgelegt werden. Die Möglichkeiten sind die selben wie bei der Definition von Rahmen:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Hinweis: Mit den CSS-Eigenschaften „column-rule-style“, „column-rule-width“ und „column-rule-color“ können die drei Eigenschaften für den Spaltentrenner einzeln definiert werden!

CSS-Eigenschaft „column-span“

Mit der CSS-Eigenschaft „column-span“ kann für ein Element festgelegt werden über wieviele Spalten das Element dargestellt werden soll. Dabei sind nur die Werte „1“ (nur in einer Spalte) und „all“ (über alle Spalten) möglich:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Wird die CSS-Eigenschaft „column-span“ mit dem Wert „all“ für ein Element in der Mitte eines Container-Elements verwendet, wird die Spalten-Darstellung an der Stelle unterbrochen und danach weitergeführt:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

CSS-Eigenschaft „column-width“

Mit der CSS-Eigenschaft „column-width“ kann festgelegt werden, wie Breit eine Spalte mindestens sein muss. Ist über die darstellbare Breite des Browsers nicht genügend Platz, so werden weniger Spalten verwendet. Die Breite wird in der Einheit Pixel („px“) angegeben:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Abschlussübung

Als Abschlussübung kannst du das letzte Beispiel um das Thema JavaScript erweitern und die einzelnen Themen in eigene Container mit einer individuellen Hintergrundfarbe packen:

Gehe dabei wie folgt vor:

  • Entferne in der CSS-Datei die Definition für die Hintergrundfarbe aus der Deklaration für die Spalten („div.col“)
  • Füge drei Klassen hinzu mit jeweils der folgenden Hintergrundfarbe „rgba(255,55,0,0.1)“, „rgba(55,155,255,0.1)“ und „rgba(255,155,55,0.1)“
  • Verwende in der HTML-Datei für jedes Thema ein eigenes Container-Elemente
  • Füge den Container-Elementen im „class“-Attribut die entsprechende Klasse für die individuelle Hintergrundfarbe hinzu

Die Lösung kannst du dir zur Kontrolle hier herunterladen:

Download
Columns7.css
Cascading Style Sheet Datei 477 Bytes
Download
Columns7.html
HTML Dokument 2.1 KB

Quellen