Inhaltsverzeichnis mit CSS erstellen

Scripting-Tipps - CSS


Ein Inhaltsverzeichnis, wie man es aus Büchern und Zeitschriften kennt, lässt sich auch mit CSS recht einfach erstellen. Dazu werden für unser Beispiel vier CSS-Klassen angelegt, die für die Formatierung des Textes und der Seitenzahlen des Inhaltsverzeichnisses zuständig sind. Das Inhaltsverzeichnis lässt sich natürlich über die Anpassung der CSS-Klassen individuell formatieren.


Beispiel für die Hauptkategorie im Inhaltsverzeichnis:

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


Beispiel für eine Unterkategorie im Inhaltsverzeichnis:

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


Beispiel für die Überschrift im Inhaltsverzeichnis:

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


Beispiel für die Seitenzahl im Inhaltsverzeichnis:

.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, können wir 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 haben Sie Ihr eigenes Inhaltsverzeichnis mit reinem CSS erstellt.



Weitere Artikel: