 04 - Textlink mit Hintergrundgrafik
Textverweise sollen vor einer Hintergrundgrafik dargestellt werden. Diese Hintergrundgrafik wird mit CSS eingebunden. Für einen ersten Schritt ist das alles. Der Tausch dieser Grafik bei MouseOver wäre ebenfalls möglich, erkläre ich aber in einem anderen Beispiel. |
|
Hintergrundgrafik für einen Link mit CSS einbinden
Zur Umsetzung dieser Technik könnte man dem Selektor <a> (für alle Links) die gewünschten Formatierungen zuweisen. Dann würden die Formatierungen allerdings für sämtliche Textlinks der Seite gültig sein. Möchte man das vermeiden, stehen 2 andere Methoden der Zuweisung zur Verfügung:
a) eine Zuweisung über eine selbst definierte Klasse mit dem Attribut 'class'.
b) eine Zuweisung über über das Universalattribut 'id'.
Nur für bestimmte Links sollen die CSS-Anweisugen gelten.
Einsatzbereiche für diese Technik:
1 besondere Hervorhebung für einen Textlink durch Hintergrundgrafik
Ich setze hier in der Demo eine Hintergrundgrafick mit den Abmessungen 300 × 50 Pixel ein. Der darüber angezeigte Textlink wird mit CSS unten links positioniert. Die Grafik:
Die Textlinks mit Hintergrundgrafik:
Größe: 300 x 50 Pixel. Lediglich ein Teilbereich der Hintergrundgrafik / des Linkbereichs ist für die Darstellung des Linktextes freigegeben. Der Zeilenumbruch für den Linktext wird durch die Definition des Bereichs automatisch bestimmt.
Nur als Demo, Beschreibung auf einer separaten Seite!
2 Hintergrundgrafik für einen Textlink oder ein Menü
Hier auf der ersten Seite zum Thema Hintergrundgrafiken für Textlinks, weise ich die CSS-Formatierungen über das Attribut 'class' zu. Formatierungs-Zuweisungen mit 'id' erkläre ich auf den beiden Beispielseiten
 Textlink + Hintergrund 02 Textlink + Hintergrund 03
Ich verwende in diesem Beispiel 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  .
Quellcode
Für den 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' eingetragen wurde. Nun gelten für diesen Textlink die Formarierungen, welche im CSS-Anweisungsblock für den Selektor 'button180' festgelegt wurden.
Der HTML-Code für den Link im Body der HTML-Datei
<a class="button180" href="datei.htm" Blume des Jahres 2007</a>
Die CSS-Notierungen stehen im Head-Bereich der HTML-Datei
.button180
{
hier stehen die CSS-Anweisungen für die eigene Klasse 'button180'
}
Die Eigenschaften der CSS-Klasse '.button180' (Punkt button180) werden im HEAD-Bereich des HTML-Dokumentes oder in einer externen CSS-Datei notiert. Den vollständigen Code finden Sie weiter unter und in der Textdatei (siehe oben).
Wie Sie sehen ist der Aufwand bei einer Überarbeitung Ihrer Seiten recht gering. Sie müssten lediglich das Attribut 'class' in den Textlinks nachtragen.
CSS-Anweisungen für den Button-Link (im HEAD)
In der freien Klasse '.button180' (Punkt button180) wurden die Anweisungen für den Link notiert. Wichtig sind dabei die präzisen Anweisungen für Breite und Höhe der Hintergrundgrafik, die sich in diesem Beispiel auf die verwendete Grafik '19.gif' beziehen:
 (180 x 17 px)
<style type="text/css">
<!--
.button180 {
display: block;
background-image: url(19.gif);
height: 17px;
width: 180px;
padding: 0px;
margin: 6px 0px 0px 0px;
line-height: 17px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: #0080C0;
text-align: left;
text-decoration: none;
text-transform: none;
}
.button180:visited {
color: #0080C0;
}
.button180:hover {
color:#FF007F;
/* hier könnte man den andersfarbigen Button einbinden */
}
-->
</style>
Verzicht auf padding-left:
Nun möchten Sie sicherstellen, dass der Text ein wenig nach rechts eingerückt wird. Wenn Sie dabei CSS-Techniken verwenden liegt es nahe, das mit Padding-Angaben umzusetzen.
Eine Einrückung mittels CSS-Befehl 'padding-left: 10px;' würde eine verzerrte Darstellung im FireFox ergeben, der die Padding-Werte zu der festgelegten Breite für die Hintergrundgrafik hinzurechnet. Das könnte dann in einem FireFox-Browser etwa so aussehen:
Damit der Textlink nicht am linken Rand, sondern um 2 Zeichenbreiten nach rechts versetzt angezeigt wird, verwende ich hier 2 Leerzeichen (NonBreakableSpaces). Code:
Zur Erinnerung: Mehrere (normale) Leerzeichen werden vom Browser ignoriert
<a class="button180" href="datei.htm"> Textlink - CSS</a>
vertikaler Abstand der Buttons
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 6px).
Die Reihenfolge in der Syntax dieser Notierung ist: oben, rechts, unten, links (im Uhrzeigersinn)
<style type="text/css">
<!--
.button180 {
display: block;
background-image: url(19.gif);
height: 17px;
width: 180px;
padding: 0px;
margin: 6px 0px 0px 0px;
line-height: 17px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: #0080C0;
text-align: left;
text-decoration: none;
text-transform: none;
}
.button180: visited {
color: #000000;
}
.button180:hover {
color: #0080C0;
}
-->
</style>
Grafiken
In diesem Beispiel verwende ich die Grafik "19.gif", die Sie hier durch RechtsKlick herunter laden können:
Weitere 45 Grafiken in dieser Größe finden Sie in meiner
MINI-IMAGE-BOX
Buttons 180 x 17 Pixel
|
Home • CSS • Textlink + Hintergrund 01