Bilder besser ausrichten

von Dr. Web Team | Veröffentlicht am 10.09.2003 | Letzte Änderung am 26.09.2008. Rubriken: Bilder, HTML, Trickkiste | Es gibt keine Kommentare

Sollen Bilder in einem fliessenden Text montiert werden, gibt es Probleme mit dem Randabständen. Damit der Abstand gewahrt bleibt, kennt HTML die Attribute hspace="" und vspace="". Doch diese Methode ist grob und unbefriedigend. CSS kann es besser.

So kennen wir es. Die normale Abstandhaltung mit hspace=""

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Das Bild wird um den selben Betrag von linken Rand und vom Text weggedrückt. Das sieht nicht immer gut aus und lässt uns kaum Spielraum. CSS bietet mehr.

Ausrichtung mit padding : left

Ausrichtung mit padding : right

Ausrichtung mit padding in alle Himmelsrichtungen

 <img style="padding
: 20px;" src="bild.gif" width="84" height="84">

Anzumerken bleibt, dass dies im Internet Explorer 6 nur möglich ist, wenn der DOCTYPE entsprechend deklariert wird. Ansonsten ignoriert der IE die Angaben. Opera und Mozilla machen keine Probleme.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Rubriken

Favicon des Tages

Bilder besser ausrichten

Verwandte Artikel

Werbung

PLUS Rubriken (€)