menüpositionierung im Header

    Hallo Sempervirum, vielen Dank für deine Antwort. grübel. wie wurde das denn gelöst, als es die flexbox noch nicht gab? okay, dann werd ich mich mal in die flexbox tiefen eindenken:-( Dennoch vielen Dank.

    Beatrix

    <Xich versteh den Ansatzbzw die Syntax noch nicht so recht?

    Bei meinem Beispiel: kann ich da in den header schreiben?

    <header>

    Code
     #flexContainer {      display: flex;      flex-direction: row;   } <header>

    und dann? Sorrie, aber ich denke wohl falsch:-(

    doch, doch, ich hab es selbst geschrieben, allerdings vor einiger Zeit, nach einem youtube video, dass ich gar nicht wiederfinden kann.
    Wenn ich das richtig verstehe, dann ist der gesamte Aufbau falsch:-(

    Also wenn ich mir dein Nav-Element so ansehe...

    Code
    padding-top: 72px;
height: auto;
max-height: 0;

    und für die li's nutzt du dann float.

    Überhaupt, deine CSS beinhaltet einige Fehler und ungünstige/unlogische Angaben.

    Auch wenn YouTube-Videos oft nicht gerade Qualität mitbringen, aber diesen Code hast du sicherlich durch "versuchen und nicht verstehen" so hinbekommen, oder? Macht ja nix, aber du solltest da bei Gelegenheit echt mal ein bischen nach Plan gehen und nicht

    willkürliche Codezeilen einfügen und testen.


    Was dein Beispielcode angeht, was machen die header-Tags im CSS?

    In deinem Code müsste es eher so aussehen:

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

    da du im Header das Menü und das Logo hast, könntest du auch "space-between" verwenden. So wäre das Logo links, das Menü rechts...

    ich würde mich wirklich sehr über eine Individualschulung freuen. Gibt es da nicht jemanden der mir die Logik und den Grundaufbau von flexboxen erklärt. Ich hab das Gefühl mir fehlt da war;-) wie nextuser schon gesagt hat. Das wäre super. Wie gesagt, natürlich bezahl ich die Stunden.

    Sowas wie ein Privat Lehrer ist zwar schön , du mußt aber bedenken das der ( Lehrer ) nicht immer da ist.

    Wenn du ein problem hast und das hier ins Forum schreibst ,

    kann dir jeder Antworten und du bekommst auch recht schnell Hilfe.


    Bei einen Lehrer schreibst du ihn ja Privat an und mußt darauf warten bis er dir Antwortet.

    Das kann auch mal Tage dauern bis dein Lehrer antwortet ( jenach sein Privat leben ).


    Wir helfen dir alle gerne.

    Einfach hier schreiben wo genau deine Schwächen sind und irgendwer wird dir helfen.


    Am besten spielst du erstmal selber mit den Code rum .

    Zb hier

    https://the-echoplex.net/flexyboxes/


    Da kannst du testen was welcher Code macht.

    Wenn dann fragen aufbleiben einfach hier schreiben

    Beatrix, woran scheitert es denn mit dem Verständnis? Der Guide (Link hat Sempervivum gepostet) ist doch recht gut?


    PS: Leute, ist das ein Fehler bei mir, oder ist bei euch auch der Startpost von Beatrix verschwunden?

    ohje, vor lauter Aufregung hab ich den Link samt Inhalt gelöscht;(morgen lade ich die datei noch mal neu. Und fange noch mal neu an. Vielen Dank noch mal auch für das Mutmachen. Herzlichst Beatrix

    Guten Morgen :),

    ein kleines technisches Problem hat mich gehindert, weiter an meinem flexbox aufbau zu basteln. So richtig verstanden hab ich es noch nicht :/Hier noch mal der link zum aufbau: http://formathochzwei.de/webtest/vorlage/flexbox/

    Meine Frage an Euch Profis: Wo denk ich falsch z.b. bei der Menüleiste im Header (der Tipp von nextuser:

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


    oder zum beispiel beim inhalt: meine idee: der .inhalt ist die flexbox und bekommt

    .inhalt {

    display: flex;height: 100%;} darin enthalten sind die items .content und die nav.sidebar, diese soll eine feste breite bekommen von 300px und den rest soll sich der content nehmen mit flex-grow: 1. Das geht aber gar nicht . Was mach ich falsch<X Ich würde mich sehr über ein weiteres feedback freuen. Herzlichen Gruß Beatrix

    Leider weiß ich nicht, was Du dir vorstellst, wie das Ganze aussehen soll. Einiges ist schon ganz OK so: display: flex; für den Header, damit die Items darin nebeneinander angeordnet werden.


    Ich empfehle folgendes:


    Konsequent mit Flex arbeiten, also

    Code
    .top {
    flex: 1;
}

    statt

    Code
    .top {
    width: 20%;
}

    Beim Menü müsstest Du dann entsprechend einen höheren Wert für flex nehmen, z. B. flex: 4; damit das Menü im Verhältnis zu den Kontaktdaten mehr Raum einnimmt.


    Auf überflüssige Container verzichten: Auf das <div class="menu"> kannst Du IMO verzichten.


    Beschreibe doch mal genauer, wie es aussehen soll und was nicht deinen Vorstellungen entspricht.

    PS: Ich hätte genauer lesen sollen, deine Frage bezog sich auf die Sidebar. Hier hast Du flex-grow: 1; verwendet. Besser entweder die komplette Notation mit flex-grow, flex-shrink und flex-basis verwenden oder die Kurzschreibweise flex: 1;. Tue ich letzeres, nimmt die Sidebar sofort die gewünschte Breite von 300px ein.

    Hallo Sempervivum, vielen Dank für deinen Tipp. Dann hab ich es doch noch nicht verstanden, ich glaubte, wenn ich dem .content ein flex: 1; gebe und der navi eine feste breite, dann nimmt der content automatisch den Rest zu 300px ein:-(

    also letztendlich möchte ich ein responsives Webdesign, was so aussieht:-( also eigentlich was ganz schlichtes.

    Herzlcihe Grüße Beatrix

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden