05 - Grafik in den Tabellenzellen

Hier möchte ich Ihnen einen kleinen Kniff verraten, mit dem man vor den Zeiten der modernen Browser eine Hintergrundgrafik für einen Textlink einbinden konnte. Ein Menü, das den Look gaphischer Buttons vermittelt, eigentlich aber lediglich Textlinks benutzt. Gut geeignet für problemlose spätere Modifikationen. Das funktioniert heute natürlich immer noch und ist für ältere Browser eine sichere Methode.

Hauptmenü 01 Hauptmenü 02 Hauptmenü 03 Hauptmenü 04 CSS: class="haupt"

Was Sie hier sehen sind nicht etwa 5 verschiedene Buttons. Nein, es handelt sich um einen einzigen Button der 5 mal als Hintergrund der 5 Tabellenzellen eingesetzt wurde. Der Linktext ist ein ganz normaler Verweis.

Die Buttons sind als jpg-Datei gespeichet (wegen der beseren Darstellung von Farbverläufen und Schatten). Die Dokument-Hintegrundfarbe muß deshalb entsprechend eingestellt werden. Ich stelle Ihnen mehr als 60 verschiedene Buttons zur Verfügung die für sich alleine betrachtet möglicherweise etwas fade wirken, eingebunden in eine Seite aber etwas mehr "hermachen".


  Häufige Fehler

	Schrift zu gross definiert
	Hauptmenü 02
	Hauptmenü 03
	Zu viele Leerzeichen als    
	Der Textlink ist viel zu lang

• Schrift zu groß
• Text zu lang
• Text in der Tabellenzelle (außerhalb des Textlinks) Leerzeichen?
• Fehler in der CSS-Datei (Angaben werden dann ignoriert)
• keine <br> hinter den Transpixeln für die Breitenbestimmung
• Tabelle: cellpadding, cellspacing, border nicht "0"
• CSS-Padding, -Spacing, -Margins (generell) für TD, TR, Table nicht "0"
• Margins / Abstand für Images extern festgelegt?

<td><a class="haupt" href="#"> Textlink </a><br></td>

<td><a class="haupt" href="#"> Textlink </a><br>
</td>

Mehr Buttons finden Sie im Hauptportal, Rubrik "Images Bilder" im Untermenü 'leere Buttons' . Insgesamt werden dort ca 6000 winzige Bildchen für den Homepagebau zum Download angeboten.

Menüpunkt 01 Menüpunkt 02 Menüpunkt 03 Menüpunkt 04 class="sub"

Beispiel: Ein grüner Button in einer "unmöglichen" Farbe. Hintergrundfarbe = Buttonfarbe

Linktext Linktext Linktext

Eine Tabelle mit 2 Spalten nimmt die Navigatin auf ! Zellengröße 24 mal 150 Pixel erzwingen durch transparentes Pixel oberhalb und links. Der Button wird als Hintergrundbild der Tabellenzelle eingefügt. <td background="buttonname.jpg"

Menüpunkt 01 Menüpunkt 02 Menüpunkt 03 Menüpunkt 04 class="sub"

Die Tabelle hat 2 Spalten. Die Zellen zur Aufnahme der Buttons sollen 150 mal 24 Pixel groß sein. Das transparente Pixel oberhalb der Buttons ist deshalb 150 Pixel breit. Das transparente Pixel neben den Buttons ist deshalb 24 Pixel hoch.

Verwendet werden durch CSS formatierte Textlinks.

Der Link: <a class="sub" href="datei.htm">Menüpunkt 01</a><br>

<style type="text/css">
<!--
.haupt {
font-family:verdana,arial,helvetica;
font-size:10px;
text-decoration:none;
text-transform:none;
color: #000000;
}
.haupt:visited {
color:#000000;
}
a.sub {
font-family:verdana,arial,helvetica;
text-decoration:none;
font-size:11px;
text-transform:uppercase;
color: #000000;
}
a.sub:visited {
color:#003300;
}
a.sub:hover{color:#FFFF00;}
-->
</style>