Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- htmlcss:html_css_lektion_08 [31.08.2014 11:20] – angelegt Stefan Gaum
+++ htmlcss:html_css_lektion_08 [24.10.2014 13:25] (aktuell) – Stefan Gaum
@@ Zeile 3: / Zeile 3: @@
 ====== Lektion 8 - Besonderheiten der Positionierung ======
+===== float =====
+Mit Hilfe von ''float'' kann die Ausrichtung von Elementen geschehen. Normalerweise ist die Reihenfolge untereinander, mit Hilfe von ''float'' geht das aber auch nebeneinander.
+=== Beispiel: Bildreihe ===
+Speichere diese Dateien in einem gemeinsamen Ordner ab und öffne die Datei ''bilderreihe.html''.
+  * {{:htmlcss:opel.jpg?linkonly|Download: opel.jpg}}
+  * {{:htmlcss:bilderreihe.html|Download: bilderreihe.html}}
+  * {{:htmlcss:layout.css|Download: layout.css}}
+===== margin =====
+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 =====
+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 & CSS]]
+[[htmlcss:start|=> Übersicht HTML und CSS]]