Sicherheit & Internet:Internet:Web-Entwicklung

CSS Tricks: Bilder mit Pep

28.4.2009 von Redaktion pcmagazin

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

ca. 1:55 Min
Ratgeber
  1. CSS Tricks: Bilder mit Pep
  2. Teil 2: CSS Tricks: Bilder mit Pep
  3. Teil 3: CSS Tricks: Bilder mit Pep
  4. Teil 4: CSS Tricks: Bilder mit Pep
  5. Teil 5: CSS Tricks: Bilder mit Pep
Bilder mit Pep
Bilder mit Pep
© Archiv

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

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

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

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

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

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

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

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