 Sitemap 02 Trickkiste
Auch für Sitemaps habe ich separate Beispielseiten ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um Varianten durch unterschiedliche CSS-Anweisungen.
Positionierung Tipps + Tricks
Die Positionierung von Listlementen ist trickreich und das Ergebnis nicht in jedem Browser gleich. Ein Versuch mit 'list-style-position:inside / outside' führte bei der Sitemap zu keinem brauchbaren Ergebnis!
Mein Ziel war:
1) eigene Positionsbestimmung (Seitenabstand links in px) der ersten Liste
2) eigene Positionsbestimmung (Einrückung in px) der verschachtelten Liste / Listelemente
3) Kennzeichnung von Listelementen mit Unterpunkten durch andere Grafiken
4) Kennzeichnung von inaktiven Links durch andere Grafiken
  
  
|
|
Die (selbst hergestellten) 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
<a class="titel" href="01.htm">Schule KGS Würm</a>
<ul class="map1">
<li><a class="small" href="01.htm"> Einzugsgebiet</a></li>
<li><a class="small" href="01.htm"> Geografische Lage</a></li>
<li><a class="small" href="01.htm"> Schullogo</a></li>
<li class="passiv01"><a class="small" href="01.htm"> Schule</a></li>
<ul class="map2">
<li><a class="small" href="01.htm"> Telefon Adresse</a></li>
<li><a class="small" href="01.htm"> Schulgebäude</a></li>
<li><a class="small" href="01.htm"> Lehrerzimmer</a></li>
<li><a class="small" href="01.htm"> Schulhof</a></li>
<li><a class="small" href="01.htm"> Sporthalle</a></li>
</ul>
<li class="passiv01"><a class="small" href="01.htm"> Personal</a></li>
<ul class="map2">
<li class="passiv02"><a class="small" href="01.htm"> Fotos</a></li>
<li class="passiv02"><a class="small" href="01.htm"> Mitarbeiter</a></li>
<li><a class="small" href="01.htm"> unser Hausmeister</a></li>
<li class="passiv02"><a class="small" href="01.htm"> Reinigung</a></li>
</ul>
<li class="passiv01"><a class="small" href=""> Termine Zeiten</a></li>
<ul class="map2">
<li><a class="small" href="01.htm"> Bürozeiten Sekretariat</a></li>
<li><a class="small" href="01.htm"> Unterrichtszeiten</a></li>
<li><a class="small" href="01.htm"> Schultermine Veranstaltungen</a></li>
<li><a class="small" href="01.htm"> Schulferien in NRW</a></li>
<li><a class="small" href="01.htm"> Terminplaner A4</a></li>
</ul>
<li><a class="small" href="01.htm"> Anfahrtskarten</a></li>
</ul>
CSS-Anweisungen im Head
<style type="text/css">
<!--
.titel {
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #CCCCFF;
}
.titel:visited {
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #CCCCFF;
}
.titel:hover {
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #9900FF;
}
.small {
text-decoration:none;
color:#000000;
font-family:Verdana,Arial,Helvetica;
font-size:11px;
text-transform:none;
}
.small:visited {
text-decoration:none;
color:#000000;
font-family:Verdana,Arial,Helvetica;
font-size:11px;
text-transform:none;
}
.small:hover {
text-decoration:none;
color:#FF007F;
font-family:Verdana,Arial,Helvetica;
font-size:11px;
text-transform:none;
}
.map {
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #CCCCFF;
}
.map:visited {
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #CCCCFF;
}
ul.map1{
list-style-image:url(ordner-blau.gif);
padding-top:10px;
padding-bottom:15px;
padding-left: 0px;
margin-left: 20px;
position:relative;
}
li.map1{
padding-top:1px;
padding-bottom:10px;
paddin-leftg: 10px;
margin-left: 20px;
position:relative;
}
ul.map2{
list-style-image:url(ordner-horange.gif);
padding-top:5px;
padding-bottom:10px;
padding-left: 10px;
margin-left: 10px;
position:relative;
}
li.map2{
padding-top:10px;
padding-bottom:10px;
padding-left: 20px;
margin-left: 60px;
position:relative;
}
li.passiv01{
list-style-image:url(ordner-hblau.gif);
}
li.passiv02{
list-style-image:url(ordner-weiss.gif);
}
-->
</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