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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".