Für Gabriele

by Rolf

HTML

<header>
  <h1>Deine Kleine Seite</h1>
</header>
<nav>
  <ul>
    <li><a href="#">Dies</a></li>
    <li><a href="#">könnte</a></li>
    <li><a href="#">deine</a></li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">sein</a></li>
  </ul>
</nav>
<main>
  <p>Hier könnten deine Inhalte stehen.</p>
  <p>Optional könnte man die Navigation zu einem Button verkleinern, wenn der Bildschirm zu schmal wird. Aber das braucht JavaScript.</p>
</main>
<footer>
<ul>
  <li><a href="#">Fußlink 1</a></li>
  <li><a href="#">Fußlink 2</a></li>
  <li><a href="#">Fußlink 3</a></li>
  <li><button type="button" popovertarget="pop-info">Infobutton</button></li>
</footer>
<div id="pop-info" popover>
  <h2>Hier ist Dein Popover-Fenster</h2>
  <p>Informations&shy;bedarfs&shy;befriedigung 1</p>
  <p>Informations&shy;bedarfs&shy;befriedigung 2</p>
</div>

CSS

body {
  --body-margin: 8px;  /* Margin wird 2x verwendet, darum als custom property speichern */
  margin: var(--body-margin);
  display: grid;
  gap: 0.2em 0.5em;
  grid: "head" auto
        "nav" auto
        "main" 1fr
        "foot" auto / 1fr;
  height: calc(100vh - 2*var(--body-margin));
}
header {
  grid-area: head;
  background-color: #fcc;
}
header h1 {
  margin: 0.2em auto;
}

/* Navigationsbereich standardmäßig für schmalen Schirm */
/* Items der Menüliste als inline-block, damit balancierter Umbruch möglich ist - flex-wrap kennt keine Balancierung */
nav {
  background-color: #cfc;
  grid-area: nav;

  ul {   /* Zur Abwechslung mal als nested CSS */
    --row-gap: 0.1em;   /* Auf custom property für --row-gap könnte man verzichten */
    --col-gap: 0.5em;   /* --col-gap wird in @media-Query umgeschaltet! */
    text-align: center;
    text-wrap: balance;
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: var(--row-gap) var(--col-gap);
  }
  a {
    padding: 0.4em 0.8em;  /* Das Padding vergrößert die Trefferzone für die Menü-Items und hat nichts mit dem Gap zu tun */
    display: block; 
    background-color: #ff8;
  }
}
/* Umschalten auf Breit-Darstellung ab 30em Bildschirmbreite. Nach Geschmack ändern */
@media (width > 30em) {
  body {
    /* Ändern des Grid-Schemas reicht zum Umpositionieren der Seitenbereiche */
    grid: "head head" auto
          "nav main" 1fr
          "foot foot" auto / auto 1fr;
  }
  /* In der Breitdarstellung die Nav-Itemns links anordnen und als Block darstellen, damit
     sie untereinander erscheinen. list-style braucht dann nicht gesetzt zu werden */
  nav {
    ul {
      --col-gap: 0em;   /* --col-gap wird bei linksseitiger Navi nicht gebraucht */
      text-align: left; /* Nav-Items nicht mehr zentrieren */
    }
    li {
      display: block;   /* Auf Blockdarstellung wechseln, damit die Items untereinander stehen */
    }
...