Zwei synchrone Spalten in Onlinedokumentation

In Technischer Dokumentation, speziell in handlungsanleitenden Texten, kann es manchmal sinnvoll sein, Text und Bild jeweils gegenüber darzustellen. Dies ist nicht nur in gedruckten Dokumenten möglich, sondern auch in einer Onlinedokumentation.

Bietet das Browserfenster nicht genug Platz für zwei Spalten, verhält sich das Layout „responsive“. Der Inhalt der zweiten Spalte rutscht dann automatisch unter den Inhalt der ersten Spalte.

Beispiel

And some normal text continues.

##### ##### ##### ### ##### ########### ########## ##### ### ## ###### ########## ######### ##### #### ###### ##### ##### ## ## ######### ########## ### #### ######### ##### ####### ###### ######### ############ ##### ### ###### ######## ## #### ## ########### ####### ###### ##### ######## # ##### #### ######## ########### ###### ###### ###### ## ######## ## ####### ########## ### ## ###### # ###### ####### ############# #### ######## ######## ####### ### ### #### ####### ###### ##### ####### #######

Implementierung

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

.facing-columns-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}
.facing-columns-left {
}
.facing-columns-right {
  background-color: #F5F5F5;
} 
@media screen and (min-width: 1200px) {
 .facing-columns-container {
   grid-template-columns: 1fr 350px;
 }
} 

In diesem Beispiel ist die Breite der rechten Spalte auf 350 Pixel festgelegt, die Breite der linken Spalte ist variabel. Bei einer Fensterbreite von weniger als 1200 Pixeln wird das Layout einspaltig und der Inhalt eines Blocks in der rechten Spalte rutscht unter den vorstehenden Block der linken Spalte. Selbstverständlich können Sie diese Werte nach Bedarf ändern.

Schritt 2: Setzen Sie an den Beginn des mehrspaltigen Bereichs folgendes HTML-Schnipsel:

<div class="facing-columns-container">

Schritt 3: Setzen Sie an das Ende des mehrspaltigen Bereichs folgendes HTML-Schnipsel:

</div>

Schritt 4: Setzen Sie zwischen diese beiden Schnipsel abwechselnd jeweils die Inhalte der rechten und linken Spalte:

linker Block
zugehöriger rechter Block
linker Block
zugehöriger rechter Block
…

Schließen Sie jeden dieser Blöcke in zwei weitere HTML-Schnipsel ein:

> Setzen Sie vor einen linken Block das HTML-Schnipsel:

<div class="facing-columns-left">

> Setzen Sie vor einen rechten Block das HTML-Schnipsel:

<div class="facing-columns-right">

> Beenden Sie jeden Block mit dem HTML-Schnipsel:

</div>

___
 
Haben Sie von diesen Informationen profitiert?

Bitte verlinken Sie im Gegenzug auf diese Seite, erwähnen Sie die Seite in sozialen Netzwerken, oder erwerben Sie eines meiner Bücher.

Vielen Dank!

Lust auf mehr? Siehe auch weitere Code-Schnipsel zum Aufwerten einer Onlinedokumentation sowie meine anderen Arbeitshilfen zur Technischen Dokumentation.