Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
CSS Float Sommerkurs: Frontend-Entwicklung für Webapplikationen
M.Sc. Anna Prenzel, Sebastian Otto
2
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
3
Quellcode des Beispiels
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title>HSZG</title> <style> </style> </head> <body> <h1><a href=" 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…
4
Float Test 1 Text von einem Element (z.B. Bild) „umfließen“ lassen Beispiel: <style> img{ float:right; } </style> Probieren Sie auch „float: left“.
5
Float Test 1 Mehr Abstand Beispiel: <style> img{ float:right; margin: 10px; } </style> Probieren Sie auch „float: left“.
6
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
7
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
8
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>
9
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.
10
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.
11
Float Test 3 3 Text-Boxen nebeneinander darstellen
farbige Hinterlegung der Boxen <h4>…</h4> <p> … </p> <h4>…</h4> <p> … </p> <h4>…</h4> <p> … </p>
12
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>
13
Float Test 3 Schritt 2 – CSS .box{ float: left; } Reicht noch nicht aus Divs / Absätze haben standardgemäß Breite von 100%
14
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?)
15
Float Test 3 Schritt 3 – Gestaltung der Boxen .box{ float: left; width: 30%; background-color: #B2B2B2; margin: 10px 10px 10px 5px; padding: 5px; }
16
Float Test 4 Gleichmäßige Verteilung der Divs über die gesamte Seitenbreite Flexibles Layout mit Prozentangaben Anpassung an individuelle Bildschirmgröße
17
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
18
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
19
Float Test 4 Bei drei DIVs
Seitenbreite = 100% = 3*width + 3*padding-left + 3*padding-right + 6*border + 3*margin-left + 3*margin-right
20
Float Test 4 Beispielwerte
Seitenbreite = 100% = 3*25% + 3*2.08% + 3*2.08% + 6*0 + 3*2.08% + 3*2.08%
21
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
22
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>
23
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>
24
Float Test 5 CSS #rahmen{ border: 2px solid green; }
Funktioniert nicht ganz Die DIV-Boxen fließen aufgrund der floats aus dem Rahmen heraus
25
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>
26
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>
27
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.
Ähnliche Präsentationen
