 Register A-Z - CSS
Ein Menü als Ausgangspunkt für 26 seiteninterne Sprungziele (Anker) oder auf einer Startseite für 26 Zielseiten. Gut geeignet für ein Schlagwortverzeichnis oder zusätzlich zur Sitemap als alphabetischer Index.
Beispiel für die Umsetzung>eines Registers mit 26 Grafiken.
Beispiel für die Umsetzung>eines Registers mit einer Image-Map.
Schnelle Umsetzung für ein Register
Alles ganz ohne Grafiken, einfach nur durch CSS-Angaben für Rahmen, Farbe und Abstand. Das erspart Ladezeiten und Arbeit für die Erstellung von Grafiken.
Register 01-A (width:22px;)
Das Tabellen-Tag bekommt als zusätzliches Attribut eine ID. Damit sind die CSS-Angaben für die Links innerhalb dieser Tabelle gültig. Die CSS-Anweisungen dazu stehen im HEAD der HTML-Datei.
<table height="50" id="map" cellspacing="0" ...
Die Links haben nach meinem Update keine eigene CSS-Klasse mehr
<a href="z.htm">Z</a> (Link auf eine externe Datei)
<a href="#z">Z</a> (seiteninterner Link auf einen Anker)
CSS-Notierungen im Head-Bereich (01-A)
<style type="text/css">
<!--
#map a:link {
display:block;
color:#0090E0;
text-decoration:none;
font-family:Tahoma,Arial,Helvetica;
font-size: 11px;
background-color:#FAFAFA;
cursor: hand;
border: 1px solid #AFAFAF;
width:22px;
padding: 1px;
margin: 1px;
text-align: center;
line-height:130%;
}
#map a:visited{
display:block;
color:#0090E0;
text-decoration:none ;
font-family:Tahoma,Arial,Helvetica;
font-size: 11px;
background-color:#FAFAFA;
cursor: hand;
border: 1px solid #AFAFAF;
width:22px;
padding: 1px;
margin: 1px;
text-align: center;
line-height:130%;
}
#map a:hover {
display:block;
color:#FFFFFF;
text-decoration:none ;
font-family:Tahoma,Arial,Helvetica;
font-size: 11px;
background-color:#0070C0;
cursor: hand;
border: 1px solid #000000;
width:22px;
padding: 1px;
margin: 1px;
text-align: center;
line-height: 130%;
}
-->
</style>
CSS Einstellungen für Register 01-A (Farbänderungen)
|
display:block;
font-family: Tahoma,Arial,Helvetica;
font-size: 11px;
cursor: hand;
text-align: center;
margin: 1px;
color:#0090E0;
border: 1px solid #000000;
background-color: #C0C0C0;
width: 22px;
height: 22px;
padding: 3px;
vertical-align: middle;
|
Anzeigeschema
Fonttype
Schriftgröße
cursortyp
Ausrichtung
Abstand
Textfarbe
Randformatierung
Hintergrundfarbe
Breite
Höhe
Innenabstand
Textausrichtung vertikal
|
|
WWW.WEB-TOOLBOX.NET
Anwendungsbeispiel
ZURÜCK