Beiträge von Sempervivum

Sempervivum

Was fertige Lösungen betrifft, ein Tipp von meiner Seite: Wenn hier die Aktivitäten einzelner Forenmitglieder als anstößig empfunden werden, einfach den Melden-Button benutzen. Möglicher Weise steigen die Betreffenden dann gern in eine Diskussion mit der Moderation ein.

Sempervivum

Du brauchst bloß das div.bottom eine Stufe höher anzuordnen, dann bekommst Du automatisch was Du wünschst:

Code

    <footer>
        <div class="flex-items">
            <div>kontakt</div>
            <div>social</div>
            <div>hours</div>
        </div>
        <div class="bottom">unterer Teil</div>
    </footer>

Sempervivum

Finde ich vollkommen OK, wie Du das vor hast. Statt der Tabelle mit den Öffnungszeiten kannst Du auch ein Grid verwenden, dann würde das HTML wesentlich schlanker.

Sempervivum

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.

Sempervivum

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.

Sempervivum

Mit Logo sieht es dann so aus:

pasted-from-clipboard.png

Sempervivum

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

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

Code

header {
    position: sticky;
    top: 0;
}

Sempervivum

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.

Sempervivum

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

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.

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>.

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.

Sempervivum

Zitat

Verstehe also, dass "auf-zoomen" an anderer Stelle - mit meinem Ansatz - nicht möglich ist.

Meinst Du mit Hover? Das ist allerdings problematisch. Wenn Du etwas anderes meinst, könnte gelten "geht nicht, gibt's nicht" und ich würde gern gucken ob es so auch möglich ist.

Sempervivum

Versuche dieses, so explodiert das Bild von der Mitte aus und verschwindet, wenn man drauf klickt:

HTML

