Erstellt man eine HTML-Seite mit verschiedenen Textblöcken und Bildern, so werden diese erst einmal im standardmäßigem Fluss von links nach recht und von oben nach unten angeordnet. Mittels CSS und der float-Eigenschaft lassen sich Blöcke an eine bestimmte Position ausrichten. Blöcke können in diesem Fall die verschiedensten HTML-Elemente, wie <img>, <div>, <table> und ähnliche sein.
Verwenden wir den folgenden HTML-Code ohne CSS-Definitionen, so werden die Elemente im standardmäßigem Fluss ausgerichtet, wie im darauffolgenden Bild dargestellt:
<img height="176" src="BspBild.JPG" width="132" /> Hier sehen Sie einen Beispieltext wenn ....
Möchte man nun das betreffende Bild auf der rechten Seite ausrichten, so dass es links vom Text umflossen wird, muss man den folgenden CSS-Code in den Head-Bereich der HTML-Seite einfügen:
<style> .FloatToRightSide { float: right; margin: 0 0 10px 10px; border: 1px solid #222000; padding: 2px; } </style>
|
Es wird hier die CSS-Klasse .FloatToRightSide definiert, die dann jeden beliebigen HTML-Element zugewiesen werden kann – in unserem Fall dem Bild-Element – was zu folgendem Ergebnis führt:
<img class="FloatToRightSide" height="176" src="BspBild.JPG" width="132" /> Hier sehen Sie einen Beispieltext bei dem das Bild rechts ausgerichtet....
Bei der CSS-Klasse wird die Eigenschaft float: right; festgelegt, womit das Bild auf der rechten Seite ausgerichtet wird. Mittels margin bestimmen Sie in welchem Abstand vom Bild der Text das Bild umfließt. Die vier Zahlen beschreiben den Abstand in der Reihenfolgen von Oben, Rechts, Unten und Links. In unserem Beispiel wurde nur ein Abstand von 10 Pixel für den vom Bild aus gesehen linken und unteren Abstand festgelegt. Mit border: 1px solid #222000 wurde ein durchgezogener (solid) Rahmen mit 1 Pixel Breite (1px) in der Farbe #222000 definiert. Die Eigenschaft padding bestimmt den Abstand des Rahmens vom Bild.
Den vollständigen Quelltext inkl. der linksseitiger Ausrichtung eines Bildes oder Bild mit Bildunterschrift können Sie sich mittels Ihres Browsers anhand der Beispielseite anschauen.
An sich ein hammer Post, nur kannst du später ein wenig ausführlicher sein? Dies wäre in der Tat genial 🙂
Danke! Plane in der Tat noch einen weiteren Blog in diese Richtung zu schreiben. Vielleicht hast du eine Idee, was du hier vermisst?