Seite wählen
Anzeige
profihost-banner

CSS: Sitemap

Hier erfahren sie wie die Sitemap auf webmaster-eye.de entstanden ist und welcher Code sich dahinter verbirgt.

Das ganze ist eine leicht abgewandelte und in PHP Schleifen integrierte Version von Klaus Langenberg, der Webmaster der Seite thestyleworks.de.
Die Ursprüngliche Version von ihm sah so aus:

  • 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 ganze liegt folgendem CSS Code zugrunde:

  1.  DIV#sitemap {
  2.    padding: 1em 1.5em;
  3.    line-height: 20px;
  4.    }
  5.  DIV#sitemap LI {
  6.    padding: 0 0 0 24px;
  7.    margin: 0;
  8.    list-style-type: none;
  9.    }
  10.  DIV#sitemap LI {
  11.    background: url(../../graphics/extm.gif)
  12.                no-repeat
  13.                0% 0%;
  14.    }
  15.  DIV#sitemap LI.last {
  16.    background: url(../../graphics/exlm.gif)
  17.                no-repeat
  18.                0% 0%;
  19.    }
  20.  DIV#sitemap UL {
  21.    padding: 0 0 0 24px;
  22.    margin: 0 0 0 -24px;
  23.    list-style-type: none;
  24.    }
  25.  DIV#sitemap UL {
  26.    background: url(../../graphics/exim.gif)
  27.                repeat-y
  28.                0% 0%;
  29.    }
  30.  DIV#sitemap UL.last {
  31.    background-image: none;
  32.    }

Dieser wird mit folgendem HTML Code in die eite eingebunden:

  1.  <div id=„sitemap„>
  2.  <ul class=„last„>
  3.  <li>Abschnitt
  4.      <ul>
  5.      <li>Kapitel
  6.          <ul>
  7.          <li><br /></li>
  8.          <li class=„last„>Unterkapitel</li>
  9.          </ul>
  10.      </li>
  11.      <li class=„last„>Kapitel
  12.          <ul class=„last„>
  13.          <li>Unterkapitel</li>
  14.          <li>Unterkapitel</li>
  15.          <li class=„last„>Unterkapitel</li>
  16.          </ul>
  17.      </li>
  18.      </ul>
  19.  </li>
  20.  <li class=„last„>Abschnitt
  21.      <ul class=„last„>
  22.      <li>Kapitel
  23.          <ul>
  24.          <li>Unterkapitel</li>
  25.          <li class=„last„>Unterkapitel</li>
  26.          </ul>
  27.      </li>
  28.      <li class=„last„>Kapitel
  29.          <ul class=„last„>
  30.          <li class=„last„>Unterkapitel</li>
  31.          </ul>
  32.      </li>
  33.      </ul>
  34.  </li>
  35.  </ul>
  36.  </div>

Das ganze sieht recht einfach aus, ist es eigentlich auch, ausser man nimmt wie ich alles auseinander und packt es in PHP Code neu zusammen ;). Aber keine Angst davor, mit etwas Zeit blickt man schon sehr routiniert durch diesen Code und man merkt wie geschickt dieser aufgebaut worden ist.
Das ganze ist natürlich XHTML Konform sowie CSS Konform!
Das original Beispiel der oben genannten Seite finden sie hier:
http://www.thestyleworks.de/examples/css-sitemap/css-sitemap-07.html

Und nun viel Spass beim nachbauen und basteln 😉