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