# Was wir tun

SELFHTML dokuemntiert seit 1995 die Techniken rund ums Web.

Mit diesem Design wollen wir Ihnen best practices zeigen, die Sie dann auf Ihren Webseiten einsetzen können.

## Bilder im Fließtext

Das berühmte Buch Little Boxes zum Thema Webdesign mit CSS begann so:

> „Webseiten bestehen aus rechteckigen Kästchen, die im Browserfenster übereinander-, nebeneinander- und ineinandergestapelt werden. HTML erstellt diese Kästchen, CSS gestaltet sie. Lauter little boxes. …“

Workshop über Discord

Mithilfe der Eigenschaft float kann ein Element an die linke oder rechte Innenkante seines Elternelements verschoben werden. Die Besonderheit dabei: Mit der Eigenschaft clear kann festgelegt werden, ob nachfolgende Inhalte um das Element herumfließen oder einen eigenständigen Abschnitt bilden.

Die Eigenschaft ist dafür gedacht, wie im Print-Layout Bilder oder andere Grafiken innerhalb des Fließtextes zu präsentieren:

Prisma

Die Bilder werden mit `float` aus dem Elementfluss herausgenommen und „schweben“ nun am Rand. Das erste Bild erhält ein `float` nach rechts und mit `margin-left` einen Rand nach links zum Text.

Beim folgenden Bild ist dies umgedreht, wobei dies nicht durch eine Klasse, sondern mit dem nth-of-type-Selektor aufgrund seiner Position im Markup selektiert wurde.

Regenbogen

Damit die Webseite aufgelockerter wirkt, werden die Bilder mit transform:rotate() einen Tick gedreht. Auch dies wird über den `nth-of-type`-Selektor beeinflusst.

Workshop über Discord

Mithilfe der Eigenschaft float kann ein Element an die linke oder rechte Innenkante seines Elternelements verschoben werden. Die Besonderheit dabei: Mit der Eigenschaft clear kann festgelegt werden, ob nachfolgende Inhalte um das Element herumfließen oder einen eigenständigen Abschnitt bilden.

Die Eigenschaft ist dafür gedacht, wie im Print-Layout Bilder oder andere Grafiken innerhalb des Fließtextes zu präsentieren:

Prisma

Die Bilder werden mit `float` aus dem Elementfluss herausgenommen und „schweben“ nun am Rand. Das erste Bild erhält ein `float` nach rechts und mit `margin-left` einen Rand nach links zum Text.

Beim folgenden Bild ist dies umgedreht, wobei dies nicht durch eine Klasse, sondern mit dem nth-of-type-Selektor aufgrund seiner Position im Markup selektiert wurde.

Regenbogen

Damit die Webseite aufgelockerter wirkt, werden die Bilder mit transform:rotate() einen Tick gedreht. Auch dies wird über den `nth-of-type`-Selektor beeinflusst.

## Mehrspaltenlayout

Immer breitere Monitore ermöglichen immer breitere Seiten. Dies ist aber nicht lesefreundlich, da man bei langen Zeilen nur schwer den Anfang der neuen Zeile findet. Mit der Eigenschaft columns können Sie Fließtext und lange Listen in mehrere Spalten aufteilen.

Im Gegensatz zu bisherigen workarounds ist dieses Layout flexibel, das heißt z. B. dass Spaltenumbrüche nur bei Bedarf erfolgen und die Anzahl der Spalten ebenfalls in Abhängigkeit von der Breite des Browserfensters variabel ist.

Die Eigenschaft columns ist eine Zusammenfassung der möglichen Einzelangaben column-width und column-count. Sie erwartet folgende durch Leerzeichen getrennte Werte:

- eine Angabe zur Spaltenanzahl (positive ganze Zahl oder auto)
- eine nicht negative Längenangabe als Mindestspaltenbreite

Beachte: Der Zugriff auf einzelne Spalten, einzelne Spaltenabstände oder einzelne Linien zwischen den Spalten ist nicht möglich.