Beiträge von mhcomputech

Vielen Dank euch beiden. Ich habe mich jetzt für die Variante entschieden, wo die Container nicht starr sind, sondern umbrechen. Hier mal das Fiddle dazu:

https://jsfiddle.net/9w8p0jrc/

Hi,

ich versuche eine Navbar zu bauen, bei der die Items (links) auf der rechten Seite angesiedelt sind. Habe ich nur Text, dann funktioniert mein folgender Code:

<div id="navbar">
  <div id="navbarLinkContainer">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/projects">Projects</a>
    <a href="/contact">Contact</a>
    <a href="/imprint">Imprint</a>
  </div>
</div>

#navbar {
  height: 60px;
  display: grid;
  justify-content: end;
  padding: 20px;
  background: red;
  align-items: center;
}

#navbarLinkContainer {}

a {
  text-decoration: none;
  margin: 0 10px;
  color: white;
  background: black;
}

Das Ganze kann man auch hier ausprobieren:

https://jsfiddle.net/tcq7x1za/

Nun möchte ich über dem Text noch ein Bild anzeigen. Also habe ich den Text und das Bild in einen Wrapper Container gelegt.

<div id="navbar">
  <div id="navbarLinkContainer">
    <a class="navbarItemContainer" href="/">
      <div>
        <img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
        <div class="navbarItemTitle">Home</div>
      </div>
    </a>
    <a class="navbarItemContainer" href="/about">
      <div>
        <img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
        <div class="navbarItemTitle">About</div>
      </div>
    </a>
    <a class="navbarItemContainer" href="/projects">
      <div>
        <img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
        <div class="navbarItemTitle">Projects</div>
      </div>
    </a>
  </div>
</div>

#navbar {
  height: 60px;
  display: grid;
  justify-items: end;
  padding: 20px;
  align-items: center;
  background: red;
}

#navbarLinkContainer {
  margin: 0 60px;
}

.navbarItemContainer {
  text-align: center;
  text-decoration: none;
  margin: 0 10px;
}

.navbarItemImg {
  width: 64px;
  height: 64px;
}

Fiddle:

https://jsfiddle.net/jh96an1m/

Leider zerbricht dadurch das CSS, wie beim Fiddle zu sehen. Hat jemand eine Idee, wie ich das Ganze fixen kann?

Vielen Dank schon einmal.

Lieber wäre mir, es ginge hier weiter. Ich werde den Post im anderen Forum entfernen lassen

Hallo,

ich habe eine Menüleiste, die bei kleineren Bildschirmgrößen umbricht und zu einem typischen Mobile Menu wird.

Das sieht auch alles schick aus, aber als letzter Baustein soll sich das geöffnete mobile Menü über die ganze Seite strecken. Dazu bekommen die einzelnen Link Container Flex 1 damit sie sich ihre benötigte Höhe selbst aufteilen.

Laut Google liegt die Lösung wohl bei einer Flexbox mit FlexDirection Column aber in der aktuellen CSS Struktur habe ich Schwierigkeiten, diese vertikale Flexbox noch unterzubringen.

Hier mal die Spielwiese mit Dummy Code

https://jsfiddle.net/yn2cg8b0/36/

Wäre super, wenn sich jemand mit CSS auskennt und mir helfen kann, das aktuelle Menü nicht kaputt zu machen und die Höhe der Link Container gleichmäßig auf die Bildschirmhöhe zu verteilen.

Hier habe ich ein passendes Beispiel für ein Menü bei einem mobilen kleinen Bildschirm

https://www.thenativeweb.io/