 Textlink mit Hintergrundgrafik
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.
Hier auf der ersten Seite zum Thema Hintergrundgrafiken für Textlinks mit CSS bestimmen, weise ich die CSS-Formatierungen über eine selbst definierte Unterklasse mit dem Attribut 'class' zu. Formatierungs-Zuweisungen über das Universalattribut 'id' erkläre ich in den beiden zugehörigen Beispielen.
Hintergrundgrafik für einen Textlink
CSS-Anweisungen bestimmen eine Hintergrundgrafik für einen simplen Textlink! Die Zuweisung der Formatierung erfolgt hier über das Attribut 'class'.
Verwendet wird hier eine Grafik in der Größe von 180 x 17 Pixel. Weitere 45 Grafiken in dieser Größe finden sie in meiner  MINI-IMAGE-BOX.
So siehts aus:
HTML-Code
Für diesen Textlink mit Hintergrund-Grafik wurde im Body des HTML-Dokuments lediglich dieser HTML-Code eingetragen. Der Schlüssel liegt im Attribut 'class' für das der Wert 'button180' eingesetzt wurde.
<a class="button180" href="datei.htm" Blume des Jahhres 2007</a>
Die Eigenschaften der CSS-Klasse '.button180' (Punkt button180) wurden im HEAD-Bereich des HTML-Dokumentes notiert (siehe unten).
Verzicht auf padding-left:
Damit der Textlink nicht am linken Rand, sondern um 2 Zeichenbreiten nach rechts versetzt angezeigt wird, wurden 2 Leerzeichen (NonBreakableSpaces) verwendet. Code:
Zur Erinnerung: Mehrere (normale) Leerzeichen werden vom Browser ignoriert
Eine Einrückung mittels CSS-Befehl 'padding-left: 10px;' würde eine verzerrte Darstellung im FireFox ergeben, der die Padding-Werte zur im CSS-Bereich festgelegten Breite für die Hintergrundgrafik hinzurechnet. Das würde dann in einem FireFox-Browser etwa so aussehen:
<a class="button180" href="datei.htm"> Textlink - CSS</a>
CSS-Anweisungen für den Button (im HEAD)
In der freien Klasse '.button180' (Punkt button180) wurden die Anweisungen für den Link notiert. Wichtig sind dabei die Anweisungen für die Hintergrundgrafik, Breite und Höhe, die sich auf diese hier verwendete Grafik beziehen.
Verwendet wird hier die Grafik '19.gif' : (180 x 17 px)
<style type="text/css">
<!--
.button180{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: #6464B4;
text-align: left;
vertical-align: middle;
background-image:url(19.gif);
background-position:0px 0px;
text-decoration:none;
padding: 0px;
margin:0px;
height: 17px;
width: 180px;
display: block;
}
.button180:visited {
color:#000000;
}
.button180:hover {
color:#FF007F;
/* hier könnte man den andersfarbigen Button einbinden */
}
-->
</style>
Abstand der Buttons
Untereinander angeordnet können sie für die Buttons einen vertikalen Abstand bestimmen. Das geschieht mit der Angabe für margin-top.
Blume des Jahres 2007
Vogel des Jahres 2007
Insekt des Jahres 2007
Baum des Jahres 2007
Spinne des Jahres 2007
In der freien Klasse '.button180' (Punkt button180) ändern sie die allgemeinen Angaben für Margins, die sie nun explizit für jeden der 4 Abstände eintragen. Für margin-top wählen sie den gewünschten Abstand (hier 4px).
Die Reihenfolge im Syntax dieser Notierung ist: oben rechts uten links (Uhrzeigersinn)
<style type="text/css">
<!--
.button180{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: #6464B4;
text-align: left;
vertical-align:middle;
background-image:url(19.gif);
background-position:0px 0px;
text-decoration:none;
padding: 0px;
margin:4px 0px 0px 0px;
height: 17px;
width: 180px;
display: block;
}
.button180:visited {
color:#000000;
}
.button180:hover {
color:#FF007F;
}
-->
</style>
Grafiken
Weitere 45 Grafiken in dieser Größe finden sie in meiner MINI-IMAGE-BOX.
Buttons 180 x 17 Pixel
|
HOME
CSS-Code 
ZURÜCK