Styles für Listen in Onlinedokumentation

Nummerierte und nicht nummerierte Listen sind in eines der zentralen Elemente in jeder Technischen Dokumentation und damit auch in jeder Onlinedokumentation. Dementsprechend wichtig ist eine übersichtliche und ansprechende Gestaltung der Listen. Bereits mit wenigen CSS-Befehlen lassen sich Aufzählungen und schrittweise Handlungsanleitungen übersichtlicher und attraktiver darstellen als mit den Standardfunktionen vieler Redaktionssysteme.

Wichtig ist, dass bei nummerierten Listen auch zweistellige Nummern richtig dargestellt werden.

Anmerkung: Um Platz zu sparen und für ein ruhiges Schriftbild bevorzuge ich Listen ohne linken Einzug. Die folgenden Beispiele setzen daher alle den linken Rand auf 0. Wenn Sie dies nicht wünschen, können Sie jeweils die entsprechenden Angaben zu margin und padding an Ihre eigenen Anforderungen anpassen.

Beispiel 1: Eigenes Zeichen als Aufzählungszeichen

Die CSS-Standardangaben wie list-style-type: disc oder list-style-type: circle, lassen nur wenig Gestaltungsspielraum. Mit ein paar CSS-Angaben lassen sich jedoch auch frei wählbare Zeichen als Aufzählungszeichen definieren.

Die folgende Liste nutzt z. B. einen Halbgeviertstrich (Englisch „En Dash“), der etwas länger ist und damit klarer hervortritt als ein einfacher Bindestrich.

• Item number 1
• Item number 2
• Item number 3, which has some longer text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu pretium enim. Maecenas consectetur dapibus varius.

  Plus some text in a new paragraph within the list.

Implementierung zu Beispiel 1

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

.list-with-character {
  margin-left: 0;
  padding-left: 0;
}
.list-with-character li {
  list-style: none;
  position: relative;
  padding: 3px 0 2px 25px;
}
.list-with-character li::before {
  content: '–';
  position: absolute;
  vertical-align: middle;
  left: 0;
}

Um eine Aufzählung in diesem Style darzustellen, weisen Sie oder Ihr Redaktionssystem der Liste die betreffende Klasse zu:

<ul class="list-with-character">
 <li>Item number 1</li>
 <li>Item number 2</li>    
 ...
</ul>  

Tipp: Wenn Sie noch eine Fontangabe ergänzen, können Sie z. B. auch Zeichen aus einem Symbolfont nutzen, wie z. B. Font Awesome.

Alternative Lösung mit farbigen Aufzählungszeichen

Den Aufzählungszeichen lässt sich auch eine Farbe zuweisen. Das folgende Beispiel verwendet als Zeichen einen Pfeil und als Farbe einen Blauton:

• Item number 1
• Item number 2
• Item number 3, which has some longer text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu pretium enim. Maecenas consectetur dapibus varius.

  Plus some text in a new paragraph within the list.

Der CSS-Code hierzu sieht folgendermaßen aus:

.list-with-color {
  margin-left: 0;
  padding-left: 0; 
}
.list-with-color li {
  list-style: none;
  padding: 3px 0 2px 25px;
}
.list-with-color li::before {
  content: "→";
  color: #006699;
  display: inline-block; width: 1.75em;
  margin-left: -1.75em
}

Um eine Aufzählung in diesem Style darzustellen, weisen Sie oder Ihr Redaktionssystem der Liste wieder die betreffende Klasse zu:

<ul class="list-with-color">
 <li>Item number 1</li>
 <li>Item number 2</li>    
 ...
</ul>  

Beispiel 2: Nummern ohne Punkt

Jedes überflüssige Pixel mach eine Seite unübersichtlicher. Die Punkte hinter den Nummern einer nummerierten Liste sind solche überflüssigen Pixel.

In der folgenden Liste sind die Standard-Nummern (mit Punkt) durch eine eigene Zählung ohne Punkt ersetzt. Außerdem sind die Ziffern fett, um sich etwas besser vom Fließtext abzugrenzen. Damit sie dabei aber nicht zu stark wirken und vom Inhalt ablenken, sind sie nicht schwarz, sondern grau.

1. Item number one
2. Item number two
3. Item number three, which has some longer text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu pretium enim. Maecenas consectetur dapibus varius.

   Plus some text in a new paragraph within the list.

4. Item number four
5. Item number five
6. Item number six
7. Item number seven
8. Item number eight
9. Item number nine
10. Item number ten

