Sitemap 02
    
WWW.WEB-TOOLBOX.NET
ZURÜCK SITEMAP  

 Sitemap 02 Beispiel 01

Auch für Sitemaps habe ich separate Beispielseiten ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um Varianten durch unterschiedliche CSS-Anweisungen.


   Noch was fürs Auge

Wenn sie die üblichen schwarzen Pünktchen vor den Listelementen nun noch durch eigene Symbole ersetzen möchten, reichen dazu wenige Zeilen CSS-Code

  Beispiel der Ausgabe  
Sitemap (hier ohne CSS-Formatierung)


Die Formatierung für Links und das Symbol für Aufzählungszeichen wurden durch CSS-Anweisungen festgelegt. Die Formatierungen wurden mit dem 'class-Attribut' zugewiesen.


    Die verwendetn Grafiken (hier vergrößert dargestellt) können sie durch Rechtsklick herunterladen und dürfen frei verwendet werden. Weitere Grafiken finden sie in meiner Mini-Image-Box.




HTML-Code im Body 

<ul class="map1">
<li><a class="link1" href="dateiname.htm">Textlink 1</a></li>
<li><a class="link1" href="dateiname.htm">Textlink 2</a></li>
<li><a class="link1" href="dateiname.htm">Textlink 3</a></li>

  <ul class="map2">
  <li><a class="link2" href="dateiname.htm">Textlink 3 a</a></li>
  <li><a class="link2" href="dateiname.htm">Textlink 3 b</a></li>
  <li><a class="link2" href="dateiname.htm">Textlink 3 c </a></li>
  <li><a class="link2" href="dateiname.htm">Textlink 3 d</a></li>


<li><a class="link1" href="dateiname.htm">Textlink 4</a></li>
<li><a class="link1" href="dateiname.htm">Textlink 5</a></li>
</ul>
CSS-Anweisungen im Head 
<style type="text/css">
<!--


ul.map1{
list-style-image:url(pfeil-klein09.gif);
padding-top:5px;
padding-bottom:10px;
}

ul.map2{
list-style-image:url(pfeil-klein07.gif);
padding-top:5px;
padding-bottom:10px;
}



.link1 {
font-family: Arial;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #000000;
text-transform:uppercase;
}

.link1:visited {
font-family: Arial;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #000000;
text-transform:uppercase;
}

.link1:hover {
text-decoration: underline;
color:#0070C0;
text-transform:uppercase;
}

.link2 {
font-family: Arial;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #808080;
text-transform:uppercase;
}

.link2:visited {
font-family: Arial;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #808080;
text-transform:uppercase;
}

.link2:hover {
text-decoration: underline;
color:#0090E0;
text-transform:uppercase;
}

-->
</style>


Zur allgemeinen Erklärung von CSS-formatierten Listen lesen sie mehr in der Rubrik CSS unter dem Menüpunkt 'eigene Aufzählungszeichen'.

NACH OBEN