Bilder und CSS

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Bilder werden in HTML mit Hilfe des <img>-Tags eingesetzt. Mit CSS können Sie bei der Darstellung eines Bildes nur wenig beeinflussen. Jedoch bieten Stylesheets auch hier einige interessante Möglichkeiten.

Wie jedes andere Objekt auf einer Webseite auch kann ein Bild mit dem <div>-Tag an eine beliebige Stelle platziert werden. Ebenso können Sie den Rand und die Ausrichtung eines Bildes durch das <div>-Tag beeinflussen und mit einer Stilregel das Aussehen des Randes verändern.

Die folgende Abbildung zeigt, was mit dem Textfluss neben einem Bild ohne CSS-Anweisungen geschieht. Das Bild taucht am linken Rand der Seite auf und ist an der Grundlinie der ersten Textzeile ausgerichtet. Der wesentliche Teil des Textabsatzes wird erst unter dem Bild dargestellt.

Bild und nebenstehender Text ohne Einsatz von CSS

Abbildung: Bild und nebenstehender Text ohne Einsatz von CSS.

CSS erweisen sich auch als besonders hilfreich dafür, Text um Bilder fließen zu lassen. Mit der float-Eigenschaft (Genaueres dazu finden Sie unter Ein einfaches CSS-Layout) können Sie ein Bild auf einer Seite sauber in den nebenstehenden Text einfassen. Die folgende Abbildung zeigt, was passiert, wenn wir das Bild mit der Eigenschaft float in die richtige Position bringen. Der Text fließt zunächst um den Bildrand und erst dann darunter. Das kommt unserem Entwurf weit mehr entgegen als die Darstellung in der obigen Abbildung.

Bild und nebenstehender Text mit Hilfe von float

Abbildung: Bild und nebenstehender Text mit Hilfe von float.

Damit alle Bilder auf Ihrer Seite von Text umflossen werden können, fügen Sie folgende Regel Ihrem Stylesheet hinzu:

img {
   float: left;
}

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg