> @@einsiedler > > > ~~~ CSS > > body { > > max-width: 85%; > > } > > ~~~ > > Warum verschenkst du 15% der Viewportbreite? Möchte es Blog-ähnlich haben und ein wenig Leerraum ist doch immer schön, oder? > > ~~~ CSS,bad > > ## Hier pinne ich meine "Seitenübersicht" an > > ~~~ > > Das `##` in CSS keinen Kommentar einleitet, weißt du? Verdorri noch eins **ja** , sollte NUR für euch Leser eine Kommentierung von mir sein die zu meinen Fragenkatalog gehören... > > > ~~~ CSS,bad > > #global-nav { > > grid-area: aside-banner; > > grid-row-start: global-navigations-start; > > } > > ~~~ > > Wozu das denn? Du hast mit `grid-template-areas` benannte Bereiche festgelegt. Mit `grid-area` ordnest zu Elementen Bereiche zu. Warum hantierst du da noch mit `grid-row-start`? Schlicht und einfach: Möchte das das dieser Bereich WEITER OBEN anfängt obwohl es zum aside-banner gehört. Der aside Banner beinhaltet: Den SEITENNamen, den Scroll to top Button > > > ~~~ CSS,bad > > #aside-banner { > > grid-area: aside-banner; > > grid-row-start: global-navigations-start; > > } > > ~~~ > > Dito. Und das Element mit der ID „aside-banner“ soll das Element mit der ID „global-nav“ überdecken? Du hast sie ja in dieselbe Grid-Zelle gepackt. > > Hast du überhaupt ein Element mit der ID „aside-banner“? JUP ~~~ CSS body { display: grid; grid-template-areas: "content-header content-header " "global-navigations global-navigations " "main aside-banner " "footer footer "; grid-template-columns: 1fr auto; grid-auto-rows: max-content; margin-inline: auto; max-width: 85%; margin-top: 0.7rem; } ~~~ ODER meinst du damit das : ~~~ CSS #aside-banner { grid-area: aside-banner; [ ... ] } ~~~ das DIESES fehlt und angeführt werden muss... > > > > ~~~ CSS,bad > > #global-navigations { > > grid-area: global-navigations; > > } > > ~~~ > > Ein Element „global-nav“ zu nennen und ein anderes „global-navigations“, ist wohl auch sehr wenig klug. DOCH, sind zwei unterschiedliche Dinge, derjenige der sich mein Lifebeispiel NIEMALS angeguckt hat, der weiß es auch NICHT. „global-nav“ == meine HAUPTNAVIGATION > > > > ~~~CSS > > #scroll-button-area { > > grid-area: aside-banner; > > grid-row-start: global-navigations-start; > > grid-template-rows: max-content; > > } > > ~~~ > > > > Die mir unverständlichen Fragen überspringe ich mal. DIE ist mir jedoch am wichtigsten das ich weiterkomme, verdorrie: ~~~ CSS body { display: grid; grid-template-areas: "content-header content-header " "global-navigations global-navigations " "main aside-banner " "footer footer " / [global-nav-start] 12em [global-nav-end]; margin-inline: auto; grid-template-columns: 1fr auto; grid-auto-rows: max-content; max-width: 85%; margin-top: 0.7rem; } #global-navigations { grid-area: global-navigations; grid-column-end: global-nav; } #global-nav { grid-area: global-navigations / global-nav; grid-row-start: global-navigations-start; direction: rtl; z-index:1000; position: relative; height: fit-content; text-align: center; } ~~~ WAS PASSIERT DABEI WOHL, oder auch NICHT! Darum frag ich auch hier nach. Am äußersten rechten Rand möchte ich in diesem Bereich von *global-navigations* meine Hauptnavigation stehen haben also mein Hamburger Button. Bei dem was ich oben angeführt habe zerschießt ALLES KOMPLETT. WARUM? Tipp: NIEMALS mein Lifebeispiel angucken > > > e) **details und summary Menü** > > > > Wegen den screenreader bedenken: > > > > Wenn man es trotzalledem so machen möchte: > > > > Was wäre wenn man ZUSÄTZLICH allem ein nötiges ARIA-Elemente mitgibt (für die screenreader) > > > > Also bei **details & summary**, wenn **details** geöffnet ist, nun zusätzlich ein aria-expandet="true" mitgibt. > > > > WÜRDE DAS das Problem eventuell mindern und so funktionieren? > > Nein. `details` ist schon interaktiv; Screenreader sollten damit klarkommen und das richtig ansagen. > > Das ändert nichts daran, dass eine Navigation kein Detail ist, also nicht in ein `details`-Element gehört. GUT, bestätigt mich doch die Java-script Variante von dem hier: Navigation/Flyout-Menü : [https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#cite_note-6](https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#cite_note-6) zu verwenden. O.K. Meine neue LIFE-Version: Stand 26-03 [LIFE Beispiel bei Bplaced](http://misanthrop.bplaced.net/test/open-public__july24/testseite_26-03-2025_B.html) > Jolan tru JUP, ja die Romulaner.

