right aligned Navbar mit Bild und Text

  • 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
    1. <div id="navbar">
    2.   <div id="navbarLinkContainer">
    3.     <a href="/">Home</a>
    4.     <a href="/about">About</a>
    5.     <a href="/projects">Projects</a>
    6.     <a href="/contact">Contact</a>
    7.     <a href="/imprint">Imprint</a>
    8.   </div>
    9. </div>

    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.



    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.

  • Bei

    Code
    1. <!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:


    und das CSS dazu:



    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
    1. display: flex;
    2. justify-content: flex-end;

    durch


    Code
    1. display: grid;
    2. grid-template-columns: repeat(5, auto);
    3. justify-content: end;

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