<!DOCTYPE html>
<html>
<style>
    html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
        position: relative;
    }

    img.small {
        display: block;
        width: 200px;
        height: auto;
        transform: translate(0, 0);
    }

    figure.ovl {
        margin: 0;
        position: absolute;
        width: 0;
        height: 0;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all 1s linear;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    figure.ovl.large {
        position: absolute;
        width: 80%;
        height: 80%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    figure.ovl img {
        width: auto;
        height: 100%;
    }

    figure.ovl img.fitVertically {
        width: 100%;
        height: auto;
    }
</style>
</head>

<body>
    <img class="small" src="images/dia0.jpg">
    <img class="small" src="images/dia1.jpg">
    <img class="small" src="images/dia2.jpg">
    <figure class="ovl">
        <img>
    </figure>
    <script>
        const
            ovl = document.querySelector('figure.ovl'),
            largeImg = ovl.querySelector('img');
        // Eventlistener für Klick irgend wo auf der Seite registrieren
        window.addEventListener('click', event => {
            // Wurde innerhalb eines großes Bildes geklickt?
            if (event.target.matches('figure.ovl.large img')) {
                // Bild wieder klein machen indem wir die Klasse "large" löschen:
                ovl.classList.remove('large');
            } else {
                // Wurde auf ein kleines Bild geklick?
                if (event.target.matches('img.small')) {
                    // Seitenverhältnisse von Body und Bild ermitteln:
                    const
                        boxBody = document.querySelector('body').getBoundingClientRect(),
                        ratioBody = boxBody.width / boxBody.height,
                        boxImg = event.target.getBoundingClientRect(),
                        ratioImg = boxImg.width / boxImg.height;
                    // Bild entspr. Seitenverhältnis einpassen:
                    if (ratioImg > ratioBody) {
                        largeImg.classList.add('fitVertically');
                    }
                    // Bild in Overlay eintragen:
                    largeImg.src = event.target.src;
                    // Bild groß machen indem wir die Klasse "large" zum Overlay hinzu fügen:
                    ovl.classList.add('large');
                }
            }
        });
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

... hier eine einfache Lösung mit Javascript und Klick. Das ist noch stark verbesserungsfähig, denn so verschwindet das Bild an seiner ursprünglichen Position und die anderen verschieben sich.

HTML

<!DOCTYPE html>
<html>
<style>
    html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
        position: relative;
    }

    img {
        display: block;
        width: 200px;
        height: auto;
        transform: translate(0, 0);
    }

    img.large {
        position: absolute;
        width: 80%;
        height: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>

<body>
    <img src="images/dia0.jpg">
    <img src="images/dia1.jpg">
    <img src="images/dia2.jpg">
    <script>
        // Eventlistener für Klick irgend wo auf der Seite registrieren
        window.addEventListener('click', event => {
            // Gibt es ein großes Bild und wurde außerhalb geklickt?
            if (document.querySelector('img.large') && !event.target.matches('img.large')) {
                // Bild wieder klein machen indem wir die Klasse "large" löschen:
                const
                    img = document.querySelector('img.large');
                img.classList.remove('large');

            } else {
                // Wurde auf ein kleines Bild geklick?
                if (event.target.matches('img:not(.large)')) {
                    // Bild groß machen indem wir die Klasse "large" hinzu fügen:
                    const
                        img = event.target;
                    img.classList.add('large');
                }
            }
        });
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Zitat

es könnte nach "außerhalb des Bildes geklickt wird, z. B." noch etwas fehlen. Oder war das so beabsichtigt?

Nein, war so beabsichtigt. Ich hätte auch schreiben können:

Zitat

bis z. B. ein Close-Button gedrückt wird oder außerhalb des Bildes geklickt wird.

Ich zeige dir später, wie das geht mit dem Klick-Event.

Sempervivum

Das Geflacker wundert mich nicht, es ist so zu erklären:

Wenn das Bild vergrößert wird, bewegt es sich auch in die Mitte und dann liegt die Maus nicht mehr drauf --> :hover trifft nicht mehr zu und das Bild wird wieder kleiner usw.

Ein typisches Problem bei Hover-Effekten. Es gibt noch einen anderen Nachteil beim Hover: Heute ist die Mehrzahl der Benutzer mit Touch-Geräten unterwegs und dabei gibt es kein Hover. Daher empfehle ich, statt des :hover in CSS das Klick-Event in Javascript zu verwenden. Dann wird das Bild stabil an seiner Position stehen bleiben bis ein Close-Button gedrückt wird oder außerhalb des Bildes geklickt wird, z. B.

Sempervivum

Ein Bild kannst Du so zentrieren:

Code

        body, html {
            height: 100%;
        }

        body {
            position: relative;
        }

        .myzoomimg img{
            transition: 1s;
        }
        .myzoomimg img:hover{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: auto;
        }

Alles anzeigen

Ungetestet, aber so habe ich es schon häufig gemacht.

Dies ist zunächst mal eine sehr einfache Lösung. Wenn Du erreichen möchtest, dass das Bild von der alten, kleinen Positon ausgehend an die neue, vergrößerte, explodiert, wird es ein wenig komplizierter.

Sempervivum

Wenn ich mein JS und CSS in den Codepen aus deinem Eingangsposting übernehme, funktioniert alles:

Responsive navigation bar with logo

...

codepen.io

Wenn bei dir nicht, dann poste die URL des Pen, keinen Screenshot.

Sempervivum

Den schließenden </body> hatte ich nur mit dazu genommen um deutlich zu machen wo das Skript hin gehört.

Das ist jetzt erst Mal nur ein Screenshot. Funktionierts denn?

Beiträge von Sempervivum

Guten Rat zu einem Footer

Guten Rat zu einem Footer

Guten Rat zu einem Footer

Von Bootstrap zu Flexbox 2.0

Von Bootstrap zu Flexbox 2.0

Von Bootstrap zu Flexbox 2.0

Von Bootstrap zu Flexbox 2.0

Von Bootstrap zu Flexbox 2.0

Von Bootstrap zu Flexbox 2.0

Von Bootstrap zu Flexbox 2.0

Von Bootstrap zu Flexbox 2.0

Von Bootstrap zu Flexbox 2.0

CSS: Bilddatei bei hover mittig zentrieren (mittig Gerät)

CSS: Bilddatei bei hover mittig zentrieren (mittig Gerät)

CSS: Bilddatei bei hover mittig zentrieren (mittig Gerät)

CSS: Bilddatei bei hover mittig zentrieren (mittig Gerät)

CSS: Bilddatei bei hover mittig zentrieren (mittig Gerät)

CSS: Bilddatei bei hover mittig zentrieren (mittig Gerät)

Nochmal Navigation. Nach Mobilansicht sind die Links weg

Nochmal Navigation. Nach Mobilansicht sind die Links weg