Marginalien in Onlinedokumentation

Große, moderne Bildschirme bieten genug Platz, um auch in einer Onlinedokumentation bei Bedarf mit Marginalien arbeiten zu können. Die Marginalen können z. B. den nebenstehenden Inhalt jeweils kurz zusammenfassen. Bereits mit wenigen Zeilen CSS-Code ist so etwas umsetzbar.

Steht in einem Browserfenster nicht genug Platz für eine separate Marginalspalte zur Verfügung, rutschen die Marginalien auf eine Position oberhalb des zugehörigen Texts, ähnlich einer Zwischenüberschrift.

Beispiel

Implementierung

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

.marginalia-main-column {
  margin-left: 0px;
}
.marginalia {
  margin-left: 0;
  margin-top: 1.5em;
  float: none;
}
.marginalia::before {
  content: '[';
}  
.marginalia::after {
  content: ']';
}  
  
@media screen and (min-width: 750px) {
 .marginalia-main-column {
   margin-left: 150px;
 }
 .marginalia {
   margin-left: -150px;
   max-width: 145px;
   margin-top: 0;
   float: left;
 }
 .marginalia::before {
   content: '';
 }  
 .marginalia::after {
   content: '';
 }  
} 

In diesem Beispiel wird das Layout bei weniger als 750 Pixeln Fensterbreite einspaltig. Die Breite der Marginalspalte beträgt 150 Pixel (145 Pixel Textbreite plus 5 Pixel Lücke). Selbstverständlich können Sie diese Werte nach Bedarf ändern. Der für die Marginalien vorgesehene Style lautet marginalia.

Außerdem erscheinen bei einer Breite unter 750 Pixeln eckige Klammern um den Inhalt der Marginalien. Falls Sie dies nicht wünschen, löschen Sie betreffenden Zeichen im CSS-Code.Also, if the width is less than 750 pixels, square brackets appear around the marginalia content. If you do not want this to happen, delete these characters in the CSS code.

Schritt 2: Setzen Sie an den Beginn des Bereichs, in dem Marginalien möglich sein sollen, folgendes HTML-Schnipsel:

<div class="marginalia-main-column">

Schritt 3: Setzen Sie an das Ende des Bereichs, in dem Marginalien möglich sein sollen, folgendes HTML-Schnipsel:

</div>

Nachfolgende Schritte: Nun müssen Sie nur noch im Text allen Absätzen, die eine Marginalie werden sollen, den Style marginalia zuweisen.

___
 
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.