Bilder ordentlich mit CSS positionieren
Im ersten Teil der Atikelserie Bilder mit CSS Stylen möchte ich euch zeigen, wie Bilder mittels CSS ordentlich positioniert werden.
Bilder und Grafiken sind Inline-Elemente und werden in der Regel in einer Zeile mit nachfolgendem Texten platziert. Möchte man eine Grafik von einem Text umfließen lassen, so griff man früher noch auf das HTML Atrribut align zu. Heutzutage erledigt man soetwas besser mit CSS. In der Regel unterscheidet man drei Anordnungsarten: Bilder werden entweder links oder rechts oder eben auch zentriert angeordnet.
Diese Anordnungen werden mit CSS sehr einfach realisiert.
Wir packen die zu positionierende Grafik in einen DIV Container:
Grafik links ausgerichtet und rechts vom Text umgeben:
(Ich habe hier noch ein margin-right und ein margin-bottom eingefügt um den Abstand zwischen Bild und Text zu definieren.)
Grafik rechts ausgerichtet und links vom Text umgeben:
Achtung: Wird ein margin in die selbe Richtung, in die gefloated wird, definiert, so tritt der so genannte Double Float Margin Bug im Internet Explorer 6 auf. Hiergegen hilft uns das Element display:inline :
Grafik zentrieren:
Möchte man eine Grafik mit CSS zentrieren, so greift man auf das Element display:block zu und setzt den rechten und linken Außenabstand auf auto.
Dieser Artikel gehört zur Artikelserie “Bilder mit CSS stylen”:
- Bilder ordentlich mit CSS positionieren
- Rahmen um Bilder mit CSS
- Schlagschatten mittels CSS erzeugen
- Opazitäten mit CSS realisieren
- Opazitäten in der Praxis
- Transparente und ansprechende Bildtitel
Ähnliche Posts:
