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

zurück zur Liste