Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

CSS Float Sommerkurs: Frontend-Entwicklung für Webapplikationen

Ähnliche Präsentationen


Präsentation zum Thema: "CSS Float Sommerkurs: Frontend-Entwicklung für Webapplikationen"—  Präsentation transkript:

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="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…

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.


Herunterladen ppt "CSS Float Sommerkurs: Frontend-Entwicklung für Webapplikationen"

Ähnliche Präsentationen


Google-Anzeigen