 Textlink mit Hintergrundgrafik (Beispiel 01)
Einfache, schnelle Technik für einen Textlink mit Hintergrundgrafik. Mit CSS wurde für den Link eine Hintergrundgrafik festgelegt! Das ist alles. Möglich wäre auch für einen MouseOver-Effekt zusätzlich eine andersfarbige Grafik einzusetzen.
Hintergrundgrafik für einen Textlink
CSS-Anweisungen bestimmen die Hintergrundgrafik für die einzelnen Textlinks in einem vertikalen Menü! Die Zuweisung der Formatierung erfolgt über das Universalattribut 'id'.
Textlink + Hintergrund
Verwendet wird hier eine Grafik in der Größe von 150 x 24 Pixel. Die Grafik hat außen einen transparenten Randbereich, der den Abstand erzwingt.
Weitere 40 Grafiken in dieser Größe finden sie in meiner  MINI-IMAGE-BOX - (leere Buttons).
|
|
HTML-Code im Body
Sämtliche Links stehen innerhalb einer Tabelle mit nur einer einzigen Tabellenzelle. Der Tabelle wurde eine ID zugewiesen. Den Rand der Tabelle habe ich mit 1 Pixel solid #CC0099 festgelegt. Der Innenabstand wurde mit cellpadding="4" festgelegt.
Es muss nicht zwangsläufig eine Tabelle sein die ihr Menü aufnimmt. Ein <div>-Bereich z.B. ist auch geeignet. Ich benötige halt nur einen 'Container', dem ich eine ID zuweisen kann.
Für jeden Textlink mit Hintergrund-Grafik wurde im Body des HTML-Dokuments lediglich dieser HTML-Code eingetragen.
<a href="datei.htm">Textlink </a>
Der Schlüssel für die Format-Zuweisung liegt im Universalattribut 'id' für die umschließende Tabelle, für das der Wert 'menu3' eingesetzt wurde.
<table id="menu3" ...
Die zentrale Formatdefinition für das Element mit dem id-Namen 'menu3' wird im HEAD-Bereich des HTML-Dokumentes notiert (siehe unten).
CSS-Anweisungen (im HEAD)
Die CSS-Anweisungen für Links, welche innerhalb der Tabelle mit der ID 'menu3' stehen, werden durch das Gatterzeichen (#) eingeleitet. Wichtig sind die Angaben für Höhe (20px) und Breite (150px), die mit den Abmessungen für die verwerwendete Grafik überein stimmen müssen. 'display: block' ordnet die Links untereinander statt nebeneinander an. Die Angaben für die Textformatierung stehen in den ersten 6 Zeilen.
<style type="text/css">
<!--
#menu3 a{
font-family:Verdana,Arial,sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: center;
vertical-align:middle;
text-decoration:none;
background-image:url(butt-150-19.gif);
background-position:0px 0px;
padding: 0px;
margin:0px 0px 0px 0px;
line-height: 24px;
width: 150px;
display: block;
}
#menu3 a:visited {
color:#FFFFFF;
}
#menu3 a:hover {
color:#FF007F;
}
-->
</style>
Die Tabelle mit den Links
Innerhalb der einzigen Tabellenzelle der Tabelle stehen lediglich die Links, ohne <br>-Anweisungen für einen Zeilenumbruch! Wie ich ober bereits erwähnte, sorgt die Anweisung 'display: block' für eine Anordnung der Links untereinander.
<table id="menu3" border="0" cellspacing="0" cellpadding="4">
<tr><td>
<a href="dateiname.htm">Textverweis</a>
<a href="dateiname.htm">Textverweis</a>
<a href="dateiname.htm">Textverweis</a>
<a href="dateiname.htm">Textverweis</a>
<a href="dateiname.htm">Textverweis</a>
<a href="dateiname.htm">Textverweis</a>
</td></tr>
</table>
Grafiken
Weitere 45 Grafiken in dieser Größe, in diversen Farben, finden sie in meiner
MINI-IMAGE-BOX - 7000 Mini-Grafiken für den Webmaster.
Buttons 150 x 24 Pixel
|
HOME
Quellcode 
ZURÜCK