Responsive Gestaltungsprobleme

[Sempervivum]

Ich habe das parallel mal überarbeitet, die vielen Divs durch semantische Tags ersetzt und es scrollt direkt nach unten, wenn man einen Menüpunkt anklickt:

    <!-- Preloader -->
    <div id="container_loader">
        <div id="loader"><span></span></div>
    </div>
    <header>
        <!-- Logo Section -->
        <img class="logo" src="images/logo-kienle.jpg" alt="Logo">
        <nav>
            <button data-target="content1" onclick="toggleContent(event, 'content1')">ÜBER MICH</button>
            <button data-target="content2" onclick="toggleContent(event, 'content2')">HÖREN</button>
            <button data-target="content3" onclick="toggleContent(event, 'content3')">KONTAKT</button>
            <button data-target="content4" onclick="toggleContent(event, 'content4')">IMPRESSUM</button>
        </nav>
    </header>
    <main>
        <section id="content1" class="content-box">
            <button class="close-btn" onclick="closeContent(event, 'content1')">X</button>
            <h2>ÜBER MICH</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero eget eleifend.
            </p>
        </section>
        <section id="content2" class="content-box">
            <button class="close-btn" onclick="closeContent(event, 'content2')">X</button>
            <h2>HÖREN</h2>
            <p>Content for Button 2</p>
        </section>
        <section id="content3" class="content-box">
            <button class="close-btn" onclick="closeContent(event, 'content3')">X</button>
            <h2>KONTAKT</h2>
            <form id="contact-form" action="send_email.php" method="post">
                <div class="inputs_container">
                    <input type="text" name="Name" placeholder="Name" required
                        title="Tragen Sie hier bitte Ihren korrekten Namen ein. Danke!">
                    <input type="email" name="Email" placeholder="E-Mail" required
                        pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
                        title="Tragen Sie hier bitte Ihre korrekte E-Mail ein. Danke!">
                    <input type="text" name="_gotcha" value="" style="display:none;">
                    <textarea class="nachricht" name="Ihre Nachricht" rows="5" placeholder="Ihre Nachricht..." required
                        title="Tragen Sie hier bitte Ihre Nachricht ein. Danke!"></textarea>
                    <div class="form-group checkbox-group checkbox-container">
                        <input type="checkbox" id="privacy" name="privacy" required>
                        <label for="privacy">Um mit mir in Kontakt zu treten, akzeptieren Sie bitte meine
                            Datenschutzerklärung, die Sie unter "IMPRESSUM" einsehen können! Ich stimme zu, dass
                            meine Angaben zur Kontaktaufnahme und für Rückfragen gespeichert werden. Die Zustimmung
                            zur Speicherung ist nach DSGVO zwingend!</label>
                    </div>
                    <div class="captcha">
                        <p>Lösen Sie diese einfache Rechenaufgabe: <span id="math-question"></span><input id="captcha"
                                type="text" required=""></p>
                    </div>
                    <button type="submit" id="submitButton">ABSENDEN</button>
                </div>
            </form>
        </section>
        <section id="content4" class="content-box">
            <button class="close-btn" onclick="closeContent(event, 'content4')">X</button>
            <h2>IMPRESSUM & DATENSCHUTZERKLÄRUNG</h2>
            <p>Durch einen einfachen Klick hier, werden die Informationen in einem neuen Fenster geöffnet!</p>
        </section>
    </main>
    <footer>
        &copy; <span id="year"></span> Daniel Kienle | Alle Rechte vorbehalten.
    </footer>
    <div class="cookie-popup-overlay" id="cookiePopup">
        <div class="cookie-popup">
            <p>Meine Website verwendet Cookies, um die beste Nutzererfahrung zu gewährleisten. Einige Cookies sind
                notwendig, um die grundlegenden Funktionen dieser Seite zu ermöglichen, während andere zur Analyse und
                Verbesserung der Seite beitragen. Sie können Ihre Auswahl anpassen oder alle Cookies akzeptieren.</p>
            <button id="accept-cookies"><b>Cookies akzeptieren</b></button>
            <button id="accept-necessary-cookies"><b>Notwendige Cookies akzeptieren</b></button>
            <button id="reject-cookies"><b>Cookies ablehnen</b></button>
            <p><a id="privacyLink">Datenschutz & Impressum</a></p>
        </div>
    </div>

 

