CSS-Formatierung von Sitemaps, Beispiel 3

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;
   line-height: 20px;
   }
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;
   }
DIV#sitemap P.exiilm {
   background: url(//graphics/exiilm.gif) no-repeat;
   }
DIV#sitemap P.exiitm {
   background: url(//graphics/exiitm.gif) no-repeat;
   }
DIV#sitemap P.exilm {
   background: url(//graphics/exilm.gif) no-repeat;
   }
DIV#sitemap P.ex-ilm {
   background: url(//graphics/ex-ilm.gif) no-repeat;
   }
DIV#sitemap P.exi-lm {
   background: url(//graphics/exi-lm.gif) no-repeat;
   }
DIV#sitemap P.exitm {
   background: url(//graphics/exitm.gif) no-repeat;
   }
DIV#sitemap P.ex-itm {
   background: url(//graphics/ex-itm.gif) no-repeat;
   }
DIV#sitemap P.exi-tm {
   background: url(//graphics/exi-tm.gif) no-repeat;
   }
DIV#sitemap P.exlm {
   background: url(//graphics/exlm.gif) no-repeat;
   }
DIV#sitemap P.ex-lm {
   background: url(//graphics/ex-lm.gif) no-repeat;
   }
DIV#sitemap P.ex--lm {
   background: url(//graphics/ex--lm.gif) no-repeat;
   }
DIV#sitemap P.extm {
   background: url(//graphics/extm.gif) no-repeat;
   }
DIV#sitemap P.ex-tm {
   background: url(//graphics/ex-tm.gif) no-repeat;
   }
DIV#sitemap P.ex--tm {
   background: url(//graphics/ex-tm.gif) no-repeat;
   }

Das HTML für die Sitemap:

<div id="sitemap">
<p class="hier1 extm">Abschnitt</p>
<p class="hier2 exitm">Kapitel</p>
<p class="hier3 exiitm">Unterkapitel</p>
<p class="hier3 exiilm">Unterkapitel</p>
<p class="hier2 exilm">Kapitel</p>
<p class="hier3 exi-tm">Unterkapitel</p>
<p class="hier3 exi-tm">Unterkapitel</p>
<p class="hier3 exi-lm">Unterkapitel</p>
<p class="hier1 exlm">Abschnitt</p>
<p class="hier2 ex-tm">Kapitel</p>
<p class="hier3 ex-itm">Unterkapitel</p>
<p class="hier3 ex-ilm">Unterkapitel</p>
<p class="hier2 ex-lm">Kapitel</p>
<p class="hier3 ex--lm">Unterkapitel</p>
</div>