Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

XHTML/CSS-Übungen: Bilder im Fließtext

Posted by sura1 - 22. Juni 2008

Bookmark and Share

Bilder im Fließtext

(zur Vorschau auf die Grafik klicken!)

Aus gestalterischen Gründen kann es sinnvoll sein, eine Grafik mit Text umfließen zu lassen, wie im nachfolgenden Beispiel dargestellt:

Zunächst wird eine passende Grafik mit transparentem Hintergrund im GIF-Format benötigt. Diese Grafik wird in horizontale Teilbereiche aufgeschnitten. Das funktioniert am besten mit einem Grafikprogramm wie Photoshop, Gimp oder PhotoImpact. Die hier verwendete Gesamtgrafik wurde in 29 Einzelgrafiken zerstückelt.

CSS-Beispielcode:

Entscheidend kommt es nun auf die Formatierung der Grafiken an:
Sie haben zwar unterschiedliche Breiten, sind aber vom rechten Rand her identisch ausgerichtet. Also lassen sich die Grafiken rechts floaten, so dass sie rechts im Container angeordnet sind und links vom Text umgeben werden können. Damit der Text noch etwas Abstand zur Grafik hat, wir ein Seitenabstand von 28px festgelegt:

img {
float: right;
margin-left: 28px;
}

Diese Angaben allein hätten jedoch zur Folge, dass sich die Bilder selbst nebeneinander anordnen, solange der Platz im Container ausreicht. Um sicherzustellen, dass die Teilgrafiken untereinander angeordnet werden, benötigen wir noch eine vorangestellte Clear-Angabe:

img {
clear: right;
float: right;
margin-left: 28px;
}

Den XHTML-Quellcode, die CSS-Datei und die Grafiken können Sie herunterladen:

95,6KB ( Download hier )

Weiter Informationen zu diesem Thema finden sich auch hier:

http://www.tool4web.de/ps_schatten_layout.html
http://www.ohne-css.gehts-gar.net/demo/0035.html
http://www.ohne-pi.gehts-gar.net/funde/161a.php

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: