CSS: Warum überlappen die Menübuttons wenn zu schmal?

[wakko0815]

Hallo,
Ich habe ein HTML/CSS Gerüst das sowohl auf dem Desktop als auch auf dem Smartphone benutzbar sein soll:
JSFiddle Gerüst mit überlappenden Buttons wenn zu schmal skaliert...
Aber ich habe da zwei Probleme die ich nicht ohne Fragen gelöst kriege:
1. Wenn ich die Vorschau unten rechts sehr schmal skaliere wird der "Contact" Button erwartungsgemäß nach unten verschoben, aber irgendwie nicht weit genug. Der überlappt mit den da drüber. Ich habe jede Menge Permutationen von Positionierung und Paddings etc. durchgetestet, aber das kriege ich nicht weg...
2. Gibt es eine Möglichkeit, den eigentlichen Content Text je nach AspectRatio des Browsers unterschiedlich breit zu machen? Also dass bei 4:3 AR der Text nur 60% breit ist und zentriert, aber bei 3:4 hat er die volle Breite? Also gibt es in CSS eine Weiche für die AspectRatio?
Zur Not auch in Javascript. In Code ein paar Bedingungen abtesten fällt mir 1000x leichter als mit CSS rumzuspielen...

Edit: Meh... vielleicht zu früh gefragt. Ich lese mich mal weiter in den CSS aspect-ratio Parameter ein. Das hat mich gerade so geärgert, dass ich ausnahmesweise mal zuerst hier geschrieben habe anstatt weiter zu googlen...

 

[sverebom]

Links sind inline-Objekte. Die kümmern sich nicht um dein vertikales Padding, wenn sie umbrochen werden. Du musst die Links als Block-Objekte definieren, hier allerdings als Inline-Blöcke, um nicht das Inline-Verhalten zu verlieren. Außerdem solltest du den Links dann noch einen Margin-Bottom geben, damit sie im Zeilenumbruch nicht Kante auf Kante sitzen.

a:link {
display: inline-block;
margin-bottom: wasimmerdubrauchst;
}

Das ist die einfachste Lösung für deinen Anwendungsfall.

 

[Bagbag]

position: center ist kein gültiges CSS.

Ich habe dir dein nav mal mit Flexbox gebaut. Ich schätze das mit dem Aspect-Ratio willst du für Responsiveness für Mobile Geräte? Das macht man i.d.R. mit Media Queries auf die Viewport-Breite.

https://jsfiddle.net/cadst39f/

Und wenn du die Dinge nicht selbst umsetzen willst (dein Text liest sich so, als hättest du keine Lust auf CSS), dann nimm doch etwas fertiges und sei es nur für das Layout:

https://getbootstrap.com/docs/5.0/layout/containers/
https://getbootstrap.com/docs/5.0/layout/grid/
https://getbootstrap.com/docs/5.0/components/navbar/

https://bulma.io/documentation/layout/container/
https://bulma.io/documentation/columns/
https://bulma.io/documentation/components/navbar/

 

[wakko0815]

@sverebom Danke. Das hat geholfen. Die Buttons haben jetzt auch bei sehr schmalem Viewport vertikal genug Abstand.
Mit dem hier habe ich die AspectRatio abhängige Breite besiegt. Allerdings rutscht der Text jetzt in die Menübuttons... Und ich verstehe nicht warum der Text nicht zentriert ist wenn die AspectRatio bei x>y ist.
Warum ist der da nach links aligned?

@Bagbag Danke für die Antwort. Ich schaue mal ob ich Deinen Vorschlag weiterverwenden kann. Und korrekt, es geht um ein responsive Layout. Die Media Queries habe ich bereits ergänzt.
Ich schätze mein Layout Problem kommt daher, dass ich in meinem Beispiel ganz oben ein background-image habe das immer komplett angezeigt werden soll und Probleme hatte die Menübuttons immer an der unteren Kante des Background Images auszurichten (Deswegen der große leere Block oben). Vermutlich habe ich mir damit eine Falle gestellt. Mal kuckn ob ich das Bild in Dein Beispiel eingebaut kriege.

Vermutlich lese ich mich doch mal in Bootstrap ein. Ich hatte bisher immer den Anspruch an mich selbst, dass ich das ohne Framework hinkriege, aber bei unterschiedlichen Anzeigegeräten kommt man da wohl nicht mehr drum rum.

 

[Bagbag]

Dann stell hier nochmal ein komplettes Beispiel rein (mit Bild) und mit kompletter Anforderung.

Doch, man kommt auch um Frameworks herum, Es ist halt nur mehr Arbeit.

 

[wakko0815]

Danke! Funktioniert jetzt.
display: flex; und flex-wrap waren mir neu.
Irgendwie finde ich Layouts in CSS schwieriger zu bauen als Qt UIs...

 

[sverebom]

Ich wollte dich gestern nicht damit überfordern, aber wenn du nicht gerade für uralte Browser entwickelst, solltest du dich mit Flexbox vertraut machen. Es macht viele Dinge, die man sonst nur mit teils krudem und spätestens im responsiven Verhalten fehleranfälligem CSS bewerkstelligen kann, so viel einfacher. Und wenn du dann im nächsten Schritt über media queries für verschiedene Viewports von Mobile bis Desktop entwickelst, wirst du Grids lieben lernen (nachdem zunächst durch ein Tal der Tränen mit unzähligen Viewport-spezifischen Overrides für deinen konventionellen CSS-Code marschieren wirst). Vielleicht fängst du gleich damit an, so lange deine Projekte noch übersichtlich sind.