Topics / CSS / ID: 90

Inhaltsverzeichnisse mit CSS verschönern

Mit CSS lassen sich Inhaltsverzeichnisse von Büchern und Tutorials so formatieren, dass Unterkapitel eingerückt werden. Seitenzahlen werden rechtsbündig dargestellt und der Freiraum zwischen dem Text und der Seitenzahl wird mit Punkten aufgefüllt.

Beispiel:

Um dieses Inhaltsverzeichnis mit Hilfe von CSS zu erstellen werden folgende CSS Formatierungen benötigt.

1. .hauptkategorie {
2.   margin-top: 0.9em;
3.   font-weight: bold;
4.   font-size: 1em;
5.   width: 100%;
6.   line-height: 1em;
7.   border-bottom: #ccc 4px dotted;
8.   position: relative;
9.   height: 0.8em
10. }
11. .unterkategorie {
12.   margin-top: 0.4em;
13.   margin-left: 3em;
14.   font-weight: bold;
15.   font-size: 0.8em;
16.   width: 100%;
17.   border-bottom: #ccc 2px dotted;
18.   position: relative;
19.   height: 1.1em
20. }
21. .textinhalt {
22.   padding: 0 10px 0 0;
23.   float: left;
24.   margin-bottom: -0.3em;
25.   border-bottom: white 0.2em solid;
26.   position: relative;
27.   top: 6px;
28.   background-color: white;
29.   text-align: left
30. }
31. .zahlinhalt {
32.   float: right;
33.   margin-bottom: -0.4em;
34.   width: 44px;
35.   border-bottom: white 0.2em solid;
36.   position: relative;
37.   top: 6px;
38.   background-color: white;
39.   text-align: right;
40. }

Das zugehörige Inhaltsverzeichnis sieht Quelltextmäßig folgendermaßen aus:

1. <div class="hauptkategorie">
2. <div class="textinhalt">Kapitel 1</div>
3. <div class="zahlinhalt">1</div>
4. </div>
5. <div class="unterkategorie">
6. <div class="textinhalt">Einleitung</div>
7. <div class="zahlinhalt">2</div>
8. </div>
9. <div class="unterkategorie">
10. <div class="textinhalt">Allgemeines</div>
11. <div class="zahlinhalt">4</div>
12. </div>
13. <div class="hauptkategorie">
14. <div class="textinhalt">Kapitel 2</div>
15. <div class="zahlinhalt">5</div>
16. </div>
17. <div class="unterkategorie">
18. <div class="textinhalt">Was ist Cascading Style Sheet</div>
19. <div class="zahlinhalt">6</div>
20. </div>
21. <div class="unterkategorie">
22. <div class="textinhalt">Wie wird CSS eingebunden</div>
23. <div class="zahlinhalt">7</div>
24. </div>

eingestellt am: 30.10.2005  (4510 mal gelesen)

 Druckansicht | Übersicht CSS | zurück