Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- htmlcss:html_css_lektion_08 [31.08.2014 12:27] – Stefan Gaum
+++ htmlcss:html_css_lektion_08 [24.10.2014 13:25] (aktuell) – Stefan Gaum
@@ Zeile 11: / Zeile 11: @@
 Speichere diese Dateien in einem gemeinsamen Ordner ab und öffne die Datei ''bilderreihe.html''.
   * {{:htmlcss:opel.jpg?linkonly|Download: opel.jpg}}
-  * {{:htmlcss:bildreihe.html|Download: bilderreihe.html}}
+  * {{:htmlcss:bilderreihe.html|Download: bilderreihe.html}}
   * {{:htmlcss:layout.css|Download: layout.css}}
 ===== margin =====
-Außenabstand
+Mit Hilfe von margin-left (Abstand vom linken Bildrand) können die Kästchen verschoben werden. ''margin'' ist also der Außenabstand von Elementen auf dem Bildschirm.
 ===== padding =====
-Innenabstand
+Mit ''padding'' kann man den Innenabstand von Texten oder Bildern innerhalb eines Blocks festlegen.
+=== Beispiele zu allen drei Positionierungselementen gibt es hier zum Download ===
+  *{{:htmlcss:div.html|Download: div.html}}
+  *{{:htmlcss:design.css|Download: design.css}}
+{{  :work.png|}}
+===== Übung 11 =====
+  - Erstelle folgende Elemente in einer Seite\\ {{:htmlcss:position.png?240|}}
+  - Füge zusätzlich ein Bild ein, welches unterhalb des Textes steht.
+===== Zusatzinformation =====
+Man kann Elemente ''relativ'' und ''absolut'' zueinander setzen, aber auch an einem bestimmten Ort ''fixieren''. Das abschließende Beispiel soll dies verdeutlichen. Wer diese Elemente sicher verwenden möchte, sollte sich letzlich aber intensiver mit dem Thema auseinandersetzen.
+=== Beispiel ===
+  * Beispiel stammt aus [[http://de.selfhtml.org/css/eigenschaften/positionierung.htm| http://de.selfhtml.org]]
+  * {{:htmlcss:html_css_positionierung.html|Download: html_css_positionierung.html}}
 ----
 [[htmlcss:html_css_lektion_z1|=> Abschlussübung HTML]]\\
 [[htmlcss:start|=> Übersicht HTML und CSS]]