Seitenstruktur- und Layout-Frage

[Cooney3000]

Hallo Zusammen,

ich grüble, wie man das folgende Layout am besten hinbekommt:

Die Struktur-Tags sollen eine begrenzte Breite bekommen:

<header></header> <nav></nav> <section></section> <footer></footer>

Aber: Background-Farben und -Bilder sollen einerseits die Höhen des Headers, der Navigation etc. übernehmen, aber über die gesamte Bildschirmbreite gehen. Ich habe es schon hinbekommen, aber schön ist der Code nicht.

Geht das irgendwie elegant und einfach?

Danke schon mal.

[Gunnar Bittersmann]

@@Cooney3000

Die Struktur-Tags sollen eine begrenzte Breite bekommen:

<header></header> <nav></nav> <section></section> <footer></footer>

Aber: Background-Farben und -Bilder sollen einerseits die Höhen des Headers, der Navigation etc. übernehmen, aber über die gesamte Bildschirmbreite gehen.

Dann dürfen header, nav, sections, footer keine begrenzte Breite (max-width, schon gar nicht width) bekommen, sondern sollen über die volle Bildschirmbreite gehen. (body { margin: 0 } nicht vergessen.)

header, nav, sections, footer bekommen rechts und links
padding: calc((100% - <gewünschte Breite>) / 2).

Wenn man will, kann man auch das durch die mal vorhandene, mal nicht vorhandene Scrollbar hervorgerufene Zappeln verhindern.

☞ dieses und darauf folgende Postings

LLAP 🖖

[Klaus]

Hallo,

header, nav, sections, footer bekommen rechts und links
padding: calc((100% - <gewünschte Breite>) / 2).

interessant dass du dieses ohne ein zusätzliches DIV machen würdest. Bis jetzt habe ich für so etwas immer ein <div class=container"></div> genommen.

Meine Frage, wie würdest du das padding vergeben wenn <header></header> über die ganze Seite gehen soll, aber der Inhalt sagen wir ein Logo links und eine Navigation rechts auf eine Breite von 1300px begrenz sein soll und dieses zentriert platziert werden soll.

Kommst du da noch immer ohne einem zusätzlichen DIV aus?

[Gunnar Bittersmann]

@@Klaus

Meine Frage, wie würdest du das padding vergeben wenn <header></header> über die ganze Seite gehen soll, aber der Inhalt sagen wir ein Logo links und eine Navigation rechts auf eine Breite von 1300px begrenz sein soll und dieses zentriert platziert werden soll.

Kommst du da noch immer ohne einem zusätzlichen DIV aus?

Ja. header kann links und rechts padding haben und Flexbox sein. Wie in diesem Beispiel.

Und vergiss bitte schnell, dass es sowas wie px gibt.

LLAP 🖖

[Matthias Apsel]

Hallo Cooney3000,

Die Struktur-Tags sollen eine begrenzte Breite bekommen:

Elemente.

Bis demnächst
Matthias