 01 - CSS-formatierte Textlinks (vertikales Menü)
Hier werden Textlinks mittels CSS-Anweisungen formatiert. Die Einbindung der CSS-Zuweisungen erfolgt durch Notierung der CSS-Klasse mit dem Attribut 'class' in jedem einzelnen Link.
Die Textlinks innerhalb einer Tabelle (mit einer einzigen Tabellenzelle) sind untereinander angeordnet und werden durch eine Grafik optisch voneinander getrennt. Optional ist die vorangestelle Minigrafik.
 Die Formatierung des Tabellenrandes erfolgt ebenfalls mit CSS
Ein Menü ohne großen Aufwand.
Das Menü steht innerhalb einer 155 Pixel breiten Tabelle mit 2 Tabellenzeilen.
Der Menütitel steht in der ersten Zeile und wird durch die unterschiedlich festgelegte Hintergrundfarbe hervorgehoben.Sämtliche Links stehen in der zweiten Tabellenzeile (mit lediglich einer Tabellenzelle).
Dadurch erfolgt ein schneller Aufbau und eine schnelle Anzeige. Die Trennung / der Abstand der Links wird optisch durch ein eingefügtes Image (sperator.gif oder dots155.gif) erreicht.
Formatierung der Textlink mit CSS-Angaben festgelegt für
a.textlink { Anweisungen für Links }
a.textlink:visited { Anweisungen für besuchte Links }
a.textlink:hover { Anweisungen für MouseOver }
<a class="textlink" href="datei.htm">Das sind Textlinks </a><br>
CSS-Anweisungen im HEAD (Beispiel 01 + 02)
<style type="text/css">
<!--
a.textlink {
color: #000000;
text-decoration: none;
font-family: Verdana,Arial,Helvetica;
font-size: 8pt;
text-transform: none;
line-height: 14px;
}
a.textlink:visited {
color: #000000;
text-decoration: none;
font-family: Verdana,Arial,Helvetica;
font-size: 8pt;
text-transform: none;
padding: 10 0 10 0;
}
a.textlink:hover {
color: #FF0080;
font-weight: normal;
}
-->
</style>
Images Auswahl:
Hintergrund:
| 
| bg03.gif | Menü 1 blau |
Seperator 01:
| 
| seperator02.gif
| Höhe 4 Pixel, davon
2 Pixel transparent
|
Seperator 02:
| 
| dots155-01.gif
| Höhe 3 Pixel, transparent
|
Pfeil:
|
|
pfeil-klein.gif | 10 x 9 px |
Punkt:
|
|
punkt-kl.gif | 8 x 15 px |
Pfeil rechts:
|
|
pfeil-rechts.gif | 11 x 11 px
|
Pfeil:
|
|
arrow-02.gif | 8 x 7 px |
Punkt:
|
|
arrow-03.gif | 8 x 7 px |
Pfeil rechts:
|
|
arrow-04.gif | 6 x 5 px
|
Eine Anpassung Menüs ist möglich
- durch Änderung der Textfarbe für Link und MouseOver (hover)
- durch Änderung der Textgröße + Schrifttype
- durch ein Hintergrundimage
- durch eine Hintergrundfarbe
- durch Formatierung des Tabellenrands
CSS-Formatierung Tabellenrand
<table style="border: 1px solid #00BF00;" ...
Hintergrundgrafik
<table background="bg03.gif" ...
| 
WWW.WEB-TOOLBOX.NET
Quelltext 
ZURÜCK 