Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:css [2024-10-29 17:53] – [Abstände & Ränder] hof
+++ gf_informatik:web:css [2024-12-03 15:45] (aktuell) – [Weiterführende Links] hof
@@ Zeile 111: / Zeile 111: @@
 == Horizontale Zentrierung ==
 Ein Element (beispielsweise der ganze `body`) lässt sich einfach horizontal zentrieren, indem die Breite auf eine bestimmte Grösse gesetzt wird, und die `margin` links und rechts auf den Wert `auto` gesetzt wird:
+<WRAP group>
+<WRAP column half>
 <code css>
@@ Zeile 118: / Zeile 122: @@
 }
 </code>
+</WRAP>
+<WRAP column half>
+<HTML>
+<div style="border: 1px solid #ccc; border-radius: 4px;">
+  <div style="background-color: lightgrey; font-family: sans-serif; padding: 1em; margin: 5mm auto; max-width: 10cm;">
+    <h3 style="font-size: 5mm; color: black; border: 0; margin: 0 !important;">Body</h3>
+    <p>Verändere die Breite des Fensters und schau, was passiert!</p>
+  </div>
+</div>
+</HTML>
+</WRAP>
+</WRAP>
 == Border ==
@@ Zeile 248: / Zeile 268: @@
 Weitere Selektoren können Element auswählen, die innerhalb eines anderen bestimmten Elements sind (z.B. alle `<img>`-Elemente innerhalb einer `<ol>`-Liste), und vieles mehr. [[https://wiki.selfhtml.org/wiki/CSS/Selektoren|Selfhtml]] hat die ganze Auswahl.
+=== Mobilgeräte und Viewport ===
+Mobilgeräte sind viel kleiner als ein Computerbildschirm. Um trotzdem die ganze Webseite zu zeigen, verkleinern die meisten Mobilgeräte die Seite, aber um den Text lesen zu können, muss sie anschliessend gezoomt werden.
+Um dies zu verhindern, kann eine [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst#Viewportangabe|Viewportangabe]] in den `head` eingefügt werden:
+<code html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+</code>
 === Weiterführende Links ===
@@ Zeile 254: / Zeile 286: @@
     * mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Ma%C3%9Fangaben|Grössenangaben]]
     * mehr zu [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Typografie|Schriftformatierung]]
+    * [[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundger%C3%BCst|HTML Grundgerüst]]
+    * alle [[https://wiki.selfhtml.org/wiki/CSS/Tutorials|CSS Tutorials]]