Inhaltsverzeichnis mit CSS erstellen

Ein Inhaltsverzeichnis, wie man es aus Büchern und Zeitschriften kennt, lässt sich im Grunde genommen mit CSS recht einfach erstellen. Im folgenden Beispiel lege ich dazu vier CSS Klassen an. Diese sind dabei für die Formatierung des Textes und der Seitenzahlen des Inhaltsverzeichnisses zuständig.

Das Inhaltsverzeichnis lässt sich ferner über die Anpassung der CSS Klassen individuell formatieren.

 

CSS-Inhaltsverzeichnis

Hauptkategorie:

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

 

Unterkategorie:

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:

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

.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 des Inhaltsverzeichnisses in das HTML-Dokument:

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

 

Und somit ist das Inhaltsverzeichnis fertiggestellt.

 

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 und Paste lässt sich der Code aber 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.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.