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. …“
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:
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.
Damit die Webseite aufgelockerter wirkt, werden die Bilder mit transform:rotate() einen Tick gedreht. Auch dies wird über den nth-of-type-Selektor beeinflusst.
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:
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.
Damit die Webseite aufgelockerter wirkt, werden die Bilder mit transform:rotate() einen Tick gedreht. Auch dies wird über den nth-of-type-Selektor beeinflusst.