learning to float in forty minutes · 2020-02-07 · layouts in css learning to float in forty...
TRANSCRIPT
![Page 1: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/1.jpg)
Layouts in CSS
Learning to float in forty minutes
Cyril Nusko, Zeilenwerk
26. März 2015
![Page 2: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/2.jpg)
2Intro
cyrilnusko.ch Graphik, Illustration, Programmierung
![Page 3: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/3.jpg)
3Intro
zeilenwerk.ch Exzellente Webprodukte
![Page 4: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/4.jpg)
4Layouts in CSS
Navigation Hauptinhalt
![Page 5: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/5.jpg)
5Babylon
HTML
CSS
JavaScript
?
?
?
![Page 6: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/6.jpg)
6Babylon
HTML
Inhalt
CSS
Aussehen
JavaScript
Erweiterte Funktionalität
![Page 7: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/7.jpg)
7Babelfish
![Page 8: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/8.jpg)
8Babelfish: Klassen
HTML
<div class=”sidebar”>
<p>
Ein Absatz voller Inhalt.
</p>
</div>
CSS
.sidebar {
width: 300px;
}
![Page 9: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/9.jpg)
9Babelfish: Klassen
HTML
<div class=”sidebar”>
<p>
Ein Absatz voller Inhalt.
</p>
</div>
JavaScript mit D3.js
var sidebar =
d3.select(“.sidebar”);
sidebar.style(“width”, “400px”);
![Page 10: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/10.jpg)
10Einschränkungen
Gewisse Funktionalität bereits vorhanden:
• Springen zu anderen Punkten im Dokument
• Andere Seiten öffnen
• … erweiterbar mit JavaScript
Gewisses Aussehen bereits vorhanden:
• Schrift, Schriftgrösse, …
• Abstände
• Ordnung, Dokumentfluss
• … erweiterbar durch CSS
![Page 11: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/11.jpg)
11Einschränkungen
Gewisse Funktionalität bereits vorhanden:
• Springen zu anderen Punkten im Dokument
• Andere Seiten öffnen
• … erweiterbar mit JavaScript
Gewisses Aussehen bereits vorhanden:
• Schrift, Schriftgrösse, …
• Abstände
• Ordnung, Dokumentfluss
• … erweiterbar durch CSS
![Page 12: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/12.jpg)
12Ordnung & Dokumentfluss
<div class=”sidebar”>
<p>
Ein Absatz voller Inhalt. Und noch mehr Inhalt,
vielleicht sogar etwas <strong>sehr Wichtiges</strong>
oder ein <a href=”http://www.zeilenwerk.ch”>Link</a>
</p>
<p>
Ein zweiter Absatz, ohne Inhalt.
</p>
</div>
![Page 13: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/13.jpg)
13Block- & Inline-Elemente
Block-Elemente folgen dem Dokumentfluss gegen unten. Sie werden immer auf einer neuen Zeile angezeigt.
• Absätze p
• Listen ul, ol und Listenelemente li
• Überschriften h1, h2, h3, …
• Ohne Bedeutung div
Inline-Elemente folgen dem Textfluss. Sie werden an der entsprechenden Stelle im Text angezeigt und können über Zeilen hinweg fortlaufen.
• Links und Anker a
• Auszeichnungen em und strong
• Ohne Bedeutung span
![Page 14: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/14.jpg)
14Block- und Inline-Eigenschaft
Block und Inline sind jedoch nicht fix festgelegt, sondern nur vordefinierte CSS-Stile, die mit der display-Eigenschaft geändert werden können. Zum Beispiel (sinnfrei):
• Untereinander dargestellte Absätze
a {
display: block;
}
• Nebeneinander dargestellte Absätze
p {
display: inline;
}
![Page 15: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/15.jpg)
15Block- und Inline-Manpulationen: Anwendung
Damit können wir nun (etwas sinnvoller) eine horizontale Navigation erstellen.
HTML
<ul class=”menu”>
<li><a href=”index.html”>Startseite</a></li>
<li><a href=”blog.html”>Blog</a></li>
<li><a href=”about.html”>Über diese Seite</a></li>
</ul>
CSS Resultat
ul.menu li {
display: inline;
}
![Page 16: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/16.jpg)
16Inline-Problematiken
Inline-Elemente haben jedoch einige Nachteile:
• Sie können keine fixen Breiten und Höhen haben (width & height)
• Sie können oben und unten keine Abstände haben (margin)
… was sie für Layouts ziemlich ungeeignet macht.
Navigation Hauptinhalt
![Page 17: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/17.jpg)
17Float to the rescue
![Page 18: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/18.jpg)
18Float to the rescue
img {
}
img {
float: right;
}
![Page 19: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/19.jpg)
19Float to the rescue
img {
float: left;
}
img {
float: right;
}
![Page 20: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/20.jpg)
20Float to the rescue
img {
float: left;
margin: 8px 12px 4px 0;
}
img {
float: right;
margin: 8px 0 12px 4px;
}
![Page 21: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/21.jpg)
21Floating Layouts
Resultat
p.left p.right
CSS
p.left {
width: 30%;
float: left;
}
p.right {
width: 68%;
float: right;
}
![Page 22: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/22.jpg)
22Floating Layouts
Navigation Hauptinhalt
![Page 23: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/23.jpg)
23Floating Layouts
Navigation
div.sidebar
Hauptinhalt
div.content
![Page 24: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/24.jpg)
24Floating Layouts
HTML
<div class=”sidebar”>
<p>
Navigation
</p>
</div>
<div class=”content”>
<p>
Hauptinhalt
</p>
</div>
CSS
div.sidebar {
float: left;
width: 300px;
margin-right: 20px;
}
div.content {
float: left;
width: 600px;
}
![Page 25: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/25.jpg)
25Floating Layouts
Navigation Hauptinhalt
![Page 26: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/26.jpg)
26Floating Layouts
HTML
<div class=”wrapper”>
<div class=”sidebar”>
<p>
Navigation
</p>
</div>
<div class=”content”>
<p>
Hauptinhalt
</p>
</div>
</div>
CSS
div.wrapper {
width: 920px;
margin: 0 auto;
}
div.sidebar {
float: left;
width: 300px;
margin-right: 20px;
}
div.content {
float: left;
width: 600px;
}
![Page 27: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/27.jpg)
27Et voilà.
Navigation Hauptinhalt
![Page 28: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/28.jpg)
28Weiterführendes
CSS Floats 101
alistapart.com/article/css-floats-101
The Magic of CSS
adamschwartz.co/magic-of-css
WTF, HTML & CSS?
wtfhtmlcss.com
Zeilenwerkstatt-Kurs HTML & CSS
werkstatt.zeilenwerk.ch
![Page 29: Learning to float in forty minutes · 2020-02-07 · Layouts in CSS Learning to float in forty minutes Cyril Nusko, Zeilenwerk 26. März 2015](https://reader034.vdocuments.net/reader034/viewer/2022050210/5f5d0fa2a18f16372550e115/html5/thumbnails/29.jpg)
29Weiterführendes
CSS Floats 101
alistapart.com/article/css-floats-101
The Magic of CSS
adamschwartz.co/magic-of-css
WTF, HTML & CSS?
wtfhtmlcss.com
Zeilenwerkstatt-Kurs HTML & CSS Start am 21. April
werkstatt.zeilenwerk.ch