 07 - CSS-formatierte Textlinks (horizontale Leiste)
Hier werden lediglich Textformatierungen über CSS-Anweisungen festgelgt: Texthöhe, Schrifttype und Textfarbe (unterschiedlich bei MouseOver).
Ein vertikales Menü ohne großen Aufwand. Verwendet werden durch CSS formatierte Textlinks. Die Links stehen in je einer Tabellenzelle einer Tabelle, deren Hintergrundfarbe das Erscheinungsbild festlegt. Der ein Pixel breite Abstand ensteht durch cellspacing="1" .
Beispiele: Linktext-Formatierung bei MouseOver
1) Basismodell (die Zellenbreite wird vom Browser je nach Textlänge bestimmt)
2) erzwungene Tabellenzellenbreite durch <td width="16%" ...
3) formatierter Tabellenrand
<table style="border: 1px solid #B1B4B8"
height="22" width="100%" border="0" cellspacing="1" cellpadding="0">
4) Hintergrundfarbe für den Linktext
Eine CSS-Anweisung zum Wechsel der Hintergrundfarbe bei MouseOver ist Geschmackssache. Ich halte ihn nicht für empfehlenswert, da in einigen Browsern lediglich der Text fablich hinterlegt wird. Da rate ich eher zur nachfolgenden Formatierung ...
5) Schriftgewichtung mit font-weight:bold;
Da würde ich als zusätzliche Formatiereung eher Fettschrift wählen.
 Anwendungsbeispiel
Genug Beispiele! Nun wollen sie den Quellcode kopieren. Beachten sie, dass die Formatierung der Textausrichtung (center) und das Tabellenrandes im <table>-Tag eingetragen ist. Die Linkformatierung wird mit dem Attribut 'class' im <a>-Tag zugewiesen. Die Hintergrundfarbe ist im <tr>-Tag festgelegt.
Die Tabelle (Beispiel 5)
<table style="border: 1px solid #427BD6; text-align:center;"
height="22" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr bgcolor="#9999FF">
<td width="16%"><a class="textlink03" href="#">Tour-Idee</a></td>
<td width="16%"><a class="textlink03" href="#">Strecke</a></td>
<td width="16%"><a class="textlink03" href="#">Teilnehmer</a></td>
<td width="16%"><a class="textlink03" href="#">Contest</a></td>
<td width="16%"><a class="textlink03" href="#">Wertung</a></td>
<td width="16%"><a class="textlink03" href="#">Fotos</a></td>
</tr></table>
Die CSS-Anweisungen (Beispiel 5)
<style type="text/css">
<!--
.textlink03 {
color:#000000;
text-decoration:none;
font-family:Verdana,Arial,Helvetica;
font-size:8pt;
text-transform: none;
}
.textlink03:visited {
color:#000000;
}
.textlink03:hover {
color:#000000;
font-weight:bold;
}
-->
</style>
Anregung
Wenn sie eine solche waagerechte Menüleiste im Kopf jeder Seite anzeigen ...
... könnten sie die gerade aktuelle, aufgerufene Seite farblich kennzeichnen indem sie den Tabellenzellenhintergrund entsprechend farblich festlegen mit <td bgcolor="#E00000"
Den Link für diese aktuelle Seite könnten sie deaktivieren (es macht ja keinen Sinn diesen Link anzuklicken) wenn sie einen JavaScript-Anweisung in dieser Form eintragen:
<a class="textlink04" href="javascript:void(0)">Teilnehmer</a>
So bleiben die Formatierungseigenschaften erhalten, der Link selbst ist aber inaktiv.
Variationen mit Hintergrundgrafik
Durch eine Hintergrundgrafik, die sie zusätzlich für die tabelle festlegen, können sie das Erscheinungsbild variiren. Wie Sie sehen eignet sich aber nicht jede Grafik.
Grafiken:
   
|
WWW.WEB-TOOLBOX.NET
Quellcode 
ZURÜCK 