 14 Zuweisung der Formatierung über 'ID' (horizontales Menü)
Hier werden die CSS-Anweisungen für die <a>-Tags nicht über das Attribut 'class' zugewiesen, das in jedem Link notiert sein müsste. Die Wertzuweisung erfolgt zentral über eine Definition für das übergeordnete Element (hier eine Tabelle) mit einer ID. Somit gelten die Anweisungen für alle Inhalte (Links) dieser Tabelle.
CSS-Anweisungen bestimmen das Erscheinungsbild für die einzelnen Textlinks in einem horizontalen Menü! Die Zuweisung der Formatierung erfolgt über das Universalattribut 'id'.
Vorteile dieses Menüs:
1) die gesamte Breite anklickbar (nicht nur der Text)
2) leiche Anpassung
3) keine Notierung von Unterklassen in den Links
CSS-Anweisungssyntax:
#map a { Anweisungen für Links innerhalb des Elements mit der ID 'map' }
#map a:visited { Anweisungen für besuchte Links }
#map a:hover { Anweisungen für MouseOver }
Zuordnung durch die Notierung der ID 'map':
<table id="map" height="20" border="0" ... >
<tr>
<td> <a href=" ... </a></td>
<td> <a href=" ... </a></td>
</tr>
</table>
Alle Links des Menüs stehen innerhalb einer Tabelle mit dem Universalattribut ID (id="map"). Die CSS-Anweisungen werden so den Links innerhalb dieser Tabelle zugeordnet. Alle Links innerhalb dieser Tabelle haben nun die Klasse 'map a', ohne das man das in jedem Link einzeln notieren muss.
In der Tabelle ist also die CSS-Formatierung über eine eingetragene ID mit der CSS-Klasse "map" 'verbunden'.
Aufwand:
- CSS-Anweisungen im Head notieren
- Menülinks in einer Tabelle platzieren
- Linkbreite und Tabellenbreite anpassen
- Farben und Textformatierung anpassen
1) Laden sie einfach das Beispiel als ZIP-Datei herunter oder
2) Kopieren sie die Anweisungen aus der Textdatei
und experimentieren mit Farben und Formatierung der Textlinks.
Wichtig:
Die CSS-Unterklasse "#map" bestimmt Formatierungen für die Links. Zur Kompatibltät (bei dieser Form der Notierung der CSS-Anweisungen) der Darstellung in unterschiedlichen Browsern habe ich die Links in je einer Tabellenzelle notiert.
CSS-Anweisungen:
#map a {
display:block;
color:#FFFFFF;
text-decoration:none ;
font-family:"Trebuchet MS",Tahoma,Arial,Helvetica;
text-transform:none;
font-size: 12px;
cursor: hand;
border: 1px solid #FFFFFF;
width:105px;
padding-top: 3px;
padding-bottom: 3px;
margin:0px;
text-align: center;
}
#map a:visited{
display:block;
color:#FFFFFF;
text-decoration:none ;
font-family:"Trebuchet MS",Tahoma,Arial,Helvetica;
text-transform:none;
font-size: 12px;
cursor: hand;
border: 1px solid #FFFFFF;
width:105px;
padding-top: 3px;
padding-bottom: 3px;
margin:0px;
text-align: center;
}
#map a:active{
display:block;
color:#FFFFFF;
background-color:#F20000;
text-decoration:none ;
font-family:"Trebuchet MS",Tahoma,Arial,Helvetica;
text-transform:none;
font-size: 12px;
cursor: hand;
border: 1px solid #000000;
width:105px;
padding-top: 3px;
padding-bottom: 3px;
text-align: center;
}
#map a:hover {
display:block;
color:#000000;
background-color:#FFFFFF;
text-decoration:none ;
font-family:"Trebuchet MS",Tahoma,Arial,Helvetica;
text-transform:none;
font-size: 12px;
cursor: hand;
border: 1px solid #000000;
width:105px;
padding-top: 3px;
padding-bottom: 3px;
text-align: center;
}
#map
{
color: #009F00;
text-decoration:none ;
font-family:"Trebuchet MS",Tahoma,Arial,Helvetica;
font-size: 12px;
}
|
WWW.WEB-TOOLBOX.NET
Quellcode 
ZURÜCK