• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Layout einer/mehrerer Navigationsleisten

M

MisterR

Neues Mitglied
Hallo zuammen!

Wir haben als Studiprojekt die Aufgabe eine Website zu erstellen. Dabei geht es um eine original italienische Eisdiele.
Zwar wissen wir, wie man EINE <nav> erstellt, wie man danach die Breite der jeweiligen Buttons einteilt und eine Hintergrundfarbe hinterlegt.
Da es aber insgesamt 6 Buttons sind, wollten wir die Tricolore implementieren (je 2 Buttons eine Farbe). Nun sind wir nicht ganz sicher, wie wir das implementieren sollten.

Ich hatte mal den Versuch gestartet 3 <nav>-Container zu benutzen und dann für jeden einzelnen eine Hintergrundfarbe vorzugeben. Das klappt zwar in gewisser Weise, allerdings stapeln sich dann alle 3 Leisten am rechten Bildschirmrand übereinander, anstatt sich in einer Reihe über die komplette Seite zu ziehen.

Habt ihr da evtl. eine Ahnung, wie man sowas richtig implementieren würde?
Besten Dank vorab!

Gruß
MisterR
 
Werbung:
Hallo,

drei nav-Boxen zu erstellen entspricht nicht der Trennung von HTML für den Inhalt und CSS für das Aussehen.

Es sollte nur eine nav-Box erstellt werden und die drei Farben können dann am flexibelsten durch background-image gradient erstellt werden. Der Quelltext könnte zum Beispiel so aussehen:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
  <title>Background tricolore</title>
  <meta name="description" content="HTML5, CSS3">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Um alte IE HTML5-tauglich zu machen -->
  <!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
  <style>
  @media all {
  /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
  header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
  display: block;
  }
  * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  html {
  font-size: 120%;
  }
  body {
  padding: 0;
  }
  nav {
  border: 1px solid silver;
  }
  ul {
  background-image: linear-gradient(to right, green 0%, green 33%, white 33%, white 67%, red 67%, red 100%);
  padding: 0.5rem 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
  }
  li {
  list-style-type: none;
  }
  }
  @media all and (max-width: 800px) {
  ul {
  flex-wrap: wrap;
  }
  li {
  text-align: center;
  width: 33.3%;
  }
  li:nth-child(1),
  li:nth-child(3),
  li:nth-child(5) {
  order: 1;
  }
  li:nth-child(2),
  li:nth-child(4),
  li:nth-child(6) {
  order: 2;
  }
  }
  </style>
</head>
<body>
  <nav>
  <ul>
  <li>Kirsche</li>
  <li>Banane</li>
  <li>Kiwi</li>
  <li>Erdbeere</li>
  <li>Mango</li>
  <li>Pflaume</li>
  </ul>
  </nav>
</body>
</html>

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben