Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS Float: Schwebende Boxen (Theorie und Praxis)

Posted by sura1 - 2. Dezember 2008

dez021Bookmark and Share

CSS-Eigenschaft Float: Schwebende Boxen (Theorie und Praxis)

float

Float: Schwebende Boxen (Theorie und Praxis)

„To Float“ heißt «schweben» – und eine schwebende Box macht 3 Bewegungen: Sie erhebt sich aus dem normalen Fluss, schwebt wie ein losgelassener Heißluftballon in der umgebenden Kiste auf der einen Seite nach oben und driftet dann je nach Windrichtung so weit es geht auf die andere Seite.

Theorie:

Auf den unten angeführten 4 Webseiten finden Sie ausführliche Anleitungen,  Erklärungen und Beschreibungen über die CSS-Eigenschaft float.

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie
http://www.thestyleworks.de/tut-art/layout_div_2.shtml
http://www.vision.to/articles/the-difference-between-the-flow-and-positioning-for-web-pages.php
http://hessendscher.de/workshop/index.html (Teil 6 -Floats)

Floats mit mehreren Boxen

Um Ihnen zu zeigen, wie float funktioniert, möchte ich mit ein paar einfachen Beispielen erklären, wie Sie die Float-Theorie in die Praxis umsetzen können. Sie werden danach das manchmal etwas seltsame Verhalten von Floats besser verstehen können.

3 Boxen ohne Float

Die Grundlage für die folgenden Beispiele bilden drei einfache, nicht gefloatete div-Boxen.

HTML                                                              CSS

<div id="eins">Box 1</div>                              body {
<div id="zwei">Box 2</div>                                   color: black;
<div id="drei">Box 3 </div>                                   background-color: gray;
                                                                          padding: 0;
                                                                          margin: 0;
                                                                      }
                                                                      div {
                                                                          font-weight: bold;
                                                                          width: 200px;
                                                                          height: 50px;
                                                                          padding: 10px;
                                                                          border: 1px solid black;
                                                                          margin: 5px;
                                                                      }
                                                                      #eins {
                                                                           background-color: #fff;
                                                                      }
                                                                      #zwei {
                                                                            background-color: #ddd;
                                                                      }
                                                                      #drei {
                                                                            background-color: #aaa;
                                                                      }

Die 3 div-Boxen haben verschiedene Hintergrundfarben, eine fixe Breite und eine vorgegebene Höhe und sehen so aus:

3boxes_nofloat

demo_green

Gefloatete Boxen müssen immer eine mit width fix definierte Breite haben. Ohne diese Angabe wird die Breite von div-Boxen unberechenbar.
Bei Grafiken ist width nicht nötig, weil sie eine feste Breite haben, bei allen anderen gefloateten Elementen gilt die Faustregel: floaten immer mit width!


3 Boxen nach links floaten

In der ersten Übung werden alle 3 Boxen nach links gefloatet. Das CSS wird dafür nur an einer Stelle geändert (float: left):

div {
     float: left;
     font-weight: bold;
     width: 200px;
     height: 50px;
     padding: 10px;
     border: 1px solid black;
     margin: 5px;
}

Im Browser stehen die 3 Boxen jetzt nebeneinander.

3boxes_floatleft

demo_green

Die erste div-Box schwebt an der rechten Seite der umgebenden Box (hier: body) so weit es geht nach oben und schwebt dann so weit es geht nach links rüber. Jede folgende Box macht genau dasselbe, bis die 3 Boxen nebeneinander stehen.


3 Boxen nach rechts floaten

In der zweiten Übung floaten Sie die 3 Boxen nach rechts. Dazu müssen Sie im CSS nur ein einziges Wort ändern:

div {
     float: right;
     font-weight: bold;
     width: 200px;
     height: 50px;
     padding: 10px;
     border: 1px solid black;
     margin: 5px;
}

Hier stehen die 3 Boxen auch nebeneinander, die Reihenfolge ist jedoch geändert.

3boxes_floatright

demo_green

Box 1 ist ganz rechts angeordnet, links daneben steht Box 2 und noch weiter links folgt Box 3. Dies kommt daher, dass Box 1 an der linken Seite des umgebenden Elementes ganz nach oben schwebt und dann soweit wie möglich nach rechts rüber schwebt; die anderen Boxen machen genau dasselbe.


Float und zu wenig Platz im Browserfenster

Sollte eine gefloatete Box im Browserfenster zu wenig Platz finden, springt sie automatisch eine Zeile tiefer. Die folgenden Grafik zeigt die 3 nach links gefloateten Boxen in einem verkleinerten Browserfenster.

3boxes_float_zuwenigplatz

demo_green

Verkleinern Sie bitte das Browserfenster so weit, bis Box 3 eine Zeile tiefer springt. Wenn Sie das Fenster noch mehr verkleinern, wird Box 2 dies auch tun.


Float und verschieden hohe Boxen

Wenn gefloatete Boxen verschiedene Höhen haben, kann es vorkommen, dass einige Boxen an anderen hängen bleiben. Für das Beispiel wurde die Höhe von Box 1 auf 75px erhöht.

#eins {
     background-color: #fff;
     height: 75px;
}

Bei zu kleinem Browserfenster schwebt Box 3 nicht an den linken Rand, sondern bleibt an Box 1 hängen.

3boxes_float_verschiedenhoheboxen

demo_green

Um den Effekt sehen zu können, verkleinern Sie das Browserfenster, bis Box 3 an Box 1 hängen bleibt.

Beispieldateien (2,9KB Zip-Datei):

grun_download1


Quellnachweis:

Little Boxes – Teil 1

littleboxes_teil01-89x127

Webseiten gestalten mit CSS. Grundlagen.
Markt+Technik / 2007 / Dozent Peter Müller

www.little-boxes.de
Little Boxes, Teil 1 – Beispieldateien


Ähnliche Artikel:

HTML/CSS-Grundlagen: 3 div-Boxen im Fluss (Flow)
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen
CSS-Menüs ohne Einsatz von Listenelementen

Kommentar verfassen

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: