Skip to content

Commit 867b9df

Browse files
widnig89widnig89
committed
added: slides for layouts
1 parent 03d6e93 commit 867b9df

File tree

13 files changed

+864
-0
lines changed

13 files changed

+864
-0
lines changed

‎slides/content/slides/SWP/WEB/06_classic-layouts.md‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
---
2+
theme: seriph
3+
routerMode: hash
4+
title: Klassische Layouts in CSS
5+
info: |
6+
## Klassische Layouts in CSS
7+
background: https://github.com/HTL-Wolfsberg-Betriebsinformatik/skript/blob/main/slides/content/slides/background-cover-16-9.webp?raw=true
8+
class: text-center
9+
drawings:
10+
persist: false
11+
transition: slide-left
12+
mdc: true
13+
layout: cover
14+
hideInToc: true
15+
download: true
16+
export:
17+
format: pdf
18+
dark: false
19+
withClicks: true
20+
withToc: true
21+
selectable: true
22+
---
23+
24+
# Klassische Layouts in CSS
25+
26+
---
27+
hideInToc: true
28+
---
29+
30+
# Inhalt
31+
32+
<Toc minDepth="1" maxDepth="1" columns="1" />
33+
34+
---
35+
36+
# Das Problem
37+
38+
HTML legt nur die Inhalte und deren Bedeutung fest – nicht, **wie sie angeordnet** werden.
39+
Ohne CSS würden alle Elemente einfach **untereinander stehen**
40+
41+
<div style="background-color: lightblue; width: 200px; border-radius: 8px; padding: 8px; font-family: Verdana, sans-serif; margin: 8px;">
42+
<div>
43+
<h3>Learn HTML</h3>
44+
</div>
45+
<div>
46+
<p style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
47+
<a style="font-size: 14px; text-decoration: none; border-bottom-width: 0; background-color: white; padding: 4px; border-radius: 4px" href="#">Mehr lesen</a>
48+
</div>
49+
</div>
50+
<div style="background-color: lightblue; width: 200px; border-radius: 8px; padding: 8px; font-family: Verdana, sans-serif; margin: 8px;">
51+
<div>
52+
<h3>Learn CSS</h3>
53+
</div>
54+
<div>
55+
<p style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
56+
<a style="font-size: 14px; text-decoration: none; border-bottom-width: 0; background-color: white; padding: 4px; border-radius: 4px" href="#">Mehr lesen</a>
57+
</div>
58+
</div>
59+
<div style="background-color: lightblue; width: 200px; border-radius: 8px; padding: 8px; font-family: Verdana, sans-serif; margin: 8px;">
60+
<div>
61+
<h3>Learn JS</h3>
62+
</div>
63+
<div>
64+
<p style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
65+
<a style="font-size: 14px; text-decoration: none; border-bottom-width: 0; background-color: white; padding: 4px; border-radius: 4px" href="#">Mehr lesen</a>
66+
</div>
67+
</div>
68+
69+
---
70+
71+
# Die Lösung: CSS Layouts
72+
73+
CSS-Layouts steuern die visuelle Anordnung von HTML-Elementen auf einer Seite.
74+
Sie bestimmen, wie Elemente nebeneinander, untereinander oder überlagert dargestellt werden.
75+
76+
<br>
77+
78+
💡Dazu nutzt man vor allem das `display`-Attribut, das das Darstellungsverhalten eines Elements festlegt:
79+
80+
<div style="display: inline-block; background-color: lightblue; width: 200px; border-radius: 8px; padding: 8px; font-family: Verdana, sans-serif; margin: 8px;">
81+
<div>
82+
<h3>Learn HTML</h3>
83+
</div>
84+
<div>
85+
<p style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
86+
<a style="font-size: 14px; text-decoration: none; border-bottom-width: 0; background-color: white; padding: 4px; border-radius: 4px" href="#">Mehr lesen</a>
87+
</div>
88+
</div>
89+
<div style="display: inline-block; background-color: lightblue; width: 200px; border-radius: 8px; padding: 8px; font-family: Verdana, sans-serif; margin: 8px;">
90+
<div>
91+
<h3>Learn CSS</h3>
92+
</div>
93+
<div>
94+
<p style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
95+
<a style="font-size: 14px; text-decoration: none; border-bottom-width: 0; background-color: white; padding: 4px; border-radius: 4px" href="#">Mehr lesen</a>
96+
</div>
97+
</div>
98+
<div style="display: inline-block; background-color: lightblue; width: 200px; border-radius: 8px; padding: 8px; font-family: Verdana, sans-serif; margin: 8px;">
99+
<div>
100+
<h3>Learn JS</h3>
101+
</div>
102+
<div>
103+
<p style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
104+
<a style="font-size: 14px; text-decoration: none; border-bottom-width: 0; background-color: white; padding: 4px; border-radius: 4px" href="#">Mehr lesen</a>
105+
</div>
106+
</div>
107+
108+
<br>
109+
<br>
110+
111+
> Hier wurde `display: inline-block` verwendet um eine horizontale Anordnung zu erzielen.
112+
113+
---
114+
115+
# Typische Werte für `display`
116+
117+
<Toc minDepth="2" maxDepth="2" columns="1" />
118+
119+
120+
121+
---
122+
123+
## `block`
124+
125+
<br>
126+
127+
- Das Element nimmt die **gesamte verfügbare Breite** ein.
128+
- Beginnt **immer** in einer **neuen Zeile**.
129+
- Höhe ergibt sich aus dem Inhalt.
130+
- Breite und Höhe können mit CSS gesetzt werden (`width`, `height`).
131+
132+
<br>
133+
134+
**Beispiel:** `<div>`, `<p>`, `<header>`, `<footer>`
135+
136+
```html
137+
<div style="background-color: lightblue;"> <!-- display: block; ist der default Wert für ein div oder einem p Tag -->
138+
Das ist ein div mit einem Text
139+
</div>
140+
```
141+
142+
<br>
143+
<div style="background-color: lightblue;">
144+
Das ist ein div mit einem Text
145+
</div>
146+
147+
---
148+
149+
## `inline`
150+
151+
<br>
152+
153+
- Läuft **im Textfluss** mit — **kein Zeilenumbruch** davor oder danach.
154+
- Nur so breit wie der Inhalt.
155+
- `width`, `height`, `margin-top` und `margin-bottom` **wirken nicht**.
156+
157+
<br>
158+
159+
**Beispiele:** `<span>`, `<a>`, `<strong>`
160+
161+
```html
162+
<p style="background-color: lightblue;">
163+
Das ist ein Paragraph <span style="color: red;">mit einem roten span Element</span> darin.
164+
</p>
165+
```
166+
167+
<br>
168+
<p style="background-color: lightblue;"> Das ist ein Paragraph <span style="color: red;">mit einem roten span Element</span> darin. </p>
169+
170+
---
171+
layout: two-cols-header
172+
layoutClass: gap-8
173+
---
174+
175+
## `inline-block`
176+
177+
::left::
178+
179+
- **Kombiniert** Eigenschaften von `inline` und `block`.
180+
- Steht **im Textfluss** (wie `inline`), aber **Breite und Höhe sind veränderbar** (wie `block`).
181+
- Auch **Abstände** (`padding` und `margin`) **werden berücksichtigt**
182+
183+
**Beispiele:** Buttons oder Menüelemente nebeneinander
184+
185+
186+
<style>
187+
nav a {
188+
display: inline-block;
189+
padding: 8px 16px; /* funktioniert bei `inline` nicht */
190+
background: #3498db;
191+
color: white;
192+
text-decoration: none;
193+
border-radius: 6px;
194+
border-bottom-width: 0;
195+
margin: 20px 6px 0 0; /* funktioniert bei `inline` nicht */
196+
min-width: 100px;
197+
text-align: center;
198+
}
199+
200+
nav a:hover {
201+
background: #2176bd;
202+
color: white;
203+
}
204+
</style>
205+
<nav>
206+
<a href="#">Home</a>
207+
<a href="#">Über uns</a>
208+
<a href="#">Kontakt</a>
209+
</nav>
210+
211+
212+
::right::
213+
214+
```html
215+
<style>
216+
nav a {
217+
display: inline-block;
218+
padding: 8px 16px; /* funktioniert */
219+
background: #3498db;
220+
color: white;
221+
text-decoration: none;
222+
border-radius: 6px;
223+
margin: 20px 6px 0 0; /* funktioniert */
224+
min-width: 100px; /* funktioniert */
225+
text-align: center;
226+
}
227+
nav a:hover {
228+
background: #2176bd;
229+
}
230+
</style>
231+
<nav>
232+
<a href="#">Home</a>
233+
<a href="#">Über uns</a>
234+
<a href="#">Kontakt</a>
235+
</nav>
236+
```
237+
---
238+
239+
## `none`
240+
241+
<br>
242+
243+
- Das Element wird **komplett ausgeblendet** – es belegt keinen Platz im Layout.
244+
- Wird oft für Menüs oder modale Fenster verwendet, die per Javascript eingeblendet werden.
245+
246+
---
247+
248+
# Zusammenfassung
249+
250+
| Wert | Beschreibung | Beispiel |
251+
| -------------- | ------------------------------------------------ | ---------------------- |
252+
| `block` | Neues Blockelement, nimmt ganze Zeile ein | `<div>`, `<p>` |
253+
| `inline` | Läuft im Textfluss mit, kein Zeilenumbruch | `<span>`, `<a>` |
254+
| `inline-block` | Kombination: inline + feste Größe | Buttons, Icons |
255+
| `none` | Unsichtbar, wird nicht gerendert | Elemente ausblenden |
256+

0 commit comments

Comments
 (0)