Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

CSS FLOAT Sommerkurs: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto.

Ähnliche Präsentationen


Präsentation zum Thema: "CSS FLOAT Sommerkurs: Frontend-Entwicklung für Webapplikationen M.Sc. Anna Prenzel, Sebastian Otto."—  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 HSZG Hochschule Zittau/Görlitz University of Applied Sciences Start 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: img{ float:right; } Probieren Sie auch „float: left“.

5 Float Test 1 Mehr Abstand Beispiel: img{ float:right; margin: 10px; } 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 Float Test 2 Elemente nebeneinander ausrichten 2. Schritt Alternative:.clearfix{ clear: both; } noch besser  clear ist nun nicht mehr an das Element H3 gebunden... University of Applied Sciences Start... Warum Klasse und nicht ID?

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

12 Float Test 3 Schritt 1 – Gruppierung mit DIV Jedem DIV wird ein Klassenname zugewiesen (warum?) … … … … … …

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 Float Test 4 CSS Box-Modell: Breite eines Elements = width + padding-left + padding-right + 2*border + margin-left + margin-right width height Box-Modell gilt für alle Block-Elemente (wie z.B. div, p, h1 – h6, ul)

18 Float Test 4 CSS Box-Modell: Breite eines Elements = width + padding-left + padding-right + 2*border + margin-left + margin-right width height Box-Modell gilt nicht für Inline- Elemente (wie z.B. b, i, a, em)

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

23 Float Test 5 Ansatz neues Div mit ID um alle drei Div-Boxen setzen … … … … … … Alle wichtigen Infos

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 … … … … … … Alle wichtigen Infos

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 … … … … … … Alle wichtigen Infos

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 M.Sc. Anna Prenzel, Sebastian Otto."

Ähnliche Präsentationen


Google-Anzeigen