Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float

HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float

Im vorherigen Video-Training wurde das sogenannte Floating-Prinzip bereits kurz angerissen. Das Thema ist allerdings so komplex, dass hier noch einmal ein detaillierter Blick auf jenes Floaten geworfen wird. Denn tatsächlich handelt es sich dabei um ein entscheidendes Konzept in CSS. Denn nur, wenn man diese Thematik versteht, kann man tatsächlich Webseiten erstellen.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Das Floaten ist eines der entscheidenden CSS-Konzepte. Ohne das Verständnis dieses Prinzips lassen sich Webseiten nicht auf Basis von CSS erstellen. Floaten kann man hier übrigens sehr schön mit Fließen übersetzen, was die Sache auf den Punkt bringt. Letztendlich bedeutet Floaten nämlich nichts anderes, als dass ein Element sich links oder rechts neben einem anderen Element anordnet. (Im Normalfall würde das Element unterhalb eines anderen Elements stehen).

Ein erstes Beispiel soll diesen Aspekt verdeutlichen.
<p><img src="bild.jpg" />
In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 
und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>

Hier wurde ein Absatz definiert. Innerhalb dieses Absatzes befinden sich ein Bild und normaler Text.

Bilder



Ein Blick auf das Ergebnis zeigt, dass das Bild im Textfluss steht.

 
Jetzt kommt die float-Eigenschaft ins Spiel.
img { float: left;}

Auch hierzu wieder ein Blick auf das Ergebnis.

Bilder



Hier wurde das Bild also gefloatet. Der Text fließt dadurch um das Bild herum.

 
Der Eigenschaft float kann man die Werte left und right zuweisen, um das Element nach links (float: left) oder rechts (float: right) "schweben" zu lassen.

Ihr könnt auch gleich mal float: right auf das Bild anwenden.

Bilder



In diesem Fall passieren drei Dinge:

• Die Grafik wird aus dem normalen Fluss herausgenommen.
• Sie wandert im p-Element ganz nach oben.
• Sie wird so weit wie möglich rechts angezeigt.

 
Ein Blick auf die bisherigen Ergebnisse macht deutlich, dass das noch nicht wirklich hübsch aussieht. Tatsächlich fehlen die Abstände zwischen Bild und umfließendem Text. Passt die Syntax dazu folgendermaßen an:
img { 
    float: left; 
    margin-right: 20px; 
 }

Dem Bild wurde ein rechter Rand von 20 Pixel zugewiesen. Das ergibt folgenden Anblick:

Bilder



Experimentiert hier einfach ein bisschen mit den Randabständen.


 

Das Floaten beenden

Noch einmal zurück zum Bildbeispiel. Ich erweitere die Syntax um einen zusätzlichen Textabsatz.
<p><img src="bild.jpg" />In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>
<p>In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>

Das Ergebnis sieht so aus:

Bilder



 
Tatsächlich umfließt nicht nur der erste Absatz die Grafik. Gleiches gilt auch für den zweiten Textabsatz. Das liegt schlicht und ergreifend daran, dass die Grafik über den ersten Absatz nach unten hinausragt. Zum besseren Verständnis weise ich dem Absatz, in dem die Grafik enthalten ist, einfach mal eine Hintergrundfarbe zu.

Bilder



Wenn ihr euch das Ergebnis anseht, wird deutlich, dass die Grafik tatsächlich über den Absatz nach unten hinausgeht. Das ist in dieser Form natürlich nicht immer gewünscht. An diesem Punkt wird die clear-Eigenschaft interessant. Denn darüber lässt sich das Floaten beenden. clear zwingt ein folgendes Element, tatsächlich unterhalb eines gefloateten Elements zu beginnen, und nicht etwa neben diesem. Die clear-Eigenschaft kennt die folgenden Werte:

left – beendet float: left
right – beendet float: right
both – beendet sowohl float: right als auch float: left

 
Im folgenden Beispiel weise ich dem zweiten Absatz clear: left zu, um das Floaten zu beenden.
<!DOCTYPE html>
 <html lang="de">
 <head>
 <title>PSD-Tutorials.de</title>
 <meta charset="UTF-8" />
 <style>
 img {
    float: left;
     margin-right: 20px;
 }
 </style>
 </head>
 <body>
 <p style="background-color:#CCFF66;"><img src="bild.jpg" />In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>
 <p style="clear:left;">In diesem Set befinden sich 12 Eigene Formen, die ihr in euren Flyern, Backgrounds etc. einsetzen könnt. Die Formen untergliedern sich in 18, 21 und 24 Streifen sowie verschiedene Strahlenbreiten. Diese Presets sind eine gute Grundlage für schöne Effekte in euren Layouts und Bildern.</p>
 </body>
 </html>

Durch die gezeigte Syntax wird der zweite Absatz nun tatsächlich unterhalb des Bildes angezeigt.

In den meisten Fällen kann man übrigens anstelle von clear: left oder clear: right gleich clear: both nehmen. Daher empfiehlt es sich, in seinem Stylesheet einfach eine entsprechende Klasse anzulegen, die man dann bei Bedarf aufruft.
.clearing {
    clear: both;
 }

Diese Klasse könnt ihr immer dann verwenden, wenn das Floaten eines Elements beendet werden soll.
<p class="clearing">Inhalte ...</p>


 

Wozu das Floaten gut ist

Natürlich wird das Floaten nicht nur für den Textfluss im Zusammenhang mit Bildern benötigt. Tatsächlich bildet es das Grundkonzept CSS-basierter Webseiten. Denn dank dem Floaten lassen sich beispielsweise mehrspaltige Layouts ganz einfach umsetzen. Seht euch dazu folgendes Beispiel an:
<!DOCTYPE html>
 <html lang="de">
 <head>
 <title>PSD-Tutorials.de</title>
 <meta charset="UTF-8" />
 <style>
 #navi {
     float:left;
     width:12em;
     background-color:#99FFFF;
 }
 #inhalt {
     margin-left: 14em;
     background-color: #FF3333;

 }
 </style>
 </head>
 <body>
 <div id="navi">
   <ul>
     <li>Startseite</li>
     <li>Kontakt</li>
     <li>Impressum</li>
   </ul>
 </div>
 <div id="inhalt">
   Hier steht der Inhalt der Webseite.
 </div>
 </body>
 </html>

 
Hier wird ein zweispaltiges Layout aufgebaut. Das Besondere dabei: Die Spalten stehen nebeneinander.

Bilder



Und eben dieses Nebeneinanderstehen wird über das Floating-Konzept realisiert. Ausführliche Informationen zum Aufbau von Webseiten auf Basis des Floatens folgen im weiteren Verlauf dieser Reihe.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 17:25

Vielen Dank für das interessante Tutorial

Portrait von Kiasa
  • 04.05.2015 - 09:33

Herzlichen Dank für das hilfreiche Tutorial!

Portrait von ZainaPhoto
  • 11.04.2015 - 13:22

Vielen Dank für das Tutorial!

LG Zaina

Portrait von Schoki
  • 01.04.2015 - 19:41

Danke für die umfangreichen Erklärungen, jetzt hab ich es durchschaut!

Portrait von Kundentest
  • 30.03.2015 - 10:18

Herzlichen Dank für das Tutorial.

Portrait von Caesarion2004
  • 29.03.2015 - 19:21

Vielen Dank für das interessante Tutorial.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 29.03.2015 - 17:36

Wie immer. Sehr hilfreich und gut verständlich

Portrait von Domingo
  • 29.03.2015 - 17:08

Vielen Dank.

Portrait von rocking_sid
  • 29.03.2015 - 16:54

Vielen Dank für den weiteren Teil der Reihe!

Portrait von teste123
  • 29.03.2015 - 16:34

vielen Dank
Mfg

Portrait von samtron
  • 29.03.2015 - 16:31

vielen Dank
Mfg

Portrait von pallasathena
Portrait von suzana
  • 29.03.2015 - 15:11

Vielen Dank für den weiteren Teil.

Portrait von fe_web
  • 29.03.2015 - 14:56

Super - vielen Dank für diesen weiteren Teil.

Portrait von dlieb
  • 29.03.2015 - 14:11

Vielen Dank für Teil 38.

Portrait von BOPsWelt
  • 29.03.2015 - 13:33

Vielen lieben Dank für den 38. Teil, sehr gutesTutorial.

Portrait von pemis
  • 15.02.2015 - 09:42

Mit jeder Folge steige ich weiter hinter die Geheimnisse von CSS. Danke

Portrait von fe_web
  • 09.02.2015 - 13:12

So ist es einfach strukturiert was zu lernen - Danke

Portrait von fe_web
  • 07.02.2015 - 19:12

Wie immer - gutes und lehrreiches Tutorial

Portrait von Caesarion2004
  • 07.02.2015 - 17:45

Vielen Dank für das interessante Tutorial.

x
×
×