Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Bloggt Ihr?
  •  
  • ja
  • nein
  • bloggen?
  •  

BlackBeats

BlackBeats.fm Stream
- ONAIR -
Hip Hop Musik vom feinsten

Blackbeats FM
» Startseite » HTML, CSS und JavaScript Tutorials

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>Unterkapitel mit einer Bezeichnung, die etwas länger ist und
  8.              <br />deshalb zwei Zeilen Text benötigt.</li>
  9.          <li class="last">Unterkapitel</li>
  10.          </ul>
  11.      </li>
  12.      <li class="last">Kapitel
  13.          <ul class="last">
  14.          <li>Unterkapitel</li>
  15.          <li>Unterkapitel</li>
  16.          <li class="last">Unterkapitel</li>
  17.          </ul>
  18.      </li>
  19.      </ul>
  20.  </li>
  21.  <li class="last">Abschnitt
  22.      <ul class="last">
  23.      <li>Kapitel
  24.          <ul>
  25.          <li>Unterkapitel</li>
  26.          <li class="last">Unterkapitel</li>
  27.          </ul>
  28.      </li>
  29.      <li class="last">Kapitel
  30.          <ul class="last">
  31.          <li class="last">Unterkapitel</li>
  32.          </ul>
  33.      </li>
  34.      </ul>
  35.  </li>
  36.  </ul>
  37.  </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 ;).


Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!
Diese Artikel könnten Sie auch interessieren:
XHTML - Textauszeichnungen
XHTML - HTML allgemein
monatlich wechselnder Link mit JavaScript
XHTML - Grafiken