CSS-Formatierung von Sitemaps, Beispiel 4

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 DIV {
   padding: 0 0 0 24px;
   border: none;
   margin: 0;
   }
DIV#sitemap DIV.extm {
   background: url(../../graphics/extm.gif)
               no-repeat
               0% 0%;
   }
DIV#sitemap DIV.exlm {
   background: url(../../graphics/exlm.gif)
               no-repeat
               0% 0%;
   }
DIV#sitemap DIV.exim {
   background: url(../../graphics/exim.gif)
               repeat-y
               0% 0%;
   }
DIV#sitemap DIV.ex-m {
   background: none;
   }

Das HTML für die Sitemap:

<div id="sitemap">
<div class="extm"><p>Abschnitt</p></div>
<div class="exim">
  <div class="extm"><p>Kapitel</p></div></div>
<div class="exim">
  <div class="exim">
    <div class="extm"><p>Unterkapitel mit einer Bezeichnung, die etwas länger ist und
    <br />deshalb zwei Zeilen Text benötigt.</p></div></div></div>
<div class="exim">
  <div class="exim"><div class="exlm">
    <p>Unterkapitel</p></div></div></div>
<div class="exim"><div class="exlm">
  <p>Kapitel</p></div></div>
<div class="exim">
  <div class="ex-m">
    <div class="extm"><p>Unterkapitel</p></div></div></div>
<div class="exim">
  <div class="ex-m">
    <div class="extm"><p>Unterkapitel</p></div></div></div>
<div class="exim">
  <div class="ex-m">
    <div class="exlm"><p>Unterkapitel</p></div></div></div>
<div class="exlm">
  <p>Abschnitt</p></div>
<div class="ex-m">
  <div class="extm">
    <p>Kapitel</p></div></div>
<div class="ex-m">
  <div class="exim">
    <div class="extm"><p>Unterkapitel</p></div></div></div>
<div class="ex-m">
  <div class="exim">
    <div class="exlm"><p>Unterkapitel</p></div></div></div>
<div class="ex-m">
  <div class="exlm"><p>Kapitel</p></div></div>
<div class="ex-m">
  <div class="ex-m"><div class="exlm">
    <p>Unterkapitel</p></div></div></div>
</div>