Von Bootstrap zu Flexbox 2.0

  • In meinem neuen Studienprojekt geht es eine Bootstrapseite mit Flexbox zu gestalten.

    Da finde ich bei dieser Seite speziell die Startseite sehr interessant. Doch nach dem Bild im Header habe ich das Problem des unteren Teil des Header (also das bisschen Weiss) sollte ja die Seite füllen und soll dann über das Bild scrollbar sein, Das Logo kann man vorerst vernachlässigen dai ch die schon in eine Flexbox integrieren konnte.

    Doch ich diesen Srolleffect im Header bekomme ich einfach nicht hin trotz intensivem googeln und Youtuben.


    Da würde ein Keiner Hinweis oder Anfang nicht schaden.


    Soweit bin ich bis jetzt.

  • Die Seite lässt sich nicht scrollen weil für html overflow: hidden; gesetzt ist. Ein Überbleibsel aus einem Onepager?

    BTW, es fehlt das öffnende <html>.

    position: fixed; verwendest Du ja schon für die Nav. Mach dich auch mit postition: sticky; vertraut. Den Header sticky machen und das Bild heraus ziehen und darunter anordnen. Dann das Bild fixed positionieren. Für den Content darunter wirst Du ein margin-top brauchen, damit er sich nicht mit dem Bild überlappt. Und dann das Bild mit einem negativen z-index versehen, so dass es vom Content überdeckt wird.

  • Die Seite lässt sich nicht scrollen weil für html overflow: hidden; gesetzt ist. Ein Überbleibsel aus einem Onepager?

    BTW, es fehlt das öffnende <html>.

    Hätte nichts gegen einen Onepager in diesem Stadium ist doch noch alles möglich. Oder?

    Zitat

    Mach dich auch mit postition: sticky; vertraut. Den Header sticky machen und das Bild heraus ziehen und darunter anordnen. Dann das Bild fixed positionieren.

    hast du da eine Seite wie ich den Header sticky mache und meinem Speziellen Problem das Bild unter den Nav herausziehen kann?

  • Die gängigen Kandidaten:

    CSS Layout - The position Property
    W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript,…
    www.w3schools.com

    An dem Beispiel für "sticky" kannst Du sehr gut erkennen, wie es funktioniert.

    position: sticky; | CSS-Tricks
    Better position: sticky; support is on the horizon. WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016.
    css-tricks.com

    Ich habe aber auf die Schnelle keine Quelle gefunden, die einen ganz wichtigen Aspekt heraus stellt: Durch "sticky" Positionierung wird ein Element nicht aus dem Fluss genommen, d. h. die Elemente danach verschwinden nicht wie bei "fixed" darunter. Sondern erst beim Scrollen.


    Ich meinte, dass Du das Bild aus dem Header löschst und außerhalb darunter anordnest, also so:

    Und jetzt den Header sticky und das Bild fixed positionieren.

  • Habe mal die position geädert das geht auch. Aber weil es seltsamerweise noch nichts zu scrollen gab habe ich mal "Gude" (welcome) verlinkt.

    aber das läuft grundsätzlich was schief. Das hat mich wirklich überrascht und ich steh vor einem Rätsel?

    miflo.de

  • Was das Scrollen betrifft, hatte ich in #4 geschrieben, dass es an dem overflow:hidden; liegt:

    Code
    html {
        height: 100vh;
        /* overflow-y: hidden; */
    }

    Wenn ich das auskommentiere ist die Scrollbar sofort da.

  • PS: Jetzt dem Bild ein position:fixed geben und einen negativen z-index, damit es beim Scrollen vom Container #welcome überdeckt wird:

    Code
    .bild {
        z-index: -1;
        position: fixed;
    }

    Aber damit das Bild vor dem Scrollen sichtbar ist, musst Du dem #welcome noch ein margin-top geben:

    Code
    #welcome {
        height: 100vh;
        background-color: #b1d4e0;
        margin-top: 360px;
    }

    Dann funktioniert das schon in etwa. Fehlt nur noch das position:sticky für den Header.

  • Habe es je wie du. Und es scrollt auch so wie es soll. Aber jetzt scrollt auch die Navbar nach oben.

    also vielleicht sprechen wir auch aneinander vorbei?

  • Damit du meine Idee besser verstehst stell ich mal den Murx hoch den ich bisher Bootstrap abgerungen habe online.

    Also so soll die Startseite aussehen bevor man scrollt oder einen Linkt betätigt.

    Was ich deiner bisherigen hilfe entnehme ist; dass entweder der Header in der Höhe begrenzt werden oder die welcom-section?

    Schau die mal meine Vorstellung an. Das Logo Bierdeckel aber ich schon als Flexbox integriert


    also Schau mal. Die Idee

  • Wie Du jetzt miflo.de hast, ist genau so wie ich es verstanden hatte und wie ich es auch auf dieser Musterseite gesehen hatte, die Du ganz am Anfang gepostet hattest: #welcome überdeckt das Bild beim Scrollen aber verschwindet hinter der Navigation mit dem Logo links. Da fehlt jetzt nur noch das Logo über #welcome. Es sei denn, das Verhalten beim Scrollen, das Du dir vorstellt, ist ein anderes.

  • wäre es nicht besser den Bierdeckel in ein eigenes Flexbox- Div zustecken um die Große und die position auch in der Mobilansicht zu fixieren?

    Un wie bekomme ich den Hintergrund für die Welcome-section auch in der Mobill Ansicht passend

    Habe alles nochmal hochgeladen


    Miflo.de


    schenke.jpeg

  • Werde mir das alles mal Morgen genauer ansehen um alle zusammenhänge zu verstehen.

    BTW ( ^^ ) mir ist da noch was an deinem tollen Script aufgefallen. Nämlich wenn ich das burgemenue einen Link anklicke bleibt das menue offen und collabiert nicht zurück. kannst das ja mal testen wenn du willst?

    Hier noch mal das script

  • Das Skript macht nur das was hinein programmiert ist und an diesen Fall hatte ich nicht gedacht. Lässt sich aber sehr leicht hinzu fügen:

    In der Console getestet auf miflo.de und hat dort funktioniert.

Jetzt mitmachen!

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