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

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

Embed Size (px)

Citation preview

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

CSS FLOATSommerkurs: Frontend-Entwicklung für Webapplikationen

M.Sc. Anna Prenzel, Sebastian Otto

Page 2: CSS FLOAT Sommerkurs: 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

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

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…

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

Float Test 1Text von einem Element (z.B. Bild) „umfließen“ lassen

Beispiel:<style> img{ float:right; }</style>

Probieren Sie auch „float: left“.

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

Float Test 1Mehr Abstand

Beispiel:<style> img{ float:right; margin: 10px; }</style>

Probieren Sie auch „float: left“.

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

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

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

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

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

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?

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

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.

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

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.

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

Float Test 3• 3 Text-Boxen nebeneinander darstellen• farbige Hinterlegung der Boxen

<h4>…</h4><p> …

</p>

<h4>…</h4><p> …

</p>

<h4>…</h4><p> …

</p>

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

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>

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

Float Test 3Schritt 2 – CSS.box{

float: left;}

Reicht noch nicht aus Divs / Absätze haben standardgemäß Breite von 100%

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

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?)

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

Float Test 3Schritt 3 – Gestaltung der Boxen.box{

float: left;width: 30%;background-color: #B2B2B2;margin: 10px 10px 10px 5px;padding: 5px;

}

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

Float Test 4• Gleichmäßige Verteilung der Divs über die gesamte

Seitenbreite• Flexibles Layout mit Prozentangaben Anpassung an

individuelle Bildschirmgröße

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

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)

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

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)

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

Float Test 4Bei drei DIVsSeitenbreite = 100% = 3*width + 3*padding-left + 3*padding-right + 6*border +3*margin-left + 3*margin-right

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

Float Test 4BeispielwerteSeitenbreite = 100% = 3*25% + 3*2.08% + 3*2.08% + 6*0 +3*2.08% + 3*2.08%

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

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

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

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>

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

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>

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

Float Test 5CSS

#rahmen{border: 2px solid green;

}

Funktioniert nicht ganz Die DIV-Boxen fließen aufgrund der floats aus dem Rahmen heraus

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

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>

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

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>

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

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.