 Textlink mit Hintergrundgrafik (Beispiel 02)
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 23 Pixel. Die Grafik hat unten eine Randlinie, die als optischer Trenner dient.
Weitere 45 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 #89D6AA 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 vwerwendete 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: #000000;
text-align: center;
vertical-align:middle;
background-image:url(150x23-06.gif);
background-position:0px 0px;
text-decoration:none;
padding: 0px;
margin:0px 0px 0px 0px;
line-height: 23px;
width: 150px;
display: block;
}
#menu3 a:visited {
color:#000000;
}
#menu3 a:hover {
color:#FFFFFF;
}
-->
</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>
Variante mit vertikalem Abstand
Untereinander angeordnet können sie für die Buttons einen vertikalen Abstand bestimmen. Das geschieht mit der Angabe für margin-top.
In den CSS-Anweisungen ändern sie die allgemeinen Angaben für Margins, die man explizit für jeden der 4 Abstände eintragen kan. Für margin-top wählen sie den gewünschten Abstand (hier 2px).
|
|
Die Reihenfolge für die Margins im Syntax dieser Notierung ist: oben rechts uten links (Uhrzeigersinn)
<style type="text/css">
<!--
#menu4 a{
font-family:Verdana,Arial,sans-serif;
font-size: 10px;
color: #000000;
text-align: center;
vertical-align:middle;
background-image:url(150x23-06.gif);
background-position:0px 0px;
text-decoration:none;
padding: 0px;
margin:2px 0px 0px 0px;
line-height: 23px;
width: 150px;
display: block;
}
#menu4 a:visited {
color:#000000;
}
#menu4 a:hover {
color:#FFFFFF;
}
-->
</style>
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 23 Pixel
|
HOME
Quellcode 
ZURÜCK