htmlcss:html_css_lektion_08 - Informatik 2015

=> 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.

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

Übung 11

  1. Erstelle folgende Elemente in einer Seite
  2. 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

Drucken/exportieren