Layout-Problem: Border soll float respektieren

[Rolf B]

Hallo,

mein innerer Monk braucht Hilfe. Meine Homepage borchmann-one.de war immer eine Baustelle und ich wollte jetzt ein bisschen Inhalt draufstellen.

Zum schnellen Experimentieren mit den Farben habe ich oben rechts ein kleines Fieldset hingesetzt, um das Farbschema umschalten zu können.

• Das Fieldset soll oben rechts sein
• Die Höhe der Überschrift soll auto sein, vom Fieldset unabhängig
• Der Text der Überschrift soll sich im freien Raum links vom Schemaselektor zentrieren
• Der Strich UNTER der Überschrift soll den freien Raum ausfüllen. Aber nicht mehr.
• Der Text im Main-Bereich soll um das Fieldset herumfließen
• Die Seite soll mindestens so hoch wie der Bildschirm sein

Ich habe das fast hinbekommen. Aber an einem Detail des Farbschema-Fieldsets frisst sich mein innerer Monk gerade fest.

Zuerst hatte ich ein Grid für's Gesamtseitenlayout, mit h1 und Farbschema im Header. Der Header war ein Grid-Item. Dann wurde die Breite der h1 um die Breite des Schemaselektors reduziert, prima. Aber dann war entweder die Überschrift so hoch wie das Farbschema-Fieldset ODER der Text im Mainbereich scherte sich nicht um das Fieldset. Den Header auf display:contents zu setzen und dann h1+Fieldset direkt als Grid Items zu verwenden führte zum gleichen Problem. Das ist in index-alt.html zu sehen und ich habe es aufgegeben, das mit dem Grid lösen zu wollen.

Jetzt sind h1, Farbschema und Text alle im <main> Element (in index.html) und das Body-Grid ist zum Einspalter degeneriert - aber der blöde Strich unter der Überschrift geht immer noch durch's Fieldset durch. Er soll aber vorher enden. Bin ich nur zu doof, oder ist das mit CSS, ohne Script, nicht lösbar?

Mir ist klar, dass es diverse Workarounds dafür geben kann. Ich könnte das Fieldset einen Tick nach rechts schieben und man sieht den Strich nicht mehr 'rausgucken. Aber Monk würde wissen, dass er da ist, und durchdrehen. Ganz abgesehen davon, dass links vom Fieldset kein Abstand zum Strich ist… Monk geht es jetzt prinzipiell um ein Layout, wo oben rechts eine solche Box ist, für welchen Zweck auch immer, sie soll ständig sichtbar sein und sie soll die genannten Bedingungen erfüllen. Den Fall, dass generell zu wenig Platz ist für h1 und Fieldset, habe ich erstmal zurückgestellt, da würde man wohl doch auf ein Popup umschalten müssen oder das Layout modifizieren. Momentan blende ich dann das Fieldset weg.

Rolf Adrian

[Gunnar Bittersmann]

@@Rolf B

Jetzt sind h1, Farbschema und Text alle im <main> Element (in index.html) und das Body-Grid ist zum Einspalter degeneriert - aber der blöde Strich unter der Überschrift geht immer noch durch's Fieldset durch. Er soll aber vorher enden.

Du meinst, er sollte nicht rechts von dem Fieldset zu sehen sein? Ich musste erstmal suchen, was du gemeint haben könntest.

Wenn dein Fieldset keinen margin haben soll, musst du den Browserdefault halt nullen.

Aber ganz ehrlich: das Fieldset sollte IMHO gar nicht da sein. Müllt nur sie Seite voll; kann weg.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

aber das Fieldset sollte…

nur zum schnellen Probieren sein, ohne DevTools zu brauchen.

Ich sag ja, mein innerer Monk. Eigentlich ist die Sache im konkreten Anwendungsfall keine Sekunde des Nachdenkens wert, aber in einem akuten Anfall von YAGNI-Ignoranz wollte ich das ergründen, für den Fall, ein solches Layout mal in anderer und sinnvoller Konstellation zu brauchen.

Wenn dein Fieldset keinen margin haben soll, musst du den Browserdefault halt nullen.

Mein Fieldset soll keinen Margin haben? Das ist nicht mein Anliegen. Ich spreche davon, dass die h1 Box sich nicht in den Bereich des Fieldsets hinein erstrecken soll. Derzeit tut sie das, und wenn ich dem Fieldset keine explizite background-color gegeben hätte, dann würde das viel deutlicher auffallen.