[Sempervivum]

    <script>
        const delayLoader = 500;
        let hHeader, main;
        window.addEventListener('load', event => {
            const
                header = document.querySelector('header');
            main = document.querySelector('main');
            window.scrollTo(0, 0); // Nach oben scrollen, wenn Seite geladen wird
            hHeader = header.scrollHeight;
            header.style.flex = '0 0 ' + header.scrollHeight + 'px';
        });

        function toggleContent(event, id) {
            event.preventDefault();
            const contents = document.querySelectorAll('.content-box');
            const buttons = document.querySelectorAll('nav button');

            contents.forEach(content => {
                if (content.id !== id) {
                    content.classList.remove('show');
                } else {
                    content.classList.add('show');
                }
            });

            buttons.forEach(button => {
                if (button.dataset.target !== id) {
                    button.classList.remove('active');
                }
            });

            const activeContent = document.getElementById(id);
            const clickedButton = document.querySelector(`nav button[data-target="${id}"]`);

            if (activeContent && clickedButton) {
                window.scrollTo(0, Math.max(activeContent.scrollHeight, hHeader));
                clickedButton.classList.add('active');
            }
        }

        function closeContent(event, id) {
            event.stopPropagation();

            const content = document.getElementById(id);
            const button = document.querySelector(`nav button[data-target="${id}"]`);

            if (content && button) {
                content.classList.remove('show');
                button.classList.remove('active');
                window.scrollTo(0, 0);
            }
        }

        document.getElementById('year').textContent = new Date().getFullYear();

        // Preloader
        window.addEventListener('load', function () {
            setTimeout(function () {
                document.getElementById('container_loader').style.display = 'none';
                // document.querySelector('.content-wrapper').style.display = 'block';
                // document.body.style.overflowY = 'auto'; // Allow scrolling once content is visible
            }, delayLoader);
        });

        function acceptCookies() {
            localStorage.setItem("cookiesAccepted", "true", 30);
            document.getElementById("cookiePopup").style.display = "none";
        }

        function acceptNecessaryCookies() {
            localStorage.setItem("cookiesAccepted", "necessary", 30);
            document.getElementById("cookiePopup").style.display = "none";
        }

        function setCookie(name, value, days) {
            const d = new Date();
            d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
            const expires = "expires=" + d.toUTCString();
            document.cookie = name + "=" + value + ";" + expires + ";path=/";
        }

        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        window.addEventListener('load', event => {
            if (!localStorage.getItem("cookiesAccepted")) {
                document.getElementById("cookiePopup").style.display = "flex";
            } else {
                document.getElementById("cookiePopup").style.display = "none";
            }
        });

        document.getElementById("accept-cookies").onclick = acceptCookies;
        document.getElementById("accept-necessary-cookies").onclick = acceptNecessaryCookies;
        document.getElementById("reject-cookies").onclick = acceptNecessaryCookies;

        document.getElementById("privacyLink").onclick = function () {
            window.open('datenschutz.html', '_blank', 'width=900,height=900');
        }

        document.getElementById("content4").onclick = function () {
            window.open('datenschutz.html', '_blank', 'width=900,height=900');
        }

        // Captcha setup
        const mathQuestion = document.getElementById("math-question");
        const captchaInput = document.getElementById("captcha");

        function generateCaptcha() {
            const num1 = Math.floor(Math.random() * 10);
            const num2 = Math.floor(Math.random() * 10);
            mathQuestion.textContent = `${num1} + ${num2}`;
            return num1 + num2;
        }

        let correctCaptcha = generateCaptcha();

        document.getElementById("contact-form").addEventListener("submit", function (event) {
            event.preventDefault();

            if (parseInt(captchaInput.value) !== correctCaptcha) {
                alert("Bitte lösen Sie die Rechenaufgabe korrekt.");
                return;
            }

            if (!document.getElementById("privacy").checked) {
                alert("Bitte akzeptieren Sie die Datenschutzerklärung.");
                return;
            }

            alert("Formular erfolgreich abgesendet.");
            correctCaptcha = generateCaptcha();
            captchaInput.value = "";
            this.reset();
        });

    </script>

 

[Sempervivum]

CSS hier, war zu groß zum Posten:

https://codepen.io/Sempervivum/pen/ZEdEOmQ

 

[DanielCGN]

Hallo,
vielen Dank für Deine Mühe!

