ziegelwand-BW

Nach dem Exkurs zum Thema Sprites geht es nun weiter mit dem Inhalt auf unserer Webseite. Oft kommt es vor, dass man zusätzlich zum Text noch ein Bild einfügen möchte. Dieses soll aber nicht davor oder dahinter stehen, sondern mitten im Text bzw. soll der Text links oder rechts drumherum fliessen. Genau wie es hier dieses Bild einer Mauer auf Mallorca macht. 😉

Für diese Methode wird man heute den  CSS-„float“-Befehl einsetzen. Diesem weist man einem „div“-Container zu mit dem Attribut „left“ oder „right“. Left bedeutet, dass der Container links steht und right eben rechts.

Als inline-code sieht das dann so aus:

<div style="width: 70px; height: 70px; float: right; overflow:hidden;">
<img src="http://philippkuhlmann.de/wp-content/uploads/2011/09/sprite1.png" alt="sprite-grafik" />
</div>
sprite-grafik

Dieses Div-Element fliesst in diesem Fall nach rechts und gibt Platz für die nachfolgenden Elemente nach links. Overflow: hidden verhindert, dass Inhalte dieses Div-Containers das Layout zerstören bzw. aus der Box herauswachsen können. In diesem Absatz ist der code eingebaut.

Damit der Abstand zum umfliessenden Text nicht zu eng wird (gerade wenn das Element links steht), sollte man mit einem Außenabstand (margin) des Bildes Platz schaffen:

Bei einem rechtsfliessenden Element sieht das so aus:

<div style="width: 70px; height: 70px; float: right; 
overflow:hidden;margin-left:8px;">
<img src="http://philippkuhlmann.de/wp-content/uploads/2011/09/sprite1.png" alt="sprite-grafik" />
</div>

Abstand nach rechts bei linksfliessendem Element:

<div style="width: 70px; height: 70px; float: left; overflow:hidden;
margin-right:8px;">
<img src="http://philippkuhlmann.de/wp-content/uploads/2011/09/sprite1.png" alt="sprite-grafik" />
</div>

Damit wir auf unserer Webseite nicht immer den ganzen Inline-Code aufschreiben müssen, legen wir eine Klasse an für links- bzw. rechtsfliessend:

.fltlft {float:left;}
.fltrght {float:right;}

Diese können wir dann in unserem Absatz-Text folgendermaßen zuweisen:

<p><img src="http://philippkuhlmann.de/wp-content/uploads/2011/09/sprite1.png" 
alt="sprite-grafik" class="fltlft"/>Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
Inhalt und noch mehr Text. Inhalt und noch mehr Text.</p>

In diesem Fall habe ich auf den äußeren Div-Container verzichtet und dem Bild die Stilanweisung gegeben. Jetzt folgt noch eine Erweiterung dieses Stils durch eine zweite Klasse (und unserer zweiten Neuigkeit): Man kann einem HTML-Element nicht nur eine Klasse, sondern mehrere zuweisen. Ich füge jetzt also noch eine weitere ein für die Regelung des Abstandes zum Text:

.abstandNachRechts {margin-right:8px;}
<p><img src="http://philippkuhlmann.de/wp-content/uploads/2011/09/sprite1.png"
alt="sprite-grafik class="fltlft abstandNachRechts" />
Inhalt und noch mehr Text. Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
Inhalt und noch mehr Text. </p>

Auf unserer Webseite sieht das dann so aus:

Bild im Absatz nach links gefloated

Bild im Absatz nach links gefloated

Den kompletten Code kann man sich hier runterladen:
html-Datei als zip

In Teil 19 von „wie erstelle ich eine Homepage“ machen wir dann die Verlinkungen zu allen Seiten bzw. erstellen diese überhaupt erstmal. Außerdem lagern wir das CSS aus und kontrollieren, ob wir nicht etwas übersehen haben 😉