Post on 06-Apr-2016
CSS FLOATSommerkurs: Frontend-Entwicklung für Webapplikationen
M.Sc. Anna Prenzel, Sebastian Otto
InhaltFloat Test 1 - Text umfließt BildFloat Test 2 - Überschriften nebeneinander ausrichtenFloat Test 3 - DIV-Boxen nebeneinander ausrichten Float Test 4 - Größenangaben für DIV-Boxen berechnenFloat Test 5 - DIV-Boxen in äußeres DIV einbettenFloat Test 6 - Größenangaben für innere DIVs relativ zum äußeren DIV
Quellcode des Beispiels<!DOCTYPE html><html lang="de">
<head><meta charset="utf-8" /><title>HSZG</title>
<style></style>
</head>
<body><h1><a href="http://www.hszg.de">Hochschule Zittau/Görlitz</a></h1><h2>University of Applied Sciences</h2>
<h3>Start</h3><img src="haus_n.jpg" width="500px" alt="Gebäude Naturwissenschaften"><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 dolo…
Float Test 1Text von einem Element (z.B. Bild) „umfließen“ lassen
Beispiel:<style> img{ float:right; }</style>
Probieren Sie auch „float: left“.
Float Test 1Mehr Abstand
Beispiel:<style> img{ float:right; margin: 10px; }</style>
Probieren Sie auch „float: left“.
Float Test 2Elemente nebeneinander ausrichten
1. Schritt – Unterüberschrift rechtsbündig:h2{ float: right;}
funktioniert noch nicht H2 fließt rechts um alle (nachfolgenden) Elemente
Float Test 2Elemente nebeneinander ausrichten
2. Schritt – Unterüberschrift rechtsbündig:h2{ float: right;}h3{ clear: both;}besser mit clear wird das Floating ab H3 unterbrochen, nachfolgende Elemente sind wieder darunter
Float Test 2Elemente nebeneinander ausrichten
2. Schritt Alternative:.clearfix{ clear: both;}noch besser clear ist nunnicht mehr an das ElementH3 gebunden
...<h2>University of Applied Sciences</h2>
<div class="clearfix"></div>
<h3>Start</h3>...
Warum Klasse
und nicht ID?
Float Test 2Elemente nebeneinander ausrichten3. Schritt – Unterüberschrift rechtsbündig:h1{ float: left;}h2{ float: right;}Regel alle Elemente, die nebeneinander stehen sollen, bekommen ein Float, danach clearfixProbieren Sie auch float:left bei H2.
Float Test 2Elemente nebeneinander ausrichten3. Schritt – Unterüberschrift rechtsbündig:h1{ float: left;}h2{ float: right;}Regel alle Elemente, die nebeneinander stehen sollen, bekommen ein Float, danach clearfixProbieren Sie auch float:left bei h2.
Float Test 3• 3 Text-Boxen nebeneinander darstellen• farbige Hinterlegung der Boxen
<h4>…</h4><p> …
</p>
<h4>…</h4><p> …
</p>
<h4>…</h4><p> …
</p>
Float Test 3Schritt 1 – Gruppierung mit DIV• Jedem DIV wird ein Klassenname zugewiesen (warum?)
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div class=„box“> <h4>…</h4> <p> … </p></div>
Float Test 3Schritt 2 – CSS.box{
float: left;}
Reicht noch nicht aus Divs / Absätze haben standardgemäß Breite von 100%
Float Test 3Schritt 2 – CSS.box{
float: left;width: 30%;
}
Wichtig: Elementen, die mit float nebeneinander angeordnet werden, muss i.d.R. eine Breite zugewiesen werden.
Wir bevorzugen eine Breitenangabe in Prozent (warum?)
Float Test 3Schritt 3 – Gestaltung der Boxen.box{
float: left;width: 30%;background-color: #B2B2B2;margin: 10px 10px 10px 5px;padding: 5px;
}
Float Test 4• Gleichmäßige Verteilung der Divs über die gesamte
Seitenbreite• Flexibles Layout mit Prozentangaben Anpassung an
individuelle Bildschirmgröße
Float Test 4CSS Box-Modell:Breite eines Elements = width + padding-left + padding-right + 2*border +margin-left + margin-right
widthheight
Box-Modell gilt für alle Block-Elemente (wie z.B. div, p, h1 –
h6, ul)
Float Test 4CSS Box-Modell:Breite eines Elements = width + padding-left + padding-right + 2*border +margin-left + margin-right
widthheight
Box-Modell gilt nicht für Inline-
Elemente (wie z.B. b, i, a, em)
Float Test 4Bei drei DIVsSeitenbreite = 100% = 3*width + 3*padding-left + 3*padding-right + 6*border +3*margin-left + 3*margin-right
Float Test 4BeispielwerteSeitenbreite = 100% = 3*25% + 3*2.08% + 3*2.08% + 6*0 +3*2.08% + 3*2.08%
Float Test 4Mindestbreite.box{
...min-width: 200px;
}
• wird verwendet, wenn der Inhalt unter einer bestimmten Breite nicht mehr gut aussieht
• wird die Bildschirmbreite zu gering, um die min-width einzuhalten, rutscht die Box in die nächste Zeile
Float Test 5• Rahmen und die drei Boxen• Überschrift innerhalb des Rahmens
Alle wichtigen Infos
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div class=„box“> <h4>…</h4> <p> … </p></div>
Float Test 5Ansatz• neues Div mit ID um alle drei Div-Boxen setzen
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div id=„rahmen“> <h3>Alle wichtigen Infos</h3>
</div>
Float Test 5CSS
#rahmen{border: 2px solid green;
}
Funktioniert nicht ganz Die DIV-Boxen fließen aufgrund der floats aus dem Rahmen heraus
Float Test 5Lösung des ProblemsFloating muss innerhalb des Rahmens unterbrochen werden
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div id=„rahmen“> <h3>Alle wichtigen Infos</h3>
<div class=„clearfix“></div></div>
Float Test 5Alternative zur Lösung des Problems.clearfix::after{ content: ""; clear: both; display: block;}
Mit ::after wird das Clear-DIV automatisch als letztes “Kind” innerhalb des Rahmens eingefügt (Pseudoelement) kein überflüssiger HTML-Code
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div class=„box“> <h4>…</h4> <p> … </p></div>
<div id=„rahmen“ class=„clearfix“> <h3>Alle wichtigen Infos</h3>
<div class=„clearfix“></div></div>
Float Test 6• Die Gesamtbox (ID „Rahmen“) soll nur die Hälfte der
Seite einnehmen
CSS#rahmen{
border: 2px solid green;width: 50%;
}
Das funktioniert die Prozentangaben für die Boxen sind nun relativ zum äußeren DIV!Probieren Sie auch float:right für #rahmen.