CSS/Tutorials/Ausrichtung

Der Kurs Einstieg in CSS vermittelt die Grundlagen der Gestaltung von Webseiten. Dieser Kurs baut darauf auf und behandelt die Ausrichtung einzelner Elemente mit CSS.

display, position und float zeigen, wie Elemente im Dokumentfluss angeordnet, verschoben und vom Text umflossen werden können. Für komplette Layouts werden heute aber meist Flexbox und Grid Layout(...) verwendet.

Die Beispiele orientieren sich an best practice-Beispielen und zeigen typische Stolperfallen.

• 

  display
  • der Dokumentfluss
  • Block oder inline?
    - inline-block!
   
• 

  position
  • top, right, bottom und left
  • absolute Positionierung
  • fixer footer
  • sticky header
   
• 

  Textumfluss mit float und clear
  • Positionierung mit float
  • clearfix
   

Siehe auch

• Textumfluss mit Shapes
  Shapes ermöglichen interessante Layouts mit fließendem Text um grafische Objekte herum.
   
• 

  z-Index und Stapelkontext
   
• 

  Inhalte zentrieren
  • align-content
  • Grid + Flexbox
  • ältere Varianten
   
• Sichtbarkeit von Elementen

  hidden oder display: none?
  visibility und opacity