Responsive Gestaltungsprobleme

[DanielCGN]

Hallo zusammen,

ich benötige einmal mehr Unterstützung.

Ich habe, nach Anleitung, eine kleine Website gestaltet, die responsiv nicht das tut, was wünschenswert wäre.

Nach Klicken auf einen Menüpunkt, öffnet sich eine "content-box". Je nach Menüwahl, öffnen sich die content1 bis content4.

Wenn ich das Browserfenster verkleinere und noch weiter verkleinere (Schritt für Schritt), verbleibt bleibt die jeweilig aktive content-box in der Breite. Nach unten verkleinert sich die content-box und die Inhalte werden somit kaum lesbar. Die Inhalte innerhalb einer content-box verschieben sich teilweise und geraten leicht durcheinander. Innerhalb einer content-box, bei umfangreichen Inhalten, wird automatisch ein Scrollbalken eingeblendet. Das scheint wenig hilfreich.

Vielen Dank vor ab, für die Hilfestellung
Hier ist die Seite, das Logo liegt auf meinem Rechner, daher nicht sichtbar:

https://codepen.io/CGNDaniel/pen/jOjNyXP?editors=1000

Gruß,
Daniel

 

[Oliver77]

Hallo bei

.container {
    height:100vh /* rausnehmen */
}

Dann Scrollt nur die ganze Seite

 

[DanielCGN]

Hallo Oliver,
danke, das sieht schon besser aus. Leider verschiebt sich die gesamte Seite nach oben. Sie sollte eigentlich in der Mitte bleiben.

 

[Oliver77]

Hi probiere mal:

.content-wrapper {
    display: flex;
    align-items: center;
}

 

[DanielCGN]

Hi,
leider verbleiben die Pageelemente oben. Logo und Menü sollten in der Mitte sitzen, also oben, links, rechts und unten der gleiche Abstand.

 

[Oliver77]

Geht das?

            if (activeContent && clickedButton) {
                clickedButton.classList.add('active');
                activeContent.style.display = 'flex'; // statt display:block
                setTimeout(() => {
                    activeContent.classList.add('show');
                }, 50);
            }
        }

Warum trennst du nicht CSS,HTML und JS bei CodePen?

 

[DanielCGN]

Leider nicht. Und die Überschriften in den content-boxen stehen nicht oben, sondern links neben dem Inhaltstext. Hier habe ich einen Screenshot, wie Logo und Menü angeordnet werden sollen:

 

[Oliver77]

Hmm hab nochmal im CodePen das geändert zusätzlich zu dem davor,
also bei mir funzt es jetzt.

   window.addEventListener('load', function() {
            setTimeout(function() {
                document.getElementById('container_loader').style.display = 'none';
                document.querySelector('.content-wrapper').style.display = 'flex' // statt display:none;
                document.body.style.overflowY = 'auto'; // Allow scrolling once content is visible
            }, 3000); // 3 seconds delay
        });

Aber es hüpft jetzt in der Position.

.content-wrapper {
height:100%; /*zusätzlich */
}

Es hüpft wegen einem SetTimeout denke ich mal.

 

[Sempervivum]

@DanielCGN Ich habe da auch mal einen Blick drauf geworden und folgendes ist mir unklar:
Du schreibst in #5:

Logo und Menü sollten in der Mitte sitzen, also oben, links, rechts und unten der gleiche Abstand.

und der Screenshot in #7 veranschaulicht das.
Was soll dann aber mit den Content-Boxen passieren? Unter Logo und Menü ist ja wenig Platz und der Benutzer wäre gezwungen, nach unten zu scrollen.

 

[DanielCGN]

Genau! Das wäre am sinnvollsten. Menü und Logo verbleiben mittig auf der Seite und die jeweils aktivierte content-box (content1 bis content4) erscheinen dann unterhalb des Menüs. Dadurch müsste man nach unten scrollen.

 

[Sempervivum]

Das lässt sich bestimmt machen. Ich bin im Moment mit etwas anderem beschäftigt, arbeite später etwas aus. Oder jemand anders nimmt sich rasch dieser Sache an.

 

[DanielCGN]

Super! Klasse! Ich denke, dass es für mein "Problemchen" sicher eine Lösung gibt.

 

[Oliver77]

Hast du mal das probiert, was ich im Post #8 geschrieben habe?

 

[DanielCGN]

Hey Oliver,
klar! Aber bei mir hüpft es auch.

 

[Oliver77]

Schmeiß mal die SetTimeouts raus, dann hüpft es nicht mehr!
Oder setzte sie auf Null!

 

[Oliver77]

Hmm dann ist alles mittig, du willst aber das Menü oben fixiert haben oder?

 

[Oliver77]

Habs mal in einem eigenen Pen gemacht:
https://codepen.io/Oliver7777/pen/mdZdPZw

Das Logo macht noch Probleme.
Weiß es aber nicht, ob du das so haben willst.

 

[DanielCGN]

Hey Oliver,
hatte ja in meinen vorherigen Posts geschrieben, dass Logo und darunter Menü mittig stehen sollen (siehe dazu auch meinen Screenshot #7). Und bleiben sollen. Auch wenn unter dem Menü eine content-box erscheint. Da hatten wir ja dann einen Scrollbalken, damit man auch alle Inhalte sehen kann.

 

[DanielCGN]

... Ohje... wenn ich jetzt das Browserfenster verkleinere verschiebt sich der Inhalt der jeweiligen content-box. Der Inhalt verlässt die Box. Ohje

 

[DanielCGN]

https://codepen.io/CGNDaniel/pen/jOjNyXP?editors=1000

das ist jetzt die aktuelle Version. Dort sieht man, wie sich die Seite verhält... *seufz*