CSS für Fortgeschrittene

Wer mit den klassischen CSS-Elementen float und position arbeitet, stößt im Webseitendesign schon bald an Grenzen. Dieses Traininig zeigt die erweiterten Möglichkeiten mit display:inlineblock, fortgeschrittene Techniken mit CSS-Tabellen und den Alleskönner Flexbox: Damit können Sie alle Elemente flexibel in beliebiger Reihenfolge inklusive Leerraumverteilung steuern.

Inhalte

Gutes Layout mit CSS – die Methoden im Überblick

  • Klassische Layoutmethoden
  • Mehr als float und position
  • Browserunterstützung für Layouttechniken

Layout mit display:table

  • CSS-Tabellen – einführendes Beispiel
  • CSS-Tabellen für Layouts
  • Zentrieren mit CSS-Tabellen
  • Sticky-Footer mit display: table
  • Reihenfolge steuern

Elemente nebeneinander anordnen mit display:inline-block

  • Inline- und Blockelemente
  • display: inline-block
  • Formularelemente anordnen
  • Galerieanordnung mit display:inline-block

Multicolumn-Modul – praktischer Spaltensatz in CSS

  • Spaltenbreite definieren
  • Anzahl der Spalten festlegen
  • Zwischenraum bestimmen
  • Trennlinie festlegen
  • Multicolumn in alten Browsern

Flexbox – grundlegende Techniken

  • Überblick über Flexbox
  • Richtung der Anordnung bestimmen
  • Mehrzeilige Darstellung
  • Verschiedene Flexbox-Versionen

Flexbox – fortgeschrittene Techniken

  • Ausdehnung bestimmen
  • Leerraumverteilung
  • Reihenfolge der Flex-Items festlegen
  • Ausmaße flexibilisieren
  • Elemente zentrieren
  • Sticky-Footer
  • Fallback-Lösungen für ältere Browser