Newsletter

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

Login

Umfrage

  • Haben Sie Interesse an Softwaretipps für Webmaster?
  •  
  • ja
  • nein
  •  


Linktipps

Anzeige

 

www.finanzcheck.de
» 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><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 ;).

Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!

Diese Artikel könnten Sie auch interessieren:
XHTML - HTML allgemein
XHTML - Textauszeichnungen
monatlich wechselnder Link mit JavaScript
Übersichlichere Formulare
XHTML - Grafiken


 
Anzeige