=> Lektion 7: Attribute in HTML sprechen Selektoren im CSS an

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.

Download: opel.jpg

Download: bilderreihe.html

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

Download: div.html

Download: design.css

Übung 11

Erstelle folgende Elemente in einer Seite

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

Download: html_css_positionierung.html

=> Abschlussübung HTML
=> Übersicht HTML und CSS