Frau Kalke's Blog - Comcave: Kurs Tag 15 - HTML & CSS - CSS: Floaten (Bilder Elemente), Clear

Mitschrift 28.04.2014

TAG 15

Floaten/ Clear / Bilder & Ebenen

letztes Themengebiet, dann sind wir mit den grundlegenden Dingen des CSS durch.

Ordner: HTML-Kurs.zip herunterladen -> Indexdatei öffnen! -> Tag 12
Neue Datei Öffnen: floaten.html

Float = fließen / Fluss

wir haben zwei div-Container erstellt :

<!doctype html>
<html>
    <head>
        <title>Float</title>

        <style type="text/css">
            div#eins {
                width: 50px;
                height: 50px;
                background-color: silver;

            div#zwei {
                width: 150px;
                height: 150px;
                background-color: orange;
    </head>

    <body>

    <div id="eins"></div>
    <div id="zwei"></div>

    </body>

</html>

Warum werden sie untereinandergestellt? - Weil sie Blockelemente sind.

Wir erstellen einen Elementselektor div { mit "float: left;"}, dann werden sie nebeneinandergestellt. Das Attribut float hebt den Zeilenumbruch des Blockelements div auf!*/-->

            div {
                float: left;
            }

So setzt sich der zweite Container direkt hinter den ersten Div - er versucht ihn zu "umfließen" - die Blockelementeigenschaften sind aber weiterhin gewahrt!

Was passiert hier wirklich? Floaten bewirkt bei den Elementen:

Regel1: Das Attribut float hebt den Zeilenumbruch des Blockelementes auf.
Regel2: Es wird immer in die Richtung geflossen, die als value angegeben wird.
= das Element richtet sich nach der Flussrichtung aus - legt sich wie magnetisiert neben das vorherige Element
left -> alles linksbündig (Flussrichtung rechts)
right -> alles rechtsbündig (Flussrichtung links) das erste Element rechtsbündig und das nachfolgende Element legt sich links daneben - also in Flussrichtung daneben!
none -> hebt den float auf
heritate ->Regel3: !!! Die Reihenfolge im Quelltext ist ausschlaggebend!!!
Wenn ich die Breitenbeschränkung rausnehmen, spannt sich das Element über die gesamte Breite.

Wenn ich den Container gefloatet habe, bei voller Breite, ist der nachgestellte Container weg.

Wenn ich keine Breitenangaben im div2 habe - die Containerbreite richtet sich nach der Breite des Textes aus. (ähnlich wie bei Inlineelementen)

Wenn wir einen dritten div-Container eingeben, fließt der in Flussrichtung weiter - also erst der im Quelltext oben stehende, dann die beiden folgenden Container hintereinander.

Wir können auch in einzelnen Selektoren bestimmen, das einzelne Elemente float = right hat, obwohl die anderen weiterhin left bleiben.

=>So überschriebt der Browser den div-Elementselektor nur für dieses Element:

<!doctype html>
<html>
    <head>
        <title>Float</title>

        <style type="text/css">
            

            div {
                float: left;
            }

            div#eins {
                width: 150px;
                height: 150px;
                background-color: silver;
            }

            div#zwei {

                height: 150px;
                background-color: orange;
            }

            div#drei {
                width: 150px;
                height: 150px;
                background-color: green;
                float: right;
            }

        </style>
    </head>

    <body>

    <div id="eins"> </div>
    <div id="zwei">Inhalt des zweiten Containers </div>
    <div id="drei">Inhalt des dritten Containers </div>


    </body>

</html>

selbst wenn ich jetzt das Browserfenster kleiner ziehe, bleibt die Flussrichtung rechts erhalten und so klemmt sich der dritte grüne Container drunter und fließt unterhalb der anderen Elemente weiter. (im Folgenden visualisiert:)

wenn ich jetzt auch den orangen container auf float: right setze, geht es ebenso:

Platz für alle Container

der grüne Container rutscht runter, um weiter fließen zu können

jetzt hat auch der gelbe Container keinen Platz mehr und rutscht unterhalb weiter.

Die Reihenfolge der Elemente im Quelltext ist wichtig UND
die Spezifität der Selektoren!
Danach werden die Elemente hierarchisch umgebrochen.

Beispiel für hierarchisches Umbrechen:
Wenn wir jetzt noch einen vierten Container an unterster Stelle stellen, gilt hier der Elementselektor (niedriger als der ID-Selektor des grünen und orangen Containers), da keine besonderen float-Angaben für diesen Container gemacht wurden.
Der blaue Container ist nicht nur im Quelltext hierarchisch ganz unten, sondern auch von den Selektoren untergestellt - er bricht also als erstes um.

noch haben alle Container Platz

der blaue Container muss als erstes weichen, dann der grüne und schließlich der gelbe

Bilder floaten

neue Datei: floaten-2.html

wir fügen ein Bild ein...
default- / Standard mäßig, ist es linksbündig ausgerichtet!

Link: float bei css4you

Wir können jedes Element mit float anpassen!

dann fügen wir einen Paragraph ein - roter Rahmen

jetzt geben wir dem Image ein float: left

