Kategorien
Stylesheets Webentwicklung

Let’s create – Positionieren mit :float

Kleines Beispiel zur Positionierung von Bildern und Text mit der Eigenschaft float. Insbesondere das Verhalten von Bildern im Textfluß …

Kleines Beispiel zur Positionierung von Bildern und Text mit der Eigenschaft float. Insbesondere das Verhalten von Bildern im Textfluß werde ich hier darstellen. Die Codebeispiele könnt ihr zum Testen und üben hernehmen. Also dann: “Lorem ipsum”.

Beispiel 1 enthält etwas Content und ein Bild. Zu sehen ist die bekannte Positionierung mit entsprechendem Hintergrund, um es sichtbar zu gestalten:

Beispiel 1
Beispiel 1

Hier der entsprechende Code dazu.

<!doctype html>
<html>
   <head>
    <meta charset="utf-8">
    <title>Floaten</title>
	<style>
      img {margin-right: 5px; }
    </style>
   </head>
   <body>
   	<h1>Beispiel 1</h1>
		<div id="content" style="background-color: #FFE1FF;">
	   		<img src="blume.jpg" alt="Image">
	   		<p>Lorem ipsum</p>
		</div>
   </body>
</html>

Als Nächstes möchten wir den Text das Bild auf der rechten Seite umfliessen lassen. Hierfür reicht ein float:left als Eigenschaft des img-Tags in dem Style der HTML-Datei

Beispiel 2
Beispiel 2
<!doctype html>
<html>
   <head>
    <meta charset="utf-8">
    <title>Floaten</title>
    <style>
      img { float: left; margin-right: 5px; }
    </style>
   </head>
   <body>
     <h1>Beispiel 2</h1>
	<div style="background-color: #FFE1FF;">
	  <img src="blume.jpg" alt="Image">
	  <p>Lorem ipsum</p>
	</div>
   </body>
</html>

Schon ganz gut, nur möchten wir das Bild im Hintergrund darstellen und nicht nur den Text. Anders gesagt, es gefällt nicht.

Dementsprechend ein kleiner Trick. Wir erzeugen eine Klasse mit der Pseudoklasse :after. Die Eigenschaft Content erzeugt einen winzigen CSS Inhalt. Mittels :after erscheint dieser “_” NACH dem Bild. Er wird anschließend über heigth und display ausgeblendet. Die Eigenschaft clear beendet das “fliessen” des Bildes. Die Angabe display: block erzeugt hierzu ein Blockelement ähnlich <p> mit einem Zeilenumbruch. Der “_” befindet sich noch innerhalb von content so erweitert sich der Background wieder auf, diesmal das gesamte Bild.

Beispiel 3
Beispiel 3

Im folgenden auch zu diesem Teil im Anschluss das HTML.

<!doctype html>
<html>
   <head>
    <meta charset="utf-8">
    <title>Floaten</title>
    <style>
      img { float: left; margin-right: 3px; }
      .erweitern:after {
        content: "_";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
      }
    </style>
   </head>
 <body>
   	<h1>Beispiel 3</h1>
		<div id="content" class="erweitern" style="background-color: #FFE1FF;">
	   		<img src="blume.jpg" alt="Image">
	   		<p>Lorem ipsum</p>
		</div>
   </body>
</html>

Auch hier wie immer, viel Spass beim experimentieren.

Von Michael

Diplom-Ingenieur
wohnhaft in München

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert