 Randfarbe für Seitenelemente (Images) mit CSS
Die Darstellung der Ränder für Seitenelemente können sie mit CSS bestimmen. Sie nehmen Einfluss auf Farbe, Breite und Type.
Ich möchte hier über Randfarben von Images sprechen, die nicht als Verweis (Link) dienen. In diesem Beispiel wird lediglich die Farbe des Bildrandes mittels CSS bestimmt, nicht die Breite oder der Stiel.
 Problembehandlung von Randfarben von Linkimages
Die übliche Randfarbe für Images mit eingeschaltetem Rand in den meisten Browsern ist schwarz! Die Breite des Randes kann Null (border="0") für keine Randanzeige oder ein Wert in Pixel sein (border="5") für einen 5 Pixel breiten Rand.
ohne Rand
Normales Image-Tag (Rand = 0 Pixel):
<img src="bild.jpg" width="42" height="42" border="0" alt="Text">
Ergebnis:
Rand Standardfarbe (browserdefiniert)
Normales Image-Tag (Rand = 1 Pixel):
<img src="bild.jpg" width="42" height="42" border="1" alt="Text">
Ergebnis:
Randfarbe mit CSS bestimmt
Image-Tag mit CSS-Klasse:
<img class="rand01" src="bild.jpg" ... border="5" alt="Text">
Ergebnis:
Die Randbreite wurde im Image-Tag bestimmt.
CSS-Anweisungen im Head-Bereich:
Hier wurden 4 verschiedene CSS-Klassen festgelegt, die es ermöglichen, 4 unterschiedliche Randfarben durch Einbindung der betreffenden Kklassen festzulegen.
<style type="text/css">
<!--
.rand01 {border-color: #808080;} /* grau */
.rand02 {border-color: #0000FF;} /* blau */
.rand03 {border-color: #00AD66;} /* grün */
.rand04 {border-color: #FF8450;} /* orange */
-->
</style>
Zur Anpassung folgende Änderungen:
| Element |
hier im Beispiel |
ersetzen mit |
| Klassenname |
.rand01 |
ihre Bezeichnung |
| Farbangabe |
#808080 |
Farbwert in HEX oder Farbname |
|
|
WWW.WEB-TOOLBOX.NET
Quellcode 
ZURÜCK