Dann rutscht das nachfolgende Element neben das Bild - es legt sich darum - der Rahmen fließt auch drum herum:

Das Element umfließt! Es drängt sich auch in die obere Ecke, ABER der Inhalt des Elements ist davon ausgeschlossen!
Regel: Die Inhalte überlagern sich nicht, nur die Elemente!!!

... und einem Paragraph

untereinander ohne float

Bild mit float: left -> das nachfolgende Element legt sich unter das Bild, die Inhalte ordnen sich um das Bild an - er umfließt das Bild!

Das Blockelement p spannt sich weiterhin über die gesamte Breite, aber es legt sich an das Bild - nicht drüber oder drunter!!!

Der Paragraph schiebt sich mit auf die Position links oben!

Der Inhalt des Elementes umfließt das Element!
Die Elemente werden nicht vom Block- zum Inlineelement umgewandelt, sondern nehmen den Zeilenumbruch weg und lassen das nachgfolgende Element auf die Position des ersten Elementes rücken - nur das Element, nicht den Inhalt des Elements!

Inlineelemente legen sich zwar auch nebeneinander, aber gefloatete Blockelemente heben den Zeilenumbruch auf und legen sich dahinter (bzw der Inhalt darum) und bewegen sich in eine vorgegebene Richtung.

Regel: Floaten verändert das Grundverhalten / ursprüngliche Verhalten der Elemente!
Elemente fließen in die angegebene Flussrichtung
nachfolgende Elemente positionieren sich dahinter, weil der Zeilenumbruch aufgehoben wird.Was tatsächlich passiert, demonstriert unser Beispiel mit dem Bild:
an sich erzwingt sich das Bild einen Zeilenumbruch
durch das floaten bleiben die Elemente das, was sie sind - der paragrph mit dem roten Rahmen ist und bleibt ein Blockelement. Nur der Zeilenumbruch wird aufgehoben.
Das Element legt such unter das Bild, nur der Inhalt umfließt das Bild! Das p-Tag bleibt ein Blockelement und spannt sich über die gesamte Breite aus!

<!doctype html>
<html>
    <head>
        <title>Float 2</title>

        <style type="text/css">


            img {
                float: left;
            }

            p {
                border: 1px solid red;
            }

        </style>
    </head>

    <body>

    <img src="images/broetchen.jpg" />

    <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    </body>

</html>

Wofür brauche ich umlaufenden Text und floats?

Artikel
Werbeeinbledungen im Text...

Tipps zu neuen Attributen:
line-height = Zeilenhöhe
text-align (bspw. justify), Textausrichtung - justify = Blocksatz
box-shadow: 10px 10px 10px #aeaeae; = Schatten ums Bild :)

Aufgabe: Bitte nachformatieren:

weiteres Beispiel - Hinführung zum Clear

h1 und der schwarze div-Container (durch die Markierung wirkt schwarz dunkellila) beginnen oben links, nur der Inhalt stellt sich neben die Container

Clear

Gegenstück zum Floaten!
Löst Float wieder auf - float hat Auswirkung auf nachfolgende Elemente - um diese Betroffenheit herauszunehmen, muss ich den float unterbrechen!

Clear-Attribut alle vorher gegangenen Float-Aktionen zu sagen: Nein, ich bin nicht betroffen (float unterbrochen, gecleared)

Dann verhält sich das Element wieder so, wie wir es von einem Blockwlement erfahren

Durch das Clear mit der entsprechenden Flussrichtungsangabe, schalte ich für dieses Element bestimmt die vorher gegangenen Float-Angaben aus.
Alle nachfolgenden floats gelten wieder auch für dieses Element
Damit das Element immer (egal ob right oder left) von den floats losgelöst ist - gebe ich für das Element an: "clear: both"

float: right

clear: right

Ich muss quasi nur dort clearen, wo ein Element durch das vorangeganegne gefloatete Element betroffen ist.

float

clear

Nur der grüne Container ist betroffen, die anderen richten sich nur mit aus

So können wir Spalten definieren über div-Container

Ich habe später nicht mehr die Möglichkeit mein HTML zu erweitern, da es eine klare Trennung zwischen und Struktur und Formatierung in den Content Management Systemen (CMS) gibt!
ERGO: Eine schlechte Struktur kann auch ein super CSS auffangen.

Damit ich Elemente wieder in die ursprüngliche Form, mit den Eigenschaften, die es hat zurück bekomme, muss ich clearen! je nachdem ob es vorher float: left hier?

Hier mal ein paar Veranschaulichungen zu float & clear

clear left

2 Bilder clear both

3 Bilder flot - nur das grüne Element ist betroffen, die anderen folgen den Standardeigenschaften

float

Tipp/ Exkurs: Ausrichtung zentriert
NICHT über center!
Datei: zentriert.html

Wie kann ich Dinge zentrieren?
Ich lege um alles einen wrapper/ Einfasser:

HTML: <div id="wrapper"> zentrierter Inhalt </div>
CSS: #{margin-left: auto; margin right: auto; width: 600px;}

für Responsive-Design bitte keine Pixelangaben, sondern bspw. 80%, also:
HTML: id="wrapper"
CSS: #{margin-left: auto; margin right: auto; width: 80%;}