Mitschrift 28.04.2014
TAG 15Floaten/ 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">
<!-- /* Elementselektor mit "float: left;", dann werden sie nebeneinandergestellt. Das Attribut float hebt den Zeilenumbruch des Blockelements div auf!*/-->
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.
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.htmlwir 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! |
 |
| Der Paragraph schiebt sich mit auf die Position links oben! |
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
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 |
 |
| 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;}
HTML: id="wrapper"
CSS: #{margin-left: auto; margin right: auto; width: 80%;}
Ebenen floaten:
Wir können auch mehrere Klassen vergeben:
Rahmen nicht mehr ums Bild, sondern füge das Bild in einen div-Container ein:
- <div class="ebenelinks">Bild</div> oder
- <div class="ebenerechts">Bild</div>und verwende es für mehrere Bilder auf der Seite
 |
| Ebene floaten - Bild im div-Container |
Da ich das Bild in die Ebene lege, heißt es nicht mehr Bild floaten, sondern Ebene floaten!
