Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Ein modernes Layout: 1. Zusätzliche div-Elemente für die Layoutbereiche hinzufügen

Ein modernes Layout: 1. Zusätzliche div-Elemente für die Layoutbereiche hinzufügen

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Ein modernes Layout: 1. Zusätzliche div-Elemente für die Layoutbereiche hinzufügen

“

Um dieses moderne Layout realisieren zu können, werden die Layoutbereiche im HTML mit einem zusätzlichen inneren Element gedoppelt und das möchte ich Ihnen hier jetzt einmal zeigen. Dazu rufe ich mit F12 das Entwicklertool wieder auf und man sieht hier die vier Layout-Bereiche. Damit man das besser sehen kann, können Sie das Entwicklertool hier mit einem Klick auf die drei Punkte platzieren. Und ich klicke hier mal auf "Unten fixieren" und schon sitzt das unten am Rand und dann sieht man die Breite der Layout-Bereiche besser. Sie sehen hier den Kopfbereich, der geht von ganz links bis ganz rechts, ebenso wie die anderen Layout-Bereiche, aber innerhalb des Kopfbereiches gibt es hier ein zusätzliches Element, und da das semantisch neutral ist, habe ich dafür ein div genommen und das bekommt die Klasse inside. Der Name der Klasse ist nicht wichtig, aber inside ist für ein inneres div-Element schon gar nicht so schlecht, kann auch Wrapper oder Container oder sonst wie heißen. Sie sehen…

Inhalt