Flexbox Layout mit Header, Header Menü, Left Navigation, Right Navigation, Footer Menü, Footer


Thomas_Jung

Erfahrenes Mitglied
#1
Hallo,
ich habe folgenden Code im Netz gefunden.

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Responsive Sticky Footer - Flexbox</title>

        <style>

            * {
                font-family: Arial, sans-serif;
            }

            html, body {
                display: flex;
                flex-direction: column;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            header {
                background: grey;
                color: white;
            }

            main {
                flex: 1;
            }

            footer {
                background: grey;
                color: white;
            }

            .container {
                margin: 2em auto;
                max-width: 800px;
                padding: 0 1em;
            }

        </style>

    </head>
    <body>
        <header>
            <div class="container">
                Header
            </div>
        </header>

        <main>
            <div class="container">
                <h1>Sticky Footer mit Hilfe von CSS »Flexbox«</h1>
                <p>Der Sticky Footer wird in dieser Beispieldatei mit Hilfe von CSS »Flexbox« realisiert.</p>
            </div>
        </main>

        <footer>
            <div class="container">
                Sticky Footer mit variabler Höhe
            </div>
        </footer>
    </body>
</html>
Kann mir jemand helfen das Layout zu vervollständigen das es wie es im Anhang (Bild) ausieht.

Herzlichen Dank für ihre Aufmerksamkeit

Gruß Thomas Jung
 

Anhänge

#2
Hallo

Kann mir jemand helfen das Layout zu vervollständigen das es wie es im Anhang (Bild) ausieht.
Der Quelltext eignet sich leider nicht als Vorlage.

Du suchst ein sogenanntes "Holy Grail Layout" (Holy Grail = Heiliger Gral).

Vor der Einführung von CSS3 war das nur mit aufwändigen Tricks und relativ unflexibel zu erstellen. Wer dazu eine Lösung finden konnte hatte etwas Geheimnisvolles enthüllt, daher die Bezeichnung.

Seit CSS3 und Flexbox ist eine Lösung deutlich einfacher geworden werden. Hauptsächlich muss darauf geachtet werden, dass die gebräuchlichen Browser damit zurechtkommen.

Ich habe vor einiger Zeit mal eine Beispieldatei erstellt, die gleichzeitig ein einfaches Fallback für Browser enthält, die CSS3 / Flexbox nicht unterstützen. Es folgt auch dazu dem Ansatz "Mobile First".

Durch Anpassen der Abstände und Rahmen kann dann dein Layout erreicht werden. Mit meiner Darstellung der umrahmten Container ist aber die Größe und das Verhalten der einzelnen Container besser zu sehen und nachzuvollziehen.

Dass das CSS nicht einfach zu verstehen ist kann ich leider nicht ändern. Ich habe die einfachste mir bekannte Möglichkeit verwendet. Ein gewisses Grundwissen ist trotzdem erforderlich.

Aber so hast du zumindest ein funktionierendes Beispiel, dass du untersuchen kannst. Auch um zu sehen ob das Layout deinen Vorstellungen entspricht.

Zunächst der Quelltext

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Holy Grail Layout mit Flexbox</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import 'https://fonts.googleapis.com/css?family=Roboto';

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /*Basisangaben*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /*darkblue*/
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Holy Grail Layout*/
   @media all {
      body {
         height: calc(100vh - 0.5rem);
         padding: 0rem 0.25rem 0.5rem 0.25rem;
         margin: 0rem;
      }
      .pageheader,
      .navigation,
      .sidebar,
      .pagefooter {
         padding: 0rem 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
         margin: 0.5rem 0.25rem 0rem 0.25rem;
      }
   }
   @media only screen and (min-width: 100px) {
      body {
         display: flex;
         flex-direction: column;
      }
      .pageheader,
      .navigation,
      .sidebar,
      .pagefooter {
         flex-shrink: 0;
      }
      .flexhilfscontainer {
         flex-grow: 1;
         flex-shrink: 0;
         flex-basis: auto;
      }
   }

   /*.flexhilfscontainer*/
   @media all {
      .flexhilfscontainer {
      }
      .flexhilfscontainer>* {
         padding: 0rem 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
         margin: 0.5rem 0.25rem 0rem 0.25rem;
      }
   }
   @media only screen and (min-width: 100px) {
      .flexhilfscontainer {
         display: flex;
         flex-direction: column;
      }
      .flexhilfscontainer .content {
         order: 2;
      }
      .flexhilfscontainer .aside01 {
         order: 1;
      }
      .flexhilfscontainer .aside02 {
         order: 3;
      }
   }
   @media only screen and (min-width: 900px) {
      .flexhilfscontainer {
         display: flex;
         flex-direction: row;
      }
      .flexhilfscontainer>* {
         flex-grow: 0;
         flex-shrink: 0;
      }
      .flexhilfscontainer .content {
         flex-basis: calc(100% - 300px - 300px - 1rem - 4px - 0.5rem);
      }
      .flexhilfscontainer .aside01 {
         flex-basis: calc(300px - 1rem - 4px - 0.5rem);
      }
      .flexhilfscontainer .aside02 {
         flex-basis: calc(300px - 1rem - 4px - 0.5rem);
      }
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Header</h1>
   </header>
   <nav id="navigation" class="navigation">
      <h2>Header Menü</h2>
   </nav>
   <div class="flexhilfscontainer">
      <main id="content" class="content">
         <h2>Hauptinhalt</h2>
      </main>
      <aside class="aside01">
         <h2>Left Navigation</h2>
      </aside>
      <aside class="aside02">
         <h2>Right Navigation</h2>
      </aside>
   </div>
   <aside class="sidebar">
      <h2>Footer Menü</h2>
   </aside>
   <footer id="pagefooter" class="pagefooter">
      <p>Footer - Original&shy;diskussion: <a href="https://www.tutorials.de/threads/flexbox-layout-mit-header-header-menue-left-navigation-right-navigation-footer-menue-footer.405541/">https://&shy;www.&shy;tutorials.de/</a></p>
   </footer>
</body>
</html>
und der Link zu einer Beispieldatei zum direkten Ausprobieren:

http://boratb.bplaced.net/index62.html

Gruss

MrMurphy
 
#3
Hallo

Durch Anpassen der Abstände und Rahmen kann dann dein Layout erreicht werden. Mit meiner Darstellung der umrahmten Container ist aber die Größe und das Verhalten der einzelnen Container besser zu sehen und nachzuvollziehen.
Ich habe mal deine Wunschdarstellung in den Quelltext übernommen.

Zwischen 900px und 1300px Fensterbreite erfolgt die Ansicht in meinem bevorzugten Layout, über 1300px Fensterbreite in deinem Wunschlayout. Das Online-Beispiel habe ich auch angepasst.

Auch um zu zeigen das zu solchen Änderungen nur wenige Zeilen CSS notwendig sind, wenn das CSS-Grundlayout vorausschauend erstellt wurde. Aber man muss natürlich von Beginn an wissen was man tut, sich ein Konzept erstellen und sich dann durchgehend daran halten.

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Holy Grail Layout mit Flexbox</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import 'https://fonts.googleapis.com/css?family=Roboto';

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /*Basisangaben*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
      }
      body {
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /*darkblue*/
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

   /*Holy Grail Layout*/
   @media all {
      body {
         height: calc(100vh - 0.5rem);
         padding: 0rem 0.25rem 0.5rem 0.25rem;
         margin: 0rem;
      }
      .pageheader,
      .navigation,
      .sidebar,
      .pagefooter {
         padding: 0rem 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
         margin: 0.5rem 0.25rem 0rem 0.25rem;
      }
   }
   @media only screen and (min-width: 100px) {
      body {
         display: flex;
         flex-direction: column;
      }
      .pageheader,
      .navigation,
      .sidebar,
      .pagefooter {
         flex-shrink: 0;
      }
      .flexhilfscontainer {
         flex-grow: 1;
         flex-shrink: 0;
         flex-basis: auto;
      }
   }
   @media only screen and (min-width: 1300px) {
      .pageheader {
         border-bottom: 0;
      }
      .navigation {
         border-bottom: 0;
         margin: 0rem 0.25rem 0rem 0.25rem;
      }
      .sidebar {
         border-top: 0;
         margin: 0rem 0.25rem 0rem 0.25rem;
      }
      .pagefooter {
         border-top: 0;
         margin: 0rem 0.25rem 0rem 0.25rem;
      }
   }

   /*.flexhilfscontainer*/
   @media all {
      .flexhilfscontainer {
      }
      .flexhilfscontainer>* {
         padding: 0rem 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
         margin: 0.5rem 0.25rem 0rem 0.25rem;
      }
   }
   @media only screen and (min-width: 100px) {
      .flexhilfscontainer {
         display: flex;
         flex-direction: column;
      }
      .flexhilfscontainer .content {
         order: 2;
      }
      .flexhilfscontainer .aside01 {
         order: 1;
      }
      .flexhilfscontainer .aside02 {
         order: 3;
      }
   }
   @media only screen and (min-width: 900px) {
      .flexhilfscontainer {
         display: flex;
         flex-direction: row;
      }
      .flexhilfscontainer>* {
         flex-grow: 0;
         flex-shrink: 0;
      }
      .flexhilfscontainer .content {
         flex-basis: calc(100% - 300px - 300px - 1rem - 4px - 0.5rem);
      }
      .flexhilfscontainer .aside01 {
         flex-basis: calc(300px - 1rem - 4px - 0.5rem);
      }
      .flexhilfscontainer .aside02 {
         flex-basis: calc(300px - 1rem - 4px - 0.5rem);
      }
   }
   @media only screen and (min-width: 1300px) {
      .flexhilfscontainer .content {
         border-left: 0;
         border-right: 0;
         margin: 0rem 0rem 0rem 0rem;
         flex-basis: calc(100% - 300px - 300px - 1rem - 0px - 0rem);
      }
      .flexhilfscontainer .aside01 {
         margin: 0rem 0rem 0rem 0.25rem;
         flex-basis: calc(300px - 1rem - 4px - 0.25rem);
      }
      .flexhilfscontainer .aside02 {
         margin: 0rem 0.25rem 0rem 0rem;
         flex-basis: calc(300px - 1rem - 4px - 0.25rem);
      }
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h2>.pageheader</h2>
   </header>
   <nav id="navigation" class="navigation">
      <h2>.navigation</h2>
   </nav>
   <div class="flexhilfscontainer">
      <main id="content" class="content">
         <h2>.content</h2>
      </main>
      <aside class="aside01">
         <h2>.aside01</h2>
      </aside>
      <aside class="aside02">
         <h2>.aside02</h2>
      </aside>
   </div>
   <aside class="sidebar">
      <h2>.sidebar</h2>
   </aside>
   <footer id="pagefooter" class="pagefooter">
      <h2>.pagefooter</h2>
      <p>Original&shy;diskussion: <a href="https://www.tutorials.de/threads/flexbox-layout-mit-header-header-menue-left-navigation-right-navigation-footer-menue-footer.405541/">https://&shy;www.&shy;tutorials.de/</a></p>
   </footer>
</body>
</html>
Gruss

MrMurphy
 
Zuletzt bearbeitet: