Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆2. 8. 8 Textumfluss <float>

2.8.8 Textumfluss <float>
en <float>
fr <float>

-

1 Prinzip und Syntax

-

a) Allgemein

Mit float: wird bestimmt, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfliesst.
Folgende Angaben sind möglich (Syntax):

-

b) Beispiel 1

1) Angabe im Quelltext

 <h1 style="width:400px;float:left;color:red">
 Überschrift mal anders </h1>
 <p style="font-size:120%">Eine Überschrift
 muss nicht immer einen langweiligen, über die ganze
 Breite des Anzeigefensters gehenden Block erzeugen.
 Sie kann auch mal seitlich vom Text stehen,
 und der Text fließt um die Überschrift.
</p>

2) Ausgabe im HTML-Dokument

Überschrift mal anders

Eine Überschrift muss nicht immer einen langweiligen, über die ganze Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal seitlich vom Text stehen, und der Text fließt um die Überschrift.

-

c) Beispiel 2

1) Angabe im Quelltext

<p>
 <span style="float:left;width:0.7em;font-size:400%;
 font-family:algerian,courier;line-height:80%;">
 I </span>
 n this paragraph, the first letter of the text is embedded
 in a span element. The span element has a width
 that is  0.7 times the size of the current font.
 The font-size of the span element is 400% 
 (quite large) and the line-height is 80%.
 The font of the letter in the span will be in "Algerian".
</p>

2) Ausgabe im HTML-Dokument

I n this paragraph, the first letter of the text is embedded in a span element. The span element has a width that is 0.7 times the size of the current font. The font-size of the span element is 400% (quite large) and the line-height is 80%. The font of the letter in the span will be in "Algerian".

-

d) Beispiel 3

Die einzelnen Block-Elemente "div" werden mit "float" nebeneinander gesetzt
Das letzte div hat keine "float" mehr.

1) Angabe im Quelltext

<div style="float:left;border:1px solid #000;
 background-color:#efefef;
 height:10%;width:20%;">1.Block </div>
 <div style="float:left;border:1px solid #000;
 background-color:#efefef;
 height:10%;width:60%;">2.Block </div>
 <div style="border:1px solid #000;
 background-color:#efefef;
 height:10%;width:20%;">3.Block </div>

2) Ausgabe im HTML-Dokument

1.Block
2. Block
3. Block

-

2 CSS-Layouts, basiert auf float und clear

-

3 Probleme mit float