Von Bootstrap zu Flexbox 2.0

Emess · 10. Januar 2024

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.

m.scatello · 10. Januar 2024

Wenn man jetzt noch auf deiner Seite scrollen könnte ...

Sieh dir doch mit der Entwicklerkonsole des Browsers an, welche CSS-Eigenschaften dort gesetzt werden

Sempervivum · 10. Januar 2024

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.

Emess · 10. Januar 2024

Zitat von Sempervivum

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?

Sempervivum · 10. Januar 2024

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:

Code

<body>
    <header>
        <nav class="navigation">

            <!-- Logo -->
            <div class="logo">
                <!-- <h1>LOGO</h1> -->
                <img class="navigation-logo" src="images/logo.png" alt="Logo" width="50" height="auto">
            </div>
            
            <!-- Navigation -->
            <ul class="menu-list">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
                <li><a href="#">Link5</a></li>
            </ul>

            <div class="humbarger">
                <div class="bar"></div>
                <div class="bar2 bar"></div>
                <div class="bar"></div>
            </div>
        </nav>
    </header>
    <div class="bild">
        <img src="images/theke2.jpg">
    </div>



    <section id="welcome">

Alles anzeigen

Und jetzt den Header sticky und das Bild fixed positionieren.

Emess · 10. Januar 2024

Erstmal vielen Dank. Das seh ich mir Morgen genauer an.

Emess · 11. Januar 2024

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

m.scatello · 11. Januar 2024

Bei dem Link bekomme ich

Seite wurde nicht gefunden

Sempervivum · 11. Januar 2024

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.

Sempervivum · 11. Januar 2024

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.

Emess · 11. Januar 2024

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

CSS

header{
  position: sticky;
}

header .navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* position: sticky; */
  min-height: 12vh;
  min-width: 100%;
  z-index: 10;
  background-image: url(/images/bg_wood.jpg);
  /* background: #0f1423; */
  border-bottom: 2px solid #0c2d48;
}

Alles anzeigen

also vielleicht sprechen wir auch aneinander vorbei?

Sempervivum · 11. Januar 2024

Ich vergaß zu erwähnen, dass position:sticky nur greift, wenn man auch top angibt:

Code

header {
    position: sticky;
    top: 0;
}

Emess · 11. Januar 2024

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

Sempervivum · 11. Januar 2024

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.

Sempervivum · 11. Januar 2024

Mit Logo sieht es dann so aus:

pasted-from-clipboard.png

Emess · 11. Januar 2024

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

Sempervivum · 11. Januar 2024

Dir fehlt noch ein wichtiges Meta-Tag:

Code

<meta name="viewport" content="width=device-width, initial-scale=1" />

Sonst macht der Browser auf dem Handy aus deinem Layout was er will.

Emess · 11. Januar 2024

Oh man! Wie peinlich

Emess · 11. Januar 2024

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

JavaScript

<script>
        const
            menu = document.querySelector('ul.menu-list'),
            hamburger = document.querySelector('div.humbarger');
        hamburger.addEventListener('click', event => {
            // Ist das Menü offen? Das zeigt
            // die Klasse "open" an:
            if (menu.classList.contains('open')) {
                /* Menü verbergen indem wir
                die Höhe auf 0 setzen: */
                menu.style.height = '0';
            } else {
                /* Menü öffnen indem wir die Höhe
                entsprechend Inhalt setzen;
                scrollHeight liefert uns diese
                auch wenn das Menü geschlossen ist: */
                menu.style.height = menu.scrollHeight + 'px';
            }
            menu.classList.toggle('open');
        });
    </script>

Alles anzeigen

Sempervivum · 12. Januar 2024

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:

Code

    <script>
        const
            menu = document.querySelector('ul.menu-list'),
            hamburger = document.querySelector('div.humbarger');
        hamburger.addEventListener('click', event => {
            // Ist das MenÃ¼ offen? Das zeigt
            // die Klasse "open" an:
            if (menu.classList.contains('open')) {
                /* MenÃ¼ verbergen indem wir
                die HÃ¶he auf 0 setzen: */
                menu.style.height = '0';
            } else {
                /* MenÃ¼ Ã¶ffnen indem wir die HÃ¶he
                entsprechend Inhalt setzen;
                scrollHeight liefert uns diese
                auch wenn das MenÃ¼ geschlossen ist: */
                menu.style.height = menu.scrollHeight + 'px';
            }
            menu.classList.toggle('open');
        });
        menu.addEventListener('click', event => {
            menu.style.height = '0';
            menu.classList.remove('open');
        });
    </script>

Alles anzeigen

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

Von Bootstrap zu Flexbox 2.0

Jetzt mitmachen!

Teilen

Ähnliche Themen

[gelöst] Bild responive machen

Tags