> @@einsiedler > > > ~~~ CSS > > body { > > max-width: 85%; > > } > > ~~~ > > Warum verschenkst du 15% der Viewportbreite? Möchte es Blog-ähnlich haben und ein wenig Leerraum ist doch immer schön, oder? > > ~~~ CSS,bad > > ## Hier pinne ich meine "Seitenübersicht" an > > ~~~ > > Das `##` in CSS keinen Kommentar einleitet, weißt du? Verdorri noch eins **ja** , sollte NUR für euch Leser eine Kommentierung von mir sein die zu meinen Fragenkatalog gehören... > > > ~~~ CSS,bad > > #global-nav { > > grid-area: aside-banner; > > grid-row-start: global-navigations-start; > > } > > ~~~ > > Wozu das denn? Du hast mit `grid-template-areas` benannte Bereiche festgelegt. Mit `grid-area` ordnest zu Elementen Bereiche zu. Warum hantierst du da noch mit `grid-row-start`? Schlicht und einfach: Möchte das das dieser Bereich WEITER OBEN anfängt obwohl es zum aside-banner gehört. Der aside Banner beinhaltet: Den SEITENNamen, den Scroll to top Button > > > ~~~ CSS,bad > > #aside-banner { > > grid-area: aside-banner; > > grid-row-start: global-navigations-start; > > } > > ~~~ > > Dito. Und das Element mit der ID „aside-banner“ soll das Element mit der ID „global-nav“ überdecken? Du hast sie ja in dieselbe Grid-Zelle gepackt. > > Hast du überhaupt ein Element mit der ID „aside-banner“? JUP ~~~ CSS body { display: grid; grid-template-areas: "content-header content-header " "global-navigations global-navigations " "main aside-banner " "footer footer "; grid-template-columns: 1fr auto; grid-auto-rows: max-content; margin-inline: auto; max-width: 85%; margin-top: 0.7rem; } ~~~ ODER meinst du damit das : ~~~ CSS #aside-banner { grid-area: aside-banner; [ ... ] } ~~~ das DIESES fehlt und angeführt werden muss... > > > > ~~~ CSS,bad > > #global-navigations { > > grid-area: global-navigations; > > } > > ~~~ > > Ein Element „global-nav“ zu nennen und ein anderes „global-navigations“, ist wohl auch sehr wenig klug. DOCH, sind zwei unterschiedliche Dinge, derjenige der sich mein Lifebeispiel NIEMALS angeguckt hat, der weiß es auch NICHT. „global-nav“ == meine HAUPTNAVIGATION > > > > ~~~CSS > > #scroll-button-area { > > grid-area: aside-banner; > > grid-row-start: global-navigations-start; > > grid-template-rows: max-content; > > } > > ~~~ > > > > Die mir unverständlichen Fragen überspringe ich mal. DIE ist mir jedoch am wichtigsten das ich weiterkomme, verdorrie: ~~~ CSS body { display: grid; grid-template-areas: "content-header content-header " "global-navigations global-navigations " "main aside-banner " "footer footer " / [global-nav-start] 12em [global-nav-end]; margin-inline: auto; grid-template-columns: 1fr auto; grid-auto-rows: max-content; max-width: 85%; margin-top: 0.7rem; } #global-navigations { grid-area: global-navigations; grid-column-end: global-nav; } #global-nav { grid-area: global-navigations / global-nav; grid-row-start: global-navigations-start; direction: rtl; z-index:1000; position: relative; height: fit-content; text-align: center; } ~~~ WAS PASSIERT DABEI WOHL, oder auch NICHT! Darum frag ich auch hier nach. Am äußersten rechten Rand möchte ich in diesem Bereich von *global-navigations* meine Hauptnavigation stehen haben also mein Hamburger Button. Bei dem was ich oben angeführt habe zerschießt ALLES KOMPLETT. WARUM? Tipp: NIEMALS mein Lifebeispiel angucken > > > e) **details und summary Menü** > > > > Wegen den screenreader bedenken: > > > > Wenn man es trotzalledem so machen möchte: > > > > Was wäre wenn man ZUSÄTZLICH allem ein nötiges ARIA-Elemente mitgibt (für die screenreader) > > > > Also bei **details & summary**, wenn **details** geöffnet ist, nun zusätzlich ein aria-expandet="true" mitgibt. > > > > WÜRDE DAS das Problem eventuell mindern und so funktionieren? > > Nein. `details` ist schon interaktiv; Screenreader sollten damit klarkommen und das richtig ansagen. > > Das ändert nichts daran, dass eine Navigation kein Detail ist, also nicht in ein `details`-Element gehört. GUT, bestätigt mich doch die Java-script Variante von dem hier: Navigation/Flyout-Menü : [https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#cite_note-6](https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#cite_note-6) zu verwenden. O.K. Meine neues LIFE-Version: Stand 26-03 [LIFE Beispiel bei Bplaced](http://misanthrop.bplaced.net/test/open-public__july24/testseite_26-03-2025_B.html) > Jolan tru JUP, ja die Romulaner.

