Min-width/ Ende der Breite beim Verkleinern des Browsers?

[franzsen]

Schönen Montag!
Brauche wieder einmal Eure Hilfe.
Auf der Startseite habe ich der linken Navigatorleiste eine Minimum-Breite gegeben. Trotzdem wird beim Verkleinern des browsers die Leiste verschmälert. Müßte nicht bei "min-width" die Breite an dieser Stelle enden? Webseite

[MrMurphy1]

Hallo

das kommt durch die Flexibilität vom Flexbox-Modell. Das kannst du mit flex-shrink beeinflussen.

und es wurden keine Probleme gefunden.

Ironie?

Gruss

MrMurphy

[franzsen]

und es wurden keine Probleme gefunden.

Ironie?

Wie meinst Du das? Hast Du den Code durch den Validator geschickt und dürfte das Ergebnis eigentlich nicht stimmen (nach dem Eindruck den Du von der Webseite hast)?

[Gunnar Bittersmann]

@@franzsen

Auf der Startseite habe ich der linken Navigatorleiste eine Minimum-Breite gegeben.

Ja, 10%.

Trotzdem wird beim Verkleinern des browsers die Leiste verschmälert.

Jetzt bist du überrascht, dass 10% bei schmalem Viewport weniger breit ist als 10% bei breitem Viewport?

% ist gut geeignet für width-Angaben; nicht so für min-width und max-width. Dafür bieten sich em und rem an.

LLAP 🖖

[franzsen]

Trotzdem wird beim Verkleinern des browsers die Leiste verschmälert.

Jetzt bist du überrascht, dass 10% bei schmalem Viewport weniger breit ist als 10% bei breitem Viewport?

% ist gut geeignet für width-Angaben; nicht so für min-width und max-width. Dafür bieten sich em und rem an.

Ach ja! Eigentlich müßte ich es wissen. Die Prozentangabe richtet sich bei den Containern im Verhältnis nach dem Viewport während der Text immer gleich lang bleibt. Ich muß daher der Seitenleiste eine feste Breite geben. Nun funktioniert es.

Eine Veränderung habe ich noch gemacht: Ich habe anfangs dem header ebenfalls flex zugewiesen um die Überschrift vertikal zentrieren zu können. Inzwischen habe ich wieder dazu gelernt und den Code durch "line-height" gekürzt.

[Gunnar Bittersmann]

@@franzsen

% ist gut geeignet für width-Angaben; nicht so für min-width und max-width. Dafür bieten sich em und rem an.

Ich muß daher der Seitenleiste eine feste Breite geben.

Nein, musst du nicht. Siehe das Darüberstehende.

Eine Veränderung habe ich noch gemacht: Ich habe anfangs dem header ebenfalls flex zugewiesen um die Überschrift vertikal zentrieren zu können. Inzwischen habe ich wieder dazu gelernt und den Code durch "line-height" gekürzt.

Von „dazugelernt“ würde ich da nicht sprechen. line-height sollte für nichts anderes verwendet werden als für den Zeilenabstand, der wirkt, wenn der Text denn mehrere Zeilen beansprucht. Es ist nicht empfehlenswert, einen viel zu großen Wert für line-height zur vertikalen Zentrierung zu missbrauchen. Wenn der Text mehrzeilig ist, versagt die Methode.

Und erzähle mir niemand, der Text wäre garantiert immer und ewig und überall einzeilig. Bei schmalen Viewport vielleicht schon nicht mehr. Außerdem haben Texte im Web die Eigenschaft, nicht von unbegrenzter Dauer zu sein, sondern geändert zu werden; auch übersetzt zu werden.

LLAP 🖖

[JürgenB]

Hallo Gunnar,

… Außerdem haben Texte im Web die Eigenschaft, nicht von unbegrenzter Dauer zu sein, …

schon eher von unbegrenzter Länge. :)

Gruß Jürgen

[marctrix]

Hej Gunnar,

Von „dazugelernt“ würde ich da nicht sprechen. line-height sollte für nichts anderes verwendet werden als für den Zeilenabstand, der wirkt, wenn der Text denn mehrere Zeilen beansprucht. Es ist nicht empfehlenswert, einen viel zu großen Wert für line-height zur vertikalen Zentrierung zu missbrauchen. Wenn der Text mehrzeilig ist, versagt die Methode.

Mache ich ständig, z. B. für "Senden"-Buttons...

Klappt prima!

Und erzähle mir niemand, der Text wäre garantiert immer und ewig und überall einzeilig.

Dann kann man immer noch anpassen - wenn man eine Website betreibt, hat man das meist auch selber in der Hand. Du verallgemeinerst immer so ;-)

Für konkrete Anwendungsfälle kann mal eine Methode besser oder einfach nur schneller sein, als eine andere und es macht durchaus sinn, möglichst viele zu kennen (am besten natürlich mit Vor- und Nachteilen)...

Marc

[Gunnar Bittersmann]

@@marctrix

Und erzähle mir niemand, der Text wäre garantiert immer und ewig und überall einzeilig.

Dann kann man immer noch anpassen

Wenn man dann noch anpassen muss, heißt das nichts weiter als dass man es zuerst falsch gemacht hat.

Man kann es auch gleich richtig machen. Ein Webdesigner sollte immer im Blick haben, dass Inhalte auf verschiedenen Geräten unterschiedlich dargestellt werden und das sich Inhalte auch ändern. Das sollte nicht dazu führen, dass das Layout zerbricht.

Für konkrete Anwendungsfälle kann mal eine Methode besser oder einfach nur schneller sein, als eine andere und es macht durchaus sinn, möglichst viele zu kennen (am besten natürlich mit Vor- und Nachteilen)...

Man muss seinen Kopf nicht mit unnützem Kram vollmüllen. Man muss nicht möglichst viele Methoden kenn, sondern die für den jeweiligen Anwendungszweck beste. Profi …

Wobei sich die beste Methode mit fortschreitender Technik auch ändern kann. Da muss man auf dem Laufenden bleiben. Für vertikale Zentrierung bietet sich Flexbox an.

LLAP 🖖

[franzsen]

% ist gut geeignet für width-Angaben; nicht so für min-width und max-width. Dafür bieten sich em und rem an.

Ich muß daher der Seitenleiste eine feste Breite geben.

Nein, musst du nicht. Siehe das Darüberstehende.

Also wäre in diesem Fall empfehlenswert mi-width mit em bzw. rem zu verwenden?

Eine Veränderung habe ich noch gemacht: Ich habe anfangs dem header ebenfalls flex zugewiesen um die Überschrift vertikal zentrieren zu können. Inzwischen habe ich wieder dazu gelernt und den Code durch "line-height" gekürzt.

Von „dazugelernt“ würde ich da nicht sprechen. line-height sollte für nichts anderes verwendet werden als für den Zeilenabstand, der wirkt, wenn der Text denn mehrere Zeilen beansprucht. Es ist nicht empfehlenswert, einen viel zu großen Wert für line-height zur vertikalen Zentrierung zu missbrauchen. Wenn der Text mehrzeilig ist, versagt die Methode.

Und welche Methode sollte dann angewendet werden? "Vertical-align" funktioniert auch nicht.

[Gunnar Bittersmann]

@@franzsen

Also wäre in diesem Fall empfehlenswert mi-width mit em bzw. rem zu verwenden?

Besonders empfehlenswert ohne Tippfehler.

Und welche Methode sollte dann angewendet werden? "Vertical-align" funktioniert auch nicht.

Die Frage hatte ich schon 3 Stunden bevor du sie gestellt hat beantwortet.

LLAP 🖖