Mehrspaltige Listen und Abschnitte in Onlinedokumentation

Eine einspaltige Darstellung verschenkt in einer Onlinedokumentation manchmal viel Platz. Punktuell kann es daher sinnvoll sein, bestimmte Inhalte mehrspaltig darzustellen – vorausgesetzt, das Browserfenster ist gerade breit genug. Schon mit wenigen Zeilen CSS-Code und zwei kleinen HTML-Schnipseln ist dies umsetzbar.

Beispiel 1: Dreispaltige Liste

Als Beispiel nachfolgend eine Liste der Länder der Europäischen Union. Verkleinern und vergrößern Sie das Browserfenster, um die Anpassung der Liste zu sehen. Reicht der Platz nicht für alle drei Spalten, wird die Darstellung zweispaltig oder einspaltig. Testen Sie es!

Und hier geht es schließlich wieder einspaltig weiter. Und hier geht es schließlich wieder einspaltig weiter. Und hier geht es schließlich wieder einspaltig weiter.

Beispiel 2: Zweispaltiger Abschnitt

Als weiteres Beispiel sehen Sie hier etwas Platzhaltertext. Verkleinern und vergrößern Sie das Browserfenster, um die Anpassung der Spalten zu sehen. Reicht der Platz nicht für beide Spalten, wird die Darstellung stattdessen einspaltig. Testen Sie es.

Und hier geht es schließlich wieder einspaltig weiter. Und hier geht es schließlich wieder einspaltig weiter. Und hier geht es schließlich wieder einspaltig weiter.

Implementierung

Schritt 1: Ergänzen Sie folgenden CSS-Code in der von Ihrer Onlinedokumentation verwendeten CSS-Datei oder im Head-Abschnitt Ihrer Seitenvorlage:

.two-columns {  
  column-count: 1;
}
.three-columns {  
  column-count: 1;
}
@media screen and (min-width: 500px) {
 .three-columns {  
   column-count: 2;
   column-gap: 35px;
   break-inside: avoid;  
 } 
}
@media screen and (min-width: 750px) {
 .two-columns {  
   column-count: 2;
   column-gap: 35px;
   break-inside: avoid;  
 }
 .three-columns {  
   column-count: 3;
   column-gap: 35px;
   break-inside: avoid;  
 } 
}

Die Breakpoints für die Anzahl der Spalten sind in diesem Beispiel auf 500 und auf 750 Pixel gesetzt. Der Abstand zwischen den Spalten beträgt 35 Pixel. Diese Werte können Sie nach Wunsch anpassen.

Schritt 2: Setzen Sie vor die dreispaltige Liste ein HTML-Schnipsel mit folgendem Inhalt:

<div class="three-columns">

Schritt 3: Setzen Sie an das Ende der dreispaltigen Liste folgendes HTML-Schnipsel.

</div>

Anmerkung: Alternativ könnten Sie die Klasse „three-columns“ auch direkt einer HTML-Liste (ol oder ul) zuweisen. Nicht alle Redaktionssysteme wandeln Listen jedoch in HTML-Listen um. Daher funktioniert die gezeigte Lösung mit einem DIV-Element universeller.

Für die zweispaltige Liste ist das Vorgehen analog: Zuerst den CSS-Code einbinden, dann folgendes HTML-Schnipsel vor den Beginn des zweispaltigen Bereichs setzen:

<div class="two-columns">

Das Ende des zweispaltigen Bereichs kennzeichnet das HTML-Schnipsel:

</div>