Sicherheit & Internet:Internet:Web-Entwicklung

CSS Tricks: Bilder mit Pep

Positionierung, Rahmen, Schatten, Transparenz-Tricks: Mit CSS formatierte Bilder werden zum echten Hingucker auf Ihrer Website.

Bilder mit Pep

© Archiv

Bilder mit Pep

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.

Bilder mit Pep

© Archiv

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>

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…