Inhaltsverzeichnis mit CSS erstellen

Man kann mit CSS ein Inhaltsverzeichnis erstellen, wie man es aus Büchern und Zeitschriften kennt. Dies lässt sich dabei auch noch recht einfach realisieren. Alles, was du dazu benötigst, sind vier CSS Klassen. Diese sind dabei für die Formatierung des Textes und der Seitenzahlen zuständig.

In diesem Artikel zeige ich dir, wie das funktioniert.

CSS Inhaltsverzeichnis

Das hier vorgestellte Inhaltsverzeichnis lässt sich natürlich individualisieren. Dazu kannst du einfach die nachstehenden CSS Snippets abändern und an deine Bedürfnisse anpassen.

Nachstehend stelle ich dir nun die einzelnen Snippets vor, die du für dieses Beispiel benötigst.

Hauptkategorie


Beispiel:

div.kategorie {
  width: 80%;
  height: .8em;
  line-height: 1em;
  border-bottom: 4px dotted slategray;
  margin-top: .9em;
  font-size: 1em;
  font-weight: bold;
 }

Unterkategorie


Beispiel:

div.unterkategorie {
  width: 81%;
  margin-left: 6%;
  height: 1.1em;
  border-bottom: 2px dotted slategray;
  margin-top: .4em;
  font-size: .8em;
  font-weight: bold;
 }

Überschriften


Beispiel:

.textelement {
  float: left;
  position: relative;
  top: 5px;
  background-color: white;
  border-bottom: solid white .2em;
  margin-bottom: -.3em;
  text-align: left;
  padding-right: 10px;
 }

Seitenzahlen


Beispiel:

.seitenzahl {
  float: right;
  position: relative;
  top: 5px;
  background-color: white;
  border-bottom: solid white .2em;
  margin-bottom: -.4em;
  text-align: right;
  width: 44px;
 }

Wenn diese einzelnen CSS-Klassen im Stylesheet abgespeichert sind, kannst du nun das Inhaltsverzeichnis im HTML Dokument anlegen. Das funktioniert dann wie folgt.

Einbindung in das HTML Dokument


Beispiel:

<html>
 <head>
 <title>Inhaltsverzeichnisse mit CSS erstellen</title>
 </head>
 <body>
 
 <div class="kategorie">
  <div class="textelement">Kapitel 1</div>
  <div class="seitenzahl">1</div>
 </div>
  <div class="unterkategorie">
   <div class="textelement">Kapitel 1, Thema 1</div>
   <div class="seitenzahl">4</div>
  </div>
  <div class="unterkategorie">
   <div class="textelement">Kapitel 1, Thema 2</div>
   <div class="seitenzahl">13</div>
  </div>
 <div class="kategorie">
  <div class="textelement">Kapitel 2</div>
  <div class="seitenzahl">24</div>
 </div>
 
 </body>
</html>

Damit wäre das Inhaltsverzeichnis fertiggestellt und einsatzbereit.


Hinweis:

Rein mit CSS lässt sich ein solches Verzeichnis jedoch nicht automatisch erstellen. Dazu bedarf es weiterer Scripte bzw. den Einsatz eines CMS. Allerdings kannst du somit dein Inhaltsverzeichnis selbst gestalten und anpassen. Per Copy & Paste lässt sich der Code dabei auch ganz einfach in deine Website einbringen, ohne dass du einen zu großen Aufwand hättest. Die einzelnen Kapitel sind bspw. schnell angepasst.

Wie schon geschrieben, lässt sich das obige Beispiel überdies auch anpassen. Da CSS sehr viele Möglichkeiten zur Gestaltung bietet, kannst du deshalb deiner Fantasie freien Lauf lassen. Nur übertreiben solltest du es dabei jedoch nicht. Treibst du es im wahrsten Sinne des Wortes zu bunt, könnte das Ergebnis eher auf Ablehnung stoßen, obwohl du dir Mühe gegeben hast.