CSS/Tutorials/Ausrichtung

Aus SELFHTML-Wiki
< CSS‎ | Tutorials(Weitergeleitet von Clearfix)
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
4x30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
• 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. Sie können Elemente innerhalb des Dokumentes verschieben und dabei festzulegen, wie diese vom Text umflossen werden sollen. So ist es zum Beispiel möglich, Navigationsleisten ans Ende des Quelltextes zu setzen und den Inhalt nach vorn, obwohl es letztlich im Dokument genau anders herum sein soll.

Der Kurs soll die wichtigsten Eigenschaften an best practice-Beispielen vorstellen und helfen, typische Anfängerfehler zu vermeiden.

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



Ausrichtung mit CSS
(Übersicht)

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:


--Matthias Scharwies (Diskussion) 09:27, 21. Nov. 2020 (CET)