• Sei X = Darstellungsbreite (min(100vw - Margins, 60em)).
• Die Größe der blauen Box ergibt sich aus ihrem Inhalt (width:fit-content).
• Die Breite der gelben Box soll (X - Breite(blau) - Gap) sein. Und zwar responsiv, ohne magic number für Breite(blau).
• Die Breite der roten Box soll grundsätzlich X sein, im Überlappungsbereich soll ihr Inhalt aber der blauen Box Platz machen, die blaue Box soll sich dort also wie ein Float verhalten.

Frage ist: Geht das mit CSS oder ist das außerhalb der Möglichkeiten?

Rolf

[Gunnar Bittersmann]

@@Rolf B

• Sei X = Darstellungsbreite (min(100vw - Margins, 60em)).
• Die Größe der blauen Box ergibt sich aus ihrem Inhalt (width:fit-content).
• Die Breite der gelben Box soll (X - Breite(blau) - Gap) sein. Und zwar responsiv, ohne magic number für Breite(blau).
• Die Breite der roten Box soll grundsätzlich X sein, im Überlappungsbereich soll ihr Inhalt aber der blauen Box Platz machen, die blaue Box soll sich dort also wie ein Float verhalten.

Frage ist: Geht das mit CSS

Geht. display: flow-root FTW. ☞ Codepen

oder ist das außerhalb der Möglichkeiten?

Außerhalb wessen Möglichkeiten? 😏

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

okay, flow-root ist noch nicht wirklich in meinen Werkzeugkasten eingegangen. Ich bin aber auch nicht auf die Idee gekommen, dass das h1 sich schmaler macht, wenn es einen eigenen Blockformatierungskontext bekommt, ich hätte gedacht, dass es dann das fieldset verdrängt.

D.h. ich hätte statt display:flow-root auch andere, ältere Werkzeuge zur Schaffung eines BFC nehmen können, wie overflow:hidden, contain:layout, oder ganz frech: column-count:1 😉. Wenn sie die IE-Altlast zoom nicht umgewidmet hätten, dann sollte das auch einen BFC schaffen, aber das tut es nicht mehr.

Danke!

Rolf

[Gunnar Bittersmann]

@@Rolf B

D.h. ich hätte statt display:flow-root auch andere, ältere Werkzeuge zur Schaffung eines BFC nehmen können, wie overflow:hidden, contain:layout, oder ganz frech: column-count:1 😉.

Oder display: grid. Oder display: flex.

(Wobei flex unangenehme Nebenwirkungen hat, wenn der Inhalt der Überschrift Markup enthält. Fragen Sie Ihre Ärztin oder Apothekarin. Oder schauen Sie in den erweiterten Codepen.)

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

• Die Breite der gelben Box soll (X - Breite(blau) - Gap) sein. Und zwar responsiv, ohne magic number für Breite(blau).

Geht. display: flow-root FTW. ☞ Codepen

oder ist das außerhalb der Möglichkeiten?

Außerhalb wessen Möglichkeiten? 😏

Außerhalb meiner Möglichkeiten: Die Linie unter der Überschrift bis an den Bilderrahmen heranreichen zu lassen.

figure { margin-left: 0} ist wohl keine so gute Idee. Dass der Text der Überschrift bis an den Bilderrahmen rangehen kann, könnte man h1 { padding-right: 1rem} verhindern. Aber wie will man verhindern, dass der Fließtext bis an den Bilderrahmen rangehen kann?

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Aber ganz ehrlich: das Fieldset sollte IMHO gar nicht da sein. Müllt nur sie Seite voll; kann weg.

So wie auch kein Widget zur Änderung der Schriftgröße auf einer Webseite sein sollte.

Widgets auf Webseiten zur Einstellung von Hell- bzw. Dunkelmodus, Schriftgröße o.a. sind eher schädlich. Sie wecken falsche Erwartungshaltungen. Nutzer werden entwöhnt, die vorhandenen Einstellmöglichkeiten ihres Browsers/ihres OS zu nutzen. Bei Webseiten, die richtigerweise keine solchen Widgets draufhaben, denken sie dann womöglich: Oh wie blöd, hier kann ich nichts einstellen. Doch, kannst du!

🖖 Live long and prosper

[klawischnigg]

Hi there,

Nutzer werden entwöhnt, die vorhandenen Einstellmöglichkeiten ihres Browsers/ihres OS zu nutzen.

Genau. Es ist ja die ureigenste Aufgabe eines Webseitenbetreibers, die Besucher richtig zu erziehen. Was soll denn das?

