08 - Farblich hinterlegte Grafiken

Hier werden transparente Menügrafiken farblich hinterlegt. Über CSS-Anweisungen werden Hintergrund- Text- und Randfarben farblich angepasst.

Mit transparenten Linksymbolen kann man eine Menge anfangen! In eine Tabellenzelle eingefügt, den Hintergrund der Tabellenzelle über IDs oder CSS-Klassen entsprechend eingefärbt, können sie ihre Wunschfarbe verwenden.

TextLink 01     TextLink 02     ausgewählt     TextLink 04

Die hier verwendete Pfeil-Grafik ist 17 x 17 Pixel groß.   rechts17x17-blau.gif,      rechts17x17-grau.gif Weitere 600 Pfeil-Grafiken in meiner MINI-IMAGE-BOX

farblich hinterlegt

Wenn sie die Farben für Hintergrund und Ränder mit CSS festlegen, ist diese Menüleiste sehr einfach an die Farben ihrer Web-Seite anzupassen.

Beispiel 08-01  Unterpunkte Tabellenrand oben #BFBFBF Zellenrand rechts, unten, links #BFBFBF Zellenrand oben (Weiß) Hintergrund dunkel #300080 Hintergrund mittel #CFCFCF Hintegrund hell #FFFFFF Textlink #000080 Textlink hover #E00060

Beispiel 08-01   TextLink 01     TextLink 02     TextLink 03       TextLink 03 Sub 01       TextLink 03 Sub 02     TextLink 04     TextLink 05     TextLink 06

Beispiel 08-02  Basis-Menü Tabellenrand oben (Rot) Zellenrand rechts, unten. links (Rot) Zellenrand oben (Weiß) TD Hintergrund dunkel (Rot) TD Hintergrund hell (Weiß) Textlink (Rot) Textlink hover (Rot)

Beispiel 08-02   TextLink 01     TextLink 02     TextLink 03     TextLink 04     TextLink 05     TextLink 06

/* Menü 08-02 Basismenü */

#menu02 {
width:150px;
border-top: 1px solid #E00060;
}

#menu02 td {
border-top: 1px solid #FFFFFF;
border-right: 1px solid #E00060;
border-bottom: 1px solid #E00060;
border-left: 1px solid #E00060;
}

#menu02 a:link {
 font-family: Verdana,Arial;
 font-size: 11px;
 color: #E00060;
 text-decoration: none;
 text-transform:none;
}

#menu02 a:visited {
 font-family: Verdana,Arial;
 font-size: 11px;
 color: #E00060;
 text-decoration: none;
 text-transform:none;
}

#menu02 a:hover {
 font-family: Verdana,Arial;
 text-decoration: none;
 color: #000000;
 text-transform:none;
}

#menu02 .bg01 {background: #E00060;width:18px;}
#menu02 .bg02 {background: #FFFFFF;width:125px;}

<table id="menu02" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg01" ...
<td class="bg02" ...

Alternatives Beispiel 08-03 Tabellenrand oben (Weiß) Zellenrand rechts, unten. links (Grün) Zellenrand oben (Weiß) TD Hintergrund dunkel (Grün) TD Hintergrund mittel (Grau) TD Hintergrund hell (Weiß) Textlink (Grau) Textlink hover (Rot) Für die obere Tabellen- und Zellenrandfarbe wurde 'Weiß' (Hintergrundfarbe) festgelegt.

Beispiel 08-03   TextLink 01     TextLink 02     TextLink 03       Sub 01       Sub 02       Sub 03     TextLink 04     TextLink 05     TextLink 06     TextLink 07     TextLink 08

Alternatives Beispiel 08-04 Tabellenrand oben (Hellgrau) Zellenrand rechts, unten. links (Dunkelgrau) Zellenrand oben (Weiß) TD Hintergrund dunkel (Violett) TD Hintergrund hell (Pink) TD Hintergrund dunkel Rand-Rechts (Hellgrau) TD Hintergrund hell Rand-Links (Weiß) Textlink (Weiß) Textlink hover (Schwarz)

Beispiel 08-04   TextLink 01     TextLink 02     TextLink 03     TextLink 04     TextLink 05     TextLink 06

/* Menü 08-04 */

#menu04 {
width:150px;
border-top: 1px solid #3F3F3F;
}


#menu04 td {
border-top: 1px solid #FFFFFF;
border-right: 1px solid #6F6F6F;
border-bottom: 1px solid #6F6F6F;
border-left: 1px solid #6F6F6F;
}

#menu04 a:link {
 font-family: Verdana,Arial;
 font-size: 11px;
 color: #FFFFFF;
 text-decoration: none;
 text-transform:none;
 font-variant:small-caps;
}

#menu04 a:visited {
 font-family: Verdana,Arial;
 font-size: 11px;
 color: #FFFFFF;
 text-decoration: none;
 text-transform:none;
 font-variant:small-caps;
}

#menu04 a:hover {
 font-family: Verdana,Arial;
 text-decoration: none;
 color: #000000;
}

#menu04 .selected {
 color: #FFE6FF;
}

#menu04 .selected:visited {
 color: #FFE6FF;
}

#menu04 td.bg01 {
background: #BE58D5;
border-right: 1px solid #CFCFCF;
width:18px;
}

#menu04 td.bg02 {
background: #D2BAED;
border-left: 1px solid #FFFFFF;
}

#menu04 td.bg03 {background: #EE77FF;
border-right: 1px solid #CFCFCF;
width:18px;
}