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.

© 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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.