 Sitemap 02 Beispiel 03
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
|
Sitemap
|
(ohne Grafiken + Abstände)
|
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 verwendeten 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(b9x9c.gif);
padding-top:5px;
padding-bottom:10px;
}
ul.map2{
list-style-image:url(user.gif);
padding-top:5px;
padding-bottom:10px;
}
.link1 {
font-family: Verdana,Arial;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #0070C0;
text-transform:none;
}
.link1:visited {
font-family: Verdana,Arial;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #0070C0;
text-transform:none;
}
.link1:hover {
text-decoration: underline;
color:#FF007F;
text-transform:none;
}
.link2 {
font-family: Verdana,Arial;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #00A050;
text-transform:none;
}
.link2:visited {
font-family: Verdana,Arial;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #00A050;
text-transform:none;
}
.link2:hover {
text-decoration: underline;
color:#FF007F;
text-transform:none;
}
-->
</style>
Zur allgemeinen Erklärung von CSS-formatierten Listen lesen sie mehr in der Rubrik CSS unter dem Menüpunkt 'eigene Aufzählungszeichen'.
|
WWW.WEB-TOOLBOX.NET
ZURÜCK