Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 11.03.2020, 10:01
cloned cloned ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.039
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Hui, eine Zeitreise. Wie findet man solche uralten Anleitungen? Das war wohl damals einmal aktuell aber heute kann man das vergessen (Ist nicht böse gemeint, bin nur verwundert)

Verwende display: grid; für deine Anforderungen.
in etwa so ein Aufbau:

Code:
<header class="grid-header"> 
 <p>kopfzeile</p>
</header>

<nav class="grid-menu">
 <ul> <li> item 1</li> <li> item 2 </li> </ul>
</nav>

<main class="grid-main">
 <h1> Best content ever </h1>
</main>

<footer class="grid-footer">
 <ul> <li> item 1</li> <li> item 2 </li> </ul>
</footer>
Code:
body {
  display: grid;
grid-template-areas: 
  "header header"
  "navigation main"
  "footer footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.grid-header {
  grid-area: header;
}

.grid-menu {
  grid-area: navigation;
}

.grid-main {
  grid-area: main;
}

.grid-footer {
  grid-area: footer;
}

.grid-footer ul {
  display: flex; 
  list-style-type: none;
}
Mit Zitat antworten
Sponsored Links