[gelöst] Navbar mit Flexbox angefangen und mässig Erfolg gehabt

BTW: Bei dem Posting #19 frage ich mich, wo die Mitglieder sind, die ständig das Posten von fertigem Code beanstanden. In diesem Fall gibt sich der Fragesteller große Mühe, sich das Verständnis für die Dinge zu erarbeiten und es ist fraglich, ob das Copy&Paste von fertigem Code dabei zielführend ist. Der Lernfortschritt wird dabei gleich null sein.

Siehe auch hier:

Thema

Regeln „Hilfestellung im Forum“

Hey zusammen,

die Administration und Moderation haben in den letzten Tagen und Wochen Regeln zur Hilfestellung hier im Forum erarbeitet.


Unsere aktuellen Regeln zur Hilfestellung hier im Forum:

1. Hilfe zur Selbsthilfe!
   • Der Hilfesuchende erhält zu dem Thema, bei dem er Hilfe braucht, Anregungen, nützliche Links und Erklärungen von den Helfern
2. Es wird ungern gesehen und ist nicht zielführend wenn zu vielen Themen fertige Lösungen gepostet werden. Daher bitte unterlassen. Sonst behalten wir uns

…

Stef

19. Juni 2018

Zitat von Sempervivum

es ist fraglich, ob das Copy&Paste von fertigem Code dabei zielführend ist. Der Lernfortschritt wird dabei gleich null sein.

Dass ausgerechnet du so etwas schreibst, verwundert mich jetzt schon. In anderen Foren lieferst du doch auch häufig fertigen Code.

Auch hier hilft "align-self" weiter: Einfach auf "flex-start" ändern und das Logo rutscht nach oben.

Zitat von Sempervivum

BTW: Bei dem Posting #19 frage ich mich, wo die Mitglieder sind, die ständig das Posten von fertigem Code beanstanden. In diesem Fall gibt sich der Fragesteller große Mühe, sich das Verständnis für die Dinge zu erarbeiten und es ist fraglich, ob das Copy&Paste von fertigem Code dabei zielführend ist. Der Lernfortschritt wird dabei gleich null sein.

Wer redet denn hier von Copy&Paste?

Der größte Teil davon ist doch SEIN CODE!

Ich habe nur paar Anpassungsmöglichkeiten aufgezeigt, die er sich anschauen kann wenn er will.

Hier geht doch keiner davon aus, das er HIER jetzt C&P macht, wo es doch seinem Code entnommen ist und er sich Schritt für Schritt voranbringen möchte!

Außerdem bin ich paar Sätze vor dem geposteten Code ja darauf eingegangen, wie sein eigentliches Problem in seiem Code zu lösen ist, also so what?

Zitat

desktop vertikal zu weit oben

Da habe ich jetzt nicht daran gedacht: Das darf nur in der Mobilansicht wirksam sein, also in die Mediaquery hinein:

@media(max-width:750px){
        .list-container ul {
        flex-direction: column;
        }
        .list-container{
        display: none;
        width: 100%
        }
      .toggle-button{
        flex-direction: column;
            display: flex;
        }
    .brand {
        align-self: flex-start;
    }
}

Bei der unteren Grafik weiß ich jetzt nicht genau was Du meinst: Logo und Hamburger horizontal in einer Linie und darunter das Menü?

PS: Ich habe noch Mal in das Video hinein geschaut und meine Vermutung hat sich bestätigt: Logo und Hamburger horizontal in einer Linie und darunter das Menü. Das kannst Du leicht erreichen, indem Du die Anordnung in der Mediaquery auf vertikal umschaltest, also flex-direction: column;

Die gesamte Mediaquery würde dann so aussehen:

@media(max-width:750px){
    .list-container ul {
        flex-direction: column;
    }
    .list-container{
        display: none;
        width: 100%
    }
    .toggle-button{
        flex-direction: column;
        display: flex;
    }
    .brand {
       align-self: flex-start;
    }
    nav {
        flex-direction: column
    }
}

Nachdem wir die Anordnung auf untereinander umgeschaltet haben hat das align-self: flex-start; jetzt den Effekt, dass das Logo links angeordnet wird.

Guten Morgen, dazu findest Du alles u. a. hier:

CSS: Bilder mit CSS-Attribute und Hintergrundbilder über background:url

Viel Erfolg und einen schönen Sonntag!

Edit: Ich sehe gerade, dass dort nichts über cover und contain gesagt wird. Du kannst dich darüber jedoch hier informieren:

Bilder automatisch anpassen durch Responsive Webdesign