 14 Zuweisung der Formatierung über 'ID' (verticales 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.
 31.05.2005, neue Beispiele + Download
CSS-Anweisungen bestimmen das Erscheinungsbild für die einzelnen Textlinks in einem vertikalen Menü! Die Zuweisung der Formatierung erfolgt über das Universalattribut 'id'.
Vorteile dieses Menüs:
1) die gesamte Breite ist anklickbar (nicht nur der Text)
2) leiche Anpassung der Farben und Textformatierung
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" width="190" ... ><tr><td>
<a href=" ...
<a href=" ...
<a href=" ...
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.
Tabellenrand:
Das Menü steht grundsätzlich in einer Tabelle mit nur einer Tabellenzelle. Den Rand dieser Tabelle kann man formatieren mit:
<table style="border: 1px solid #3A8EC4" bgcolor="#00AFFF" ...
Beispiel Menü 14-1
|
Beispiel Menü 14-2
|
Beispiel Menü 14-3
|
Zur optischen Aufwertung wurden zusätzlich Aufzählungszeichen (hier Pfeile) eingesetzt. Solche Listelemente finden sie in meiner
 MINI-Image-Box - ca. 6000 MiniImages (Pfeile, Aufzählungszeichen)
Info zur Demodatei und Download
In meinen Beispielen habe ich unterschiedliche Images verwendet. Die in der Demo genutzten Grafiken sind im Download (ZIP-Datei) enthalten.
            
(Pfeile + Symbole)
Sie können natürlich andere Grafiken einbinden. Ich biete ihnen die 'Glaspunkte' aus eigener Werkstatt: 12 x 12 Pixel transparent (rechtsklicken zum Download):
oder Blockgrafiken 8 x 8 Pixel transparent (rechtsklicken zum Download):
Einbindung der CSS-Anweisungen:
In den Menübeispielen die ich zum Download anbiete (ZIP-Datei) sind die CSS-Anweisungen im HEAD-Bereich notiert. Sie können die CSS-Anweisungen auch über eine externe CSS-Datei einbinden. Im Head-Bereich der HTML-Datei muss dann der Verweis zu dieser externen Datei stehen:
<link rel="stylesheet" href="dateiname.css" type="text/css">
Wichtig
Das CSS-Individualformat "#map" bestimmt Formatierungen für die Links, die in einer Tabelle von 190 px Breite stehen. Dabei soll man unbedingt beachten, dass die in den CSS-Anweisungen eingetragene Breite der Links (width) mit der Tabellenbereite im HTML-Dokument übereinstimmt.
Innerhalb der Tabelle des Menüs sind keine Zeilenümbrüche (<br>) eingetragen und der nächste Link wird automatisch darunter angezeigt. Wenn sie kleine Grafiken in den Links verwenden möchten, sollen die Grafikverweise innerhalb der <a>-Tags stehen.
Im <table>-Tag der Tabelle ist die Breite identisch mit der in der CSS-Formatierung festgelegten Linkbreite eingetragen.
<table id="map" width="190" ...
Auszug aus den CSS-Anweisungen:
#map a
{
display:block;
color:#000000;
text-decoration:none ;
font-family:Tahoma,Arial,Helvetica;
font-size: 11px;
width:190px;
background-color:#F2F2F2;
padding: 3px;
border-top:solid 1px #FFFFFF;
}
farbliche Anpassungen
Um das Menü farblich anzupassen ändern sie die Eintragungen für color (Textfarbe) und background-color (Hintergrundfarbe) in den CSS-Blocks. Dabei sollten / werden die Angaben für a und a:visited gewöhnlich mit gleichen Werten belegt.
Für visited, hover und active sind in der CSS-Datei separate Anweisungen notiert. Dabei sind die Eintragungen für 'hover' natürlich besonders interessant, weil sie dort die Hintergrundfarbe für den MouseOver-Status unterschiedich zur normalen Farbe festlegen wollen.
Zur Anpassung in den CSS-Notierungen:
Element |
hier im Beispiel |
ersetzen mit |
| color: |
#000000 |
Farbwert für Linktext |
| font-size: |
13px |
Texthöhe, Wert in Pixel |
| background-color: |
#F2F2F2 |
Farbwert für Hintergrundfarbe |
| padding: |
3px |
Abstand, Wert in Pixel |
| border-top: |
solid 1px #FFFFFF |
Farbwert und Stil für Rand oberhalb, schafft den optischen Abstand (Linie) zum nächsten Link |
|
Home
Quellcode
DOWNLOAD 
ZURÜCK 
Textlink Netball