Responsive (Bild-)Navigationleiste

  • Howdy folks!


    Ja, ich bins mal wieder, denke werde des öfteren Male hier ein paar Fragen raushauen. :)


    Ich bin mit meinem Webdesign schon etwas vorangekommen. Nun habe ich folgendes Problem, wofür man sich einmal die Bilder ansehen sollte.




    Ich glaube da fällt einen schon was auf :/ Möchte die Navigationsleiste eben mittig haben und das responsive. Derzeitig mache ich es mit margin, aber das siehste ja dann im Code.
    Was würdet ihr verwenden, um die Bilder etwas weiter auseinander zu machen?


  • Also folgende Methoden stehen dir zur Verfügung.


    1. Tables ( nicht empfehlenswert )
    2. div columns ( Sprich 4 Div-Elemente mit jeweils 25% breite & dann noch den innen Abstand mittels padding setzen )
    3. flex boxes


    Mit allen 3 Methoden solltest du an dein Ziel kommen.


    Außerdem:


    #nav sollte keine % als margin-left haben, sondern eher ein margin-left // margin-right: auto;

  • Danke, habs jetzt so unter #nav reingemacht. :)
    Funktioniert spitze. :)


    Danke, danke, danke :thumbup:

    CSS
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 20%;