> @@einsiedler > > > ~~~ CSS > > body { > > max-width: 85%; > > } > > ~~~ > > Warum verschenkst du 15% der Viewportbreite? Möchte es Blog-ähnlich haben und ein wenig Leerraum ist doch immer schön, oder? > > ~~~ CSS,bad > > ## Hier pinne ich meine "Seitenübersicht" an > > ~~~ > > Das `##` in CSS keinen Kommentar einleitet, weißt du? Verdorri noch eins **ja** , sollte NUR für euch Leser eine Kommentierung von mir sein die zu meinen Fragenkatalog gehören... > > > ~~~ CSS,bad > > #global-nav { > > grid-area: aside-banner; > > grid-row-start: global-navigations-start; > > } > > ~~~ > > Wozu das denn? Du hast mit `grid-template-areas` benannte Bereiche festgelegt. Mit `grid-area` ordnest zu Elementen Bereiche zu. Warum hantierst du da noch mit `grid-row-start`? Schlicht und einfach: Möchte das das dieser Bereich WEITER OBEN anfängt obwohl es zum aside-banner gehört. Der aside Banner beinhaltet: Den SEITENNamen, den Scroll to top Button > > > ~~~ CSS,bad > > #aside-banner { > > grid-area: aside-banner; > > grid-row-start: global-navigations-start; > > } > > ~~~ > > Dito. Und das Element mit der ID „aside-banner“ soll das Element mit der ID „global-nav“ überdecken? Du hast sie ja in dieselbe Grid-Zelle gepackt. > > Hast du überhaupt ein Element mit der ID „aside-banner“? JUP ~~~ CSS body { display: grid; grid-template-areas: "content-header content-header " "global-navigations global-navigations " "main aside-banner " "footer footer "; grid-template-columns: 1fr auto; grid-auto-rows: max-content; margin-inline: auto; max-width: 85%; margin-top: 0.7rem; } ~~~ ODER meinst du damit das : ~~~ CSS #aside-banner { grid-area: aside-banner; [ ... ] } ~~~ das DIESES fehlt und angeführt werden muss... > > > > ~~~ CSS,bad > > #global-navigations { > > grid-area: global-navigations; > > } > > ~~~ > > Ein Element „global-nav“ zu nennen und ein anderes „global-navigations“, ist wohl auch sehr wenig klug. DOCH, sind zwei unterschiedliche Dinge, derjenige der sich mein Lifebeispiel NIEMALS angeguckt hat, der weiß es auch NICHT. „global-nav“ == meine HAUPTNAVIGATION > > > > ~~~CSS > > #scroll-button-area { > > grid-area: aside-banner; > > grid-row-start: global-navigations-start; > > grid-template-rows: max-content; > > } > > ~~~ > > > > Die mir unverständlichen Fragen überspringe ich mal. DIE ist mir jedoch am wichtigsten das ich weiterkomme, verdorrie: ~~~ CSS body { display: grid; grid-template-areas: "content-header content-header " "global-navigations global-navigations " "main aside-banner " "footer footer " / [global-nav-start] 12em [global-nav-end]; margin-inline: auto; grid-template-columns: 1fr auto; grid-auto-rows: max-content; max-width: 85%; margin-top: 0.7rem; } #global-navigations { grid-area: global-navigations; grid-column-end: global-nav; } #global-nav { grid-area: global-navigations / global-nav; grid-row-start: global-navigations-start; direction: rtl; z-index:1000; position: relative; height: fit-content; text-align: center; } ~~~ WAS PASSIERT DABEI WOHL, oder auch NICHT! Darum frag ich auch hier nach. Am äußersten rechten Rand möchte ich in diesem Bereich von *global-navigations* meine Hauptnavigation stehen haben also mein Hamburger Button. Bei dem was ich oben angeführt habe zerschießt ALLES KOMPLETT. WARUM? Tipp: NIEMALS mein Lifebeispiel angucken > > > e) **details und summary Menü** > > > > Wegen den screenreader bedenken: > > > > Wenn man es trotzalledem so machen möchte: > > > > Was wäre wenn man ZUSÄTZLICH allem ein nötiges ARIA-Elemente mitgibt (für die screenreader) > > > > Also bei **details & summary**, wenn **details** geöffnet ist, nun zusätzlich ein aria-expandet="true" mitgibt. > > > > WÜRDE DAS das Problem eventuell mindern und so funktionieren? > > Nein. `details` ist schon interaktiv; Screenreader sollten damit klarkommen und das richtig ansagen. > > Das ändert nichts daran, dass eine Navigation kein Detail ist, also nicht in ein `details`-Element gehört. GUT, bestätigt mich doch die Java-script Variante von dem hier: Navigation/Flyout-Menü : [https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#cite_note-6](https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#cite_note-6) zu verwenden. O.K. > Jolan tru JUP, ja die Romulaner.