CSS

Inhaltsverzeichnis mit CSS erstellen

Details: Veröffentlicht am Montag, 19. Januar 2009 12:02; Geschrieben von Jan Pionzewski

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>