Florence Maurice

Gerade ist mein neues gut zweistündiges Videotraining bei video2brain „CSS-Layouts für Fortgeschrittene“ erschienen. Es behandelt weiterführende CSS-Layouttechniken, die über die Anordnung mit float und position hinausgehen: Mit dabei zwei Techniken aus CSS 2.1: Layouts mit display: inline-block oder display: table, und zwei Techniken aus CSS3: das Multicolumn-Layout-Modul und der attraktive Alleskönner Flexbox.

CSS-Layouts für Fortgeschrittene
CSS-Tabellen, Multicolumn-Layout, Flexbox
Laufzeit: 2 Std. 13 min

Wer hingegen erst mit der Layouterstellung per CSS anfängt , für den könnte mein Training „CSS-Layouts“, das richtige sein. Es behandelt die klassischen Layouttechniken – nämlich Anordnungen über float oder position.

Die Anforderungen an Layouts sind – auch aufgrund des responsiven Webdesigns – gestiegen und um dafür gewappnet zu sein, braucht man alles, was der CSS-Werkzeugkasten hergibt:  Dazu gehören gerade auch die fortgeschrittenen Techniken, die ich im Videotraining zeige. Außerdem stelle ich im Videotraining das Flexbox-Layoutmodul vor, das eines der faszinierendsten Module aus CSS3 ist und genau die flexible Anordnung von Elementen erlaubt, die wir in Zeiten vom responsiven Webdesign brauchen.

Zum Inhalt:

CSS 2.1: Layout mit display: table

Neben einführenden Beispielen geht es um nützliche Tricks wie das Zentrieren über CSS-Tabellen, die Umsetzung eines Sticky-Footer-Layouts oder wie sich dank display: table die Reihenfolge von Elementen ändern lässt.

CSS 2.1: Elemente nebeneinander anordnen mit display: inline-block

display: inline-block kombiniert Eigenschaften von Block- und Inline-Elementen. Es ist praktisch für Navigationsleisten, zur Anordnung von Formularen und mehr.

CSS3: Multicolumn-Modul – praktischer Spaltensatz in CSS

Mit dem Multicolumn-Modul aus CSS3 wird mit CSS echter Spaltensatz möglich, d.h. Texte, die von einer Spalte automatisch in die nächste Spalte fließen.

CSS3: Flexbox

Das Flexbox-Layout-Modul ermöglicht die Flexibilität, die wie für unsere Layouts brauchen. Damit lässt sich die Anordnung festlegen, Elemente bei Bedarf mehrzeilig platzieren, die Ausdehnung flexibel bestimmen, die Leerraumverteilung genau steuern und und und.