CSS Tricks: Bilder mit Pep
Positionierung, Rahmen, Schatten, Transparenz-Tricks: Mit CSS formatierte Bilder werden zum echten Hingucker auf Ihrer Website.
Bilder mit Pep Positionierung, Rahmen, Schatten, Transparenz-Tricks: Mit CSS formatierte Bilder werden zum echten Hingucker auf Ihrer Website. Bilder, die nicht rein dekorativ sind, sondern Inhalte illustrieren, sollten auf dem normalen Weg per HTML eingebunden werden. CSS-Hintergrundbilder lass...
Bilder mit Pep
Positionierung, Rahmen, Schatten, Transparenz-Tricks: Mit CSS formatierte Bilder werden zum echten Hingucker auf Ihrer Website.
Bilder, die nicht rein dekorativ sind, sondern Inhalte illustrieren, sollten auf dem normalen Weg per HTML eingebunden werden. CSS-Hintergrundbilder lassen sich dagegen wirkungsvoll für rein dekorative Grafiken benutzen. Bilder brauchen einen passenden alt-Text, der zu sehen ist, wenn das Bild nicht angezeigt wird.
Der Internet Explorer zeigt diesen bis einschließlich Version 7 als Tooltipp, was eigentlich nicht korrekt ist. Soll dieser Tooltipp aber in allen Browsern sichtbar sein, so verwenden Sie hierfür das title-Attribut.
<img src="blumen.jpg" height="100"
width="100" alt="Blumen" title="Blumenstrauß mit roten Blumen" />Bilder positionieren
Da Bilder Inline-Elemente sind, werden sie im Normalfall auf einer Zeile mit einem nachfolgenden Text platziert. Um sie vom Text umfließen zu lassen, hat man früher zum HTML-Attribut align gegriffen, inzwischen erledigt man das besser per CSS.
Typisch sind drei verschiedene Anordnungsarten: Bilder sollen entweder rechts oder links platziert und vom umgebenden Text umflossen werden, oder aber sie sollen zentriert sein. Am besten definieren Sie hierfür globale Klassen, die Sie dann mehrmals einsetzen können.
<div><img src="bild.gif"
class="links" /><p> Text</p></div>Um ein Bild links zu platzieren, sodass der Text rechts darum fließt, verwenden Sie float:
.links {
float: left;
margin-right: 5px;
margin-bottom: 5px;
}Mit margin-right sorgen Sie für den gewünschten Abstand zwischen Bild und Text, ein Abstand nach unten ist ebenfalls empfehlenswert. Entsprechend lässt sich ein Bild per float: right rechts anordnen.
.rechts {
float: right;
margin-left: 5px;
margin-bottom: 5px;
}Aufpassen muss man nur, wenn man einen Außenabstand in derselben Richtung definiert in die gefloatet wird, da dann der so genannte Double Float-Margin-Bug im Internet Explorer 6 zuschlägt: Der Internet Explorer 6 verdoppelt den Außenabstand, der in dieselbe Richtung geht, in die gefloatet wird. Dagegen hilft ein display: inline:
.links {
float: left;
margin: 5px;
display: inline;
}Zum Zentrieren des Bildes machen Sie das Bild über display: block zu einem Blockelement und vergeben für den rechten und den linken Außenabstand auto:
.zentriert {
display: block;
margin: 0 auto;
}Bisher ging es immer um größere Bilder. Soll hingegen ein kleines Icon zentriert zu einem nebenstehenden Text angezeigt werden, so erreichen Sie das über vertical-align: middle in Kombination mit einem passenden padding-bottom:
<div><img src="bild.gif"
style="padding-bottom: 8px; vertical-align: middle;" />Text</div>
