CSS Float Sommerkurs: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto
Inhalt Float Test 1 - Text umfließt Bild Float Test 2 - Überschriften nebeneinander ausrichten Float Test 3 - DIV-Boxen nebeneinander ausrichten Float Test 4 - Größenangaben für DIV-Boxen berechnen Float Test 5 - DIV-Boxen in äußeres DIV einbetten Float 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 1 Text von einem Element (z.B. Bild) „umfließen“ lassen Beispiel: <style> img{ float:right; } </style> Probieren Sie auch „float: left“.
Float Test 1 Mehr Abstand Beispiel: <style> img{ float:right; margin: 10px; } </style> Probieren Sie auch „float: left“.
Float Test 2 Elemente nebeneinander ausrichten 1. Schritt – Unterüberschrift rechtsbündig: h2{ float: right; } funktioniert noch nicht H2 fließt rechts um alle (nachfolgenden) Elemente
Float Test 2 Elemente 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
Warum Klasse und nicht ID? Float Test 2 Warum Klasse und nicht ID? Elemente nebeneinander ausrichten 2. Schritt Alternative: .clearfix{ clear: both; } noch besser clear ist nun nicht mehr an das Element H3 gebunden ... <h2>University of Applied Sciences</h2> <div class="clearfix"></div> <h3>Start</h3>
Float Test 2 Elemente nebeneinander ausrichten 3. Schritt – Unterüberschrift rechtsbündig: h1{ float: left; } h2{ float: right; Regel alle Elemente, die nebeneinander stehen sollen, bekommen ein Float, danach clearfix Probieren Sie auch float:left bei H2.
Float Test 2 Elemente nebeneinander ausrichten 3. Schritt – Unterüberschrift rechtsbündig: h1{ float: left; } h2{ float: right; Regel alle Elemente, die nebeneinander stehen sollen, bekommen ein Float, danach clearfix Probieren 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 3 Schritt 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 3 Schritt 2 – CSS .box{ float: left; } Reicht noch nicht aus Divs / Absätze haben standardgemäß Breite von 100%
Float Test 3 Schritt 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 3 Schritt 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
Box-Modell gilt für alle Block-Elemente (wie z.B. div, p, h1 – h6, ul) Float Test 4 Box-Modell gilt für alle Block-Elemente (wie z.B. div, p, h1 – h6, ul) CSS Box-Modell: Breite eines Elements = width + padding-left + padding-right + 2*border + margin-left + margin-right height width
Box-Modell gilt nicht für Inline-Elemente (wie z.B. b, i, a, em) Float Test 4 Box-Modell gilt nicht für Inline-Elemente (wie z.B. b, i, a, em) CSS Box-Modell: Breite eines Elements = width + padding-left + padding-right + 2*border + margin-left + margin-right height width
Float Test 4 Bei drei DIVs Seitenbreite = 100% = 3*width + 3*padding-left + 3*padding-right + 6*border + 3*margin-left + 3*margin-right
Float Test 4 Beispielwerte Seitenbreite = 100% = 3*25% + 3*2.08% + 3*2.08% + 6*0 + 3*2.08% + 3*2.08%
Float Test 4 Mindestbreite .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 5 Ansatz neues Div mit ID um alle drei Div-Boxen setzen <div id=„rahmen“> <h3>Alle wichtigen Infos</h3> <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>
Float Test 5 CSS #rahmen{ border: 2px solid green; } Funktioniert nicht ganz Die DIV-Boxen fließen aufgrund der floats aus dem Rahmen heraus
Float Test 5 Lösung des Problems Floating muss innerhalb des Rahmens unterbrochen werden <div id=„rahmen“> <h3>Alle wichtigen Infos</h3> <div class=„clearfix“></div> <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>
Float Test 5 Alternative 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 id=„rahmen“ class=„clearfix“> <h3>Alle wichtigen Infos</h3> <div class=„clearfix“></div> <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>
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.