Menü Beispiel 08
    
Home
Quellcode 08-01  Quellcode 08-03  ZURÜCK SITEMAP

  08 - Farblich hinterlegte Grafiken

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


 23.10.2007 zeitgemäße CSS-Anweisungen
Mit transparenten Linksymbolen kann man eine Menge anfangen! In eine Tabellenzelle eingefügt, den Hintergrund der Tabellenzelle entsprechend eingefärbt, können Sie ihre Wunschfarbe verwenden. Das verwendete Pfeil-Image ist 17 x 17 Pixel groß.

  rechts17x17-blau.gif,      rechts17x17-grau.gif
    













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  Festgelegte Farben
  • Tabellenrand oben (Blau)
  • Zellenrand rechts, unten. links (Blau)
  • Zellenrand oben (Weiß)
  • Hintergrund dunkel (Blau)
  • Hintegrund hell (Weiß)
  • Textlink (Blau)
  • Textlink hover (Rot)
 Beispiel 08-01



   Beispiel 08-02  Festgelegte Farben
  • 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




   Notierungen

CSS-Notierungen im Head:

/* Menü 08-01 */

#menu01 {
border-top: 1px solid #300080;
}


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

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

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

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

#menu01 .bg01 {background: #300080;}
#menu01 .bg02 {background: #FFFFFF;}
CSS-Zuordnung in der Tabelle über die ID
<table id="menu01" 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



Das Menü 08-03 mit aufgeklappen Unterpunkten zeigt eine andere Variante. Ein Klick auf einen Hauptbegriff könnte ein solch 'aufgeklapptes' Menü anzeigen.

Eine Anregung zur Umsetzung finden Sie unter: Pseudo-aufklappen




   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




   CSS-Notierungen für 08-04 



/* Menü 08-04 */

#menu04 {
border-top: 1px solid #DFDFDF;
}


#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;
 font-variant:small-caps;
}

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

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

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




   Pfeilsymbole



brauchbare Images (border="1") :

  


weitere 50 transparente Pfeile imagedowload unter 'Pfeile LinksRechts-17'









NACH OBEN