Die aktiven content-boxen positionieren sich jetzt oberhalb des Footers, bei wenig Inhalt, eher etwas ungünstig. Ich dachte eher, dass sie sich unterhalb des Menüs öffnen und dort auch verbleiben.

Logo und Menü befinden sich jetzt ganz oben, dachte eher daran, dass sie mittig verbleiben.

Die Hover-Effekte, beim Mouseover, sind recht langsam, höheres Tempo könnte das "klicken" vereinfachen.

Ich habe Deinen Vorschlag bisher nur bei CodePen gesehen. Müsste ich noch im Browser ansehen, inklusive Logo.

 

[DanielCGN]

Ich muss mich korrigieren! Sorry! Selbsverständlich sind Logo und Menü mittig. Habe ich erst jetzt im Browser, inkl. Logo, sehen können - super!

Bis auf die tiefe Position der jeweiligen content-box und der langsame Hover-Effekt bei den Menü-Buttons, wirklich toll geworden! Danke!

 

[DanielCGN]

.... ach noch etwas: Im Kontaktformular lässt sich die check-box (Datenschutzerklärung) nicht bestätigen.

 

[Sempervivum]

Die Hover-Effekte, beim Mouseover, sind recht langsam, höheres Tempo könnte das "klicken" vereinfachen.

Das liegt an folgendem: Am Anfang hatte ich auch Probleme, dass das dauernd zuckte und um es besser beobachten zu können, hatte ich sie stark verlangsamt. Du kannst das leicht rückgängig machen, wenn Du nicht weiß, wo, frage.

Das mit der Checkbox sehe ich mir gleich an ...

 

[Sempervivum]

... die Checkbox funktioniert bei mir einwandfrei. Im Opera, welchen Browser benutzt Du?

 

[DanielCGN]

Ich Dummerle... ich habe in der "checkbox-container input" nur ein Häkchensymbol einfügen müssen... jetzt wird die Check-Box bestätigt.

 

[DanielCGN]

Ich nutze Firefox, aber das Häkchen konnte ich selber einfügen. Es wird auch angezeigt.

 

[DanielCGN]

Ja, das wäre nett, wenn Du sagen könntest, wo man das Tempo des Hover-Effekts erhöhen kann. Und dann noch die Frage, mit der Position der jeweiligen Content-Box. Ich finde die Boxen wirken besser, wenn sie unterhalb des Menüs aufploppen?! Was meinst Du?

 

[DanielCGN]

Ui.. ich habe gerade das Browserfenster aufgezogen, mit der Maus... ähm.. das Logo nimmt fast den ganzen Monitor ein.

 

[DanielCGN]

Hier...

 

[Sempervivum]

Erst mal die Hover-Effekte: Meinst Du das, wo die Buttons von unten her aufgefüllt werden, wie ein Glas, was man voll gießt? Das ist hier ab Zeile 315:

        nav button::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #FFDC29;
            transition: top 5s ease;
            z-index: 0;
        }

        nav button:hover::before {
            top: 0;
        }

Mit dem "5s" kannst Du die Dauer einstellen.

 

[Sempervivum]

Das mit dem übergroßen Logo kann ich leider nicht reproduzieren. (Mein Monitor ist 1920px breit).

Dass die Content-Elemente so tief liegen hat folgenden Grund: Ich habe den Header am Anfang, wenn alles geschlossen ist, so eingerichtet, dass er vertikal und horizontal mittig ist. Dadurch entstehen dann die vertikalen leeren Räume. Wenn dann ein Element aufgeht, habe ich das beibehalten, dadurch entsteht der Abstand zwischen Content und Menü. Das kann ich sicher ändern, ich werde, so bald wie möglich, daran gehen.

 

[Sempervivum]

So vielleicht?

 

[DanielCGN]

Oh, danke! Geneau!

 

[Sempervivum]

Das war jetzt erst Mal auf die Schnelle mit dem Seiteninspektor gemacht. CSS und JS kommt später.

 

[DanielCGN]

Danke, für Deine Hilfe, Deine Unterstützung, Dein Interesse!
Das ist jetzt schon das zweite Mal! Danke Dir!

 

[msi]

@DanielCGN
Kurzer Hinweis: man kann seine Beiträge bearbeiten, muss also nicht innerhalb von 10 Minuten 5 Postings verfassen.