Sorry Gunnar, da kann ich nicht mehr mit. Und da weiß ich mich auch in guter und zahlreicher Gesellschaft...

[Gunnar Bittersmann]

@@klawischnigg

Nutzer werden entwöhnt, die vorhandenen Einstellmöglichkeiten ihres Browsers/ihres OS zu nutzen.

Genau. Es ist ja die ureigenste Aufgabe eines Webseitenbetreibers, die Besucher richtig zu erziehen. Was soll denn das?

Genau. Es ist ja die ureigenste Aufgabe eines Webseitenbetreibers, Funktionalitäten, die das System (Browser bzw. OS) bereits zur Verfügung stellt, auf Webseiten nochmals zu duplizieren. Immer und immer wieder, auf jeder Webseite neu. Was soll denn das?

Es geht nicht um Erziehung. Es geht um Vernunft.

🖖 Live long and prosper

[klawischnigg]

Hi there,

Nutzer werden entwöhnt, die vorhandenen Einstellmöglichkeiten ihres Browsers/ihres OS zu nutzen.

Genau. Es ist ja die ureigenste Aufgabe eines Webseitenbetreibers, die Besucher richtig zu erziehen. Was soll denn das?

Genau. Es ist ja die ureigenste Aufgabe eines Webseitenbetreibers, Funktionalitäten, die das System (Browser bzw. OS) bereits zur Verfügung stellt, auf Webseiten nochmals zu duplizieren. Immer und immer wieder, auf jeder Webseite neu. Was soll denn das?

Es geht nicht um Erziehung. Es geht um Vernunft.

Ja, so kann man's auch umschreiben. Man will ja schliesslich immer nur das Beste. Damit kann man jede Erziehungsmaßnahme schön erklären und begründen.

Ausserdem ist das auch fachlich zumindest diskussionswürdig. Wer sagt Dir, daß das jeder Besucher über globale Browser-Einstellungen regeln will? Gut denkbar, daß man auf der einen Seite eher eine hellere und auf einer anderen Seite eher eine dunkle Darstellung bevorzugt.

Egal, ob das Widget auf Rolfs Seite nötig ist oder nicht, es ist einfach ein Angebot, und das letzte, was Rolf dabei vermutlich im Sinn hatte, war, damit irgendjemanden zu "entwöhnen"...

[Gunnar Bittersmann]

@@klawischnigg

Egal, ob das Widget auf Rolfs Seite nötig ist oder nicht, es ist einfach ein Angebot, und das letzte, was Rolf dabei vermutlich im Sinn hatte, war, damit irgendjemanden zu "entwöhnen"...

Das hat auch niemand behauptet, dass dies die Absicht war. Es ist eine negative Folge; darauf wollte ich hinweisen.

Abgesehen von der ebenfalls negativen Folge, dass da etwas auf der Seite ist, was vom Seiteninhalt ablenkt.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@klawischnigg

Ausserdem ist das auch fachlich zumindest diskussionswürdig. Wer sagt Dir, daß das jeder Besucher über globale Browser-Einstellungen regeln will? Gut denkbar, daß man auf der einen Seite eher eine hellere und auf einer anderen Seite eher eine dunkle Darstellung bevorzugt.

Wie gesagt, halte ich den Fall nicht für sehr relevant. Jedenfalls nicht relevant genug, um für alle Nutzer auf allen Webseiten solche Widgets bereitzustellen.

Die wenigen, die auf verschiedenen Webseiten mal hell, mal dunkel präferieren, stellen das halt über ihr System um. Gibt es überhaupt solche Nutzer? Hast du Studien dazu?

Aber mal angenommen, es gäbe sie. Dann sollten sie aber doch erwarten dürfen, eine Webseite beim erneuten Besuch wieder so vorzufinden wie beim vorigen. Das heißt, die Präferenz für hell oder dunkel muss in einem Cookie festgehalten werden. Und wenn man als Seitenbetreiber keinen Rechtstreit riskieren will, ob solch ein Cookie essentiell wäre, müsste man dafür die Erlaubnis des Nutzers einholen. Ein UX-Albtraum.

Wenn, dann gehört diese Funktion ins Browser-UI. Dann könnte der Browser die Präferenz auch für jede Website getrennt speichern, so wie er es für Zoomfaktor auch schon tut.

Ich bleib dabei: Auf Webseiten haben Hell/dunkel-Umschalter nichts zu suchen.

🖖 Live long and prosper