right aligned Navbar mit Bild und Text

mhcomputech · 15. April 2019

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:

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>

Code

#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;
}

Alles anzeigen

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.

Code

<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>

Alles anzeigen

Code

#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;
}

Alles anzeigen

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.

Sempervivum · 15. April 2019

Mit Grid habe ich keine Erfahrung aber mit Flex ist es einfach:

https://jsfiddle.net/Sempervivum/h10nte9u/9/

Es geht auch mit weniger Containern:

https://jsfiddle.net/Sempervivum/h10nte9u/13/

MrMurphy · 16. April 2019

Bei

Code

<!DOCTYPE html>

sollten gleich die damit ausgewählten Regeln für HTML5 verwendet werden. Das ist noch übersichtlicher und macht bei der zukünftigen Pflege der Seite am wenigsten Stress.

HTML-Quellcode:

Code

<nav class="navbar">
   <a href="">
      <img src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg" alt="Home-Icon">
      <p>Home</p>
   </a>
   <a href="">
      <img src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg" alt="About-Icon">
      <p>About</p>
   </a>
   <a href="">
      <img src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg" alt="Projects-Icon">
      <p>Projects</p>
   </a>
   <a href="">
      <img src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg" alt="Contact-Icon">
      <p>Contact</p>
   </a>
   <a href="">
      <img src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg" alt="Imprint-Icon">
      <p>Imprint</p>
   </a>
</nav>

Alles anzeigen

und das CSS dazu:

Code

.navbar {
   background-color: red;
   padding: 20px;
   display: flex;
   justify-content: flex-end;
}
.navbar a {
   text-decoration: none;
   margin: 0 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.navbar img {
   width: 64px;
}
.navbar p {
   text-align: center;
   margin: 0 10px;
}

Alles anzeigen

Zusatzinfo:

height-Angaben sollten nur verwendet werden wenn sie erforderlich sind. Das ist in diesem Beispiel jedoch überflüssig.

Zumal sich die beiden einzigen height-Angaben auch noch widersprechen. Der umgebende Container hat eine Höhe von 60px, soll aber ein Bild mit einer Höhe von 64px enthalten, unter dem zusätzlich noch Text stehen soll.

CSS-Grid ist für die Darstellung von Rastern ersonnen worden. Hier liegt aber kein Raster vor. Falls CSS-Grid trotzdem verwendet werden soll gehört es zum guten Stil im CSS auch das Raster anzugeben. In diesem Fall also 5 Spalten. Bei einer Änderung der Navigation muss dann aber auch das Raster angepasst werden. Flex ist in diesem Fall also sinnvoller. Grid ist kein "besseres" Flex, wie häufig fälschlicherweise behauptet wird. Die haben unterschiedliche Aufgaben, die sich halt nur teilweise überschneiden.

Für die Verwendung von Grid müsste bei meinen Beispiel in .navbar einfach

Code

display: flex;
justify-content: flex-end;

durch

Code

display: grid;
grid-template-columns: repeat(5, auto);
justify-content: end;

ersetzt werden. Um auch eine Lösung mit CSS-Grid zu zeigen.

mhcomputech · 16. April 2019

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/

right aligned Navbar mit Bild und Text

Jetzt mitmachen!

Teilen

Tags