Cooney3000: Seitenstruktur- und Layout-Frage

Hallo Zusammen,

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

Website-Layout

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.

  1. @@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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. 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?

      1. @@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 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. Hallo Cooney3000,

    Die Struktur-Tags sollen eine begrenzte Breite bekommen:

    Elemente.

    Bis demnächst
    Matthias

    --
    Pantoffeltierchen haben keine Hobbys.