CSS/Tutorials/Ausrichtung

Informationen zu diesem Text

Lesedauer

4x30min

Schwierigkeitsgrad

mittel

Vorausgesetztes Wissen

Grundkenntnisse in
• HTML
• CSS

Der Kurs Einstieg in CSS bietet die ersten Schritte in der Gestaltung von Webseiten.

Dieser Kurs baut darauf auf und behandelt die Positionierung und Ausrichtung von Elementen mit CSS. Er soll die wichtigsten Eigenschaften an best practice-Beispielen vorstellen und helfen, typische Anfängerfehler zu vermeiden.

1. display und position
   • Block oder inline? - inline-block!
   • der Elementfluss
   • top, right, bottom und left
   • absolute Positionierung
   • fixer footer
2. float und clear
   • Positionierung mit float
   • clearfix
3. Inhalte zentrieren
   • Flexbox
   • ältere Varianten
4. variable Elemente nebeneinander
   • mit Flexbox
   • mit Grid Layout
   • Page-floats
     
     
     

Ausrichtung mit CSS
(Übersicht)

display und position →

Hinweis

Die hier vorgestellte Positionierung mit display, position und float dient der Ausrichtung einzelner Elemente im Elementfluss.
Eine Gestaltung von Webseiten mit diesen Methoden ist heute eher unüblich. Stand der Technik ist eine Umsetzung mit Flexbox oder dem Grid Layout:

• Layout mit Flexbox
• Layout mit dem CSS Grid Layout