Implementierung zu Beispiel 2

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

.numbers-without-dots {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
.numbers-without-dots li {
  display: block;
  margin-bottom: .5em;
  margin-left: 1.5em;
}
.numbers-without-dots li::before {
  display: inline-block;
  content: counter(item) "";
  counter-increment: item;
  width: 1.5em;
  margin-left: -1.5em;
  color: rgb(175,175,175);
  font-weight: bold;  
}

Um eine Aufzählung in diesem Style darzustellen, weisen Sie oder Ihr Redaktionssystem der Liste die betreffende Klasse zu:

<ol class="numbers-without-dots">
 <li>Item number 1</li>
 <li>Item number 2</li>    
 ...
</ol>  

Beispiel 3: Große Nummern als Blickfang

Möchten Sie schrittweise Anleitungen in Ihrer Onlinedokumentation speziell hervorheben, können Sie die Nummern besonders auffällig gestalten und durch Größe und Farbe von Grundtext optisch absetzen.

Auffällige Nummern eigenen sich auch dann, wenn die Beschreibungen zu den einzelnen Schritten sehr lang sind und aus mehreren Absätzen bestehen. Nutzern fällt es beim Lesen dann leichter, die Inhalte jeweils dem richtigen Schritt zuzuordnen.

1. Item number one
2. Item number two
3. Item number three, which has some longer text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu pretium enim. Maecenas consectetur dapibus varius.

   Plus some text in a new paragraph within the list.

4. Item number four
5. Item number five
6. Item number six
7. Item number seven
8. Item number eight
9. Item number nine
10. Item number ten

Implementierung zu Beispiel 3

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

.standout {
  list-style: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
.standout li {
  position: relative;
  margin-bottom: 20px;
  padding-left: 45px;
}
.standout li:before {
  content: counter(item);
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background-color: #006699;
  border-radius: 50%;
}

Um eine Aufzählung in diesem Style darzustellen, weisen Sie oder Ihr Redaktionssystem der Liste die betreffende Klasse zu:

<ol class="standout">
 <li>Item number 1</li>
 <li>Item number 2</li>    
 ...
</ol>  

Alternative Darstellungsformen

Sie können den Style auch abwandeln:

• Um z. B. statt des Kreises ein Quadrat oder ein abgerundetes Quadrat zu verwenden, variieren Sie den Wert des Parameters border-radius.
• Um z. B. gar keine Hintergrundfarbe zu verwenden, sondern lediglich große, möglicherweise farbige Ziffern darzustellen, verändern Sie die Farbangaben entsprechend.

Beispiel 4: Grafik als Aufzählungszeichen

Sie können auch eine Grafik als Aufzählungszeichen verwenden, z. B. eine skalierbare Grafik im SVG-Format. Beispielsweise lässt sich damit gut eine Checkliste zu gestalten:

• First item
• Second item
• Third item

Implementierung zu Beispiel 4

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

Beachten Sie, dass Sie den Pfad und den Namen der Grafik gegebenenfalls anpassen müssen.

.checklist {
  list-style: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
.checklist > li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 35px;
  font-size: 16px;
}
.checklist > li:before {
  content: "";
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  background-image: url("YOUR-PATH/square.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

Um eine Aufzählung in diesem Style darzustellen, weisen Sie oder Ihr Redaktionssystem der Liste die betreffende Klasse zu:

<ul class="checklist">
 <li>Item number 1</li>
 <li>Item number 2</li>    
 ...
</ul>  

Beispiel 5: Anordnung als Gitter

In Sonderfällen kann sich auch eine Anordnung der Handlungsschritte als Gitter eignen. Wird das Fenster schmaler oder breiter, passt sich das Gitter automatisch an.

Implementierung zu Beispiel 5

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

.gridcontainer {
  max-width: 75rem;
  margin: auto;
 }
div.gridcontainer ol {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-gap: 64px;
  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
  counter-reset: n;
  padding: 0;
} 
div.gridcontainer li {
  list-style: none;
  &:before{
   font-weight: bold;
   content: counter(n);
   counter-increment: n;
   float: left;
   font-size: 3rem;
   line-height: 1.2em;
   padding-right: 0.4em;
   padding-left: 0.1em;
   margin-top: -0.25em;
   transform: translateY(0.2em);
  }
}

Um eine Aufzählung in diesem Style darzustellen, schließen Sie die Aufzählung in folgendes <div> Tag ein:

<div class="gridcontainer">
...
</div>