CSS-Formatierung von Sitemaps, Beispiel 2

Abschnitt

Kapitel

Unterkapitel mit einer Bezeichnung, die etwas länger ist und
deshalb zwei Zeilen Text benötigt.

Unterkapitel

Kapitel

Unterkapitel

Unterkapitel

Unterkapitel

Abschnitt

Kapitel

Unterkapitel

Unterkapitel

Kapitel

Unterkapitel

.

.

Das Style-Sheet dieser Seite:

body {
   font: 15px sans-serif;
   background-color: #fff;
   color: #000;
   padding: 0;
   margin: 0;
   }
DIV#sitemap {
   padding: 1em 1.5em;
   }
DIV#sitemap P {
   padding: 0;
   border: none;
   margin: 0;
   }
DIV#sitemap P.hier1 {
   padding: 0 0 0 21px;
   }
DIV#sitemap P.hier2 {
   padding: 0 0 0 42px;
   }
DIV#sitemap P.hier3 {
   padding: 0 0 0 63px;
   }

Das HTML für die Sitemap:

<div id="sitemap">
<p class="hier1">Abschnitt</p>
<p class="hier2">Kapitel</p>
<p class="hier3">Unterkapitel</p>
<p class="hier3">Unterkapitel</p>
<p class="hier2">Kapitel</p>
<p class="hier3">Unterkapitel</p>
<p class="hier3">Unterkapitel</p>
<p class="hier3">Unterkapitel</p>
<p class="hier1">Abschnitt</p>
<p class="hier2">Kapitel</p>
<p class="hier3">Unterkapitel</p>
<p class="hier3">Unterkapitel</p>
<p class="hier2">Kapitel</p>
<p class="hier3">Unterkapitel</p>
<p class="hier1">.</p>
<p class="hier1">.</p>
</div>