25-03-29 **Mein Fragenkatalog** A) GRID Ich möchte fragen wie es sich RICHTIG verhält: ~~~ 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; } ~~~ Nun, wie ich es nenne, "pinne" ich die entsprechenden *aeras* nun an: ~~~ CSS #content-header { grid-area: content-header; } ## ## Hier pinne ich meine "Seitenübersicht" an <details id="content-nav-box" class="nav-box" tabindex="-1"> <summary>Inhalts-Übersicht</summary> </details> #content-nav-box { grid-area: global-navigations; [ ... ] } ## ## Hier pinne ich mein Hauptmenü an ## #global-nav { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## ## #aside-banner { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } #global-navigations { grid-area: global-navigations; [ ... ] } ## Ist es NÖTIG dies zusätzlich zu definieren? ## ## Mein scroll-to-top-Button #scroll-button-area { grid-area: aside-banner; grid-row-start: global-navigations-start; grid-template-rows: max-content; [ ... ] } [ ... ] ~~~ a) Ist es NÖTIG mein #site-banner & #navigations ZUSÄTZLICH so zu definieren oder ist es überflussig? b) muss man überall display:grid; dazuschreiben? c) Kann man es so machen das jedes Element "angepinnt" wird? d) Wenn ich nun mein Hauptmenü **#global-nav {}** NICHT der aera *aside-banner* anknüpfen möchte sondern an *global-navigations* anknüpfen möchte DANN nimmt mein **#global-nav {}** logischerweise die GANZE Zeile von *global-navigations* an DAS MÖCHTE ich NICHT Nun meine Frage d)-a) WIE kann man es erreichern das mein **#global-nav {}** Bereich meinetwegen 12rem hat und zudem am rechten Rand angeordnet wird? Dieser Bereich also ein SEPERATER EIGENSTÄNDIGER Bereich wird? Was bei mir bisher NICHT geklappt hat ist folgendes: ~~~ 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; } ~~~ Wie kann ich das nun machen? --- 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? Mal dumm nachgefragt. ---- f) TAB-SKIP Wäre es NOTWENDIG beispielsweise die Seitenüberschrift oder den SKIP-to-TOP Button mit den TAB anzusteuern? Ist das sinnvoll und notwendig? Freue mich auf eure Antworten Gruß der einsiedelnde

25-03-29 **Mein Fragenkatalog** A) GRID Ich möchte fragen wie es sich RICHTIG verhält: ~~~ 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; } ~~~ Nun, wie ich es nenne, "pinne" ich die entsprechenden *aeras* nun an: ~~~ CSS #content-header { grid-area: content-header; } ## ## Hier pinne ich meine "Seitenübersicht" an <details id="content-nav-box" class="nav-box" tabindex="-1"> <summary>Inhalts-Übersicht</summary> </details> #content-nav-box { grid-area: global-navigations; [ ... ] } ## ## Hier pinne ich mein Hauptmenü an ## #global-nav { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## ## #site-banner { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } #global-navigations { grid-area: global-navigations; [ ... ] } ## Ist es NÖTIG dies zusätzlich zu definieren? ## ## Mein scroll-to-top-Button #scroll-button-area { grid-area: aside-banner; grid-row-start: global-navigations-start; grid-template-rows: max-content; [ ... ] } [ ... ] ~~~ a) Ist es NÖTIG mein #site-banner & #navigations ZUSÄTZLICH so zu definieren oder ist es überflussig? b) muss man überall display:grid; dazuschreiben? c) Kann man es so machen das jedes Element "angepinnt" wird? d) Wenn ich nun mein Hauptmenü **#global-nav {}** NICHT der aera *aside-banner* anknüpfen möchte sondern an *global-navigations* anknüpfen möchte DANN nimmt mein **#global-nav {}** logischerweise die GANZE Zeile von *global-navigations* an DAS MÖCHTE ich NICHT Nun meine Frage d)-a) WIE kann man es erreichern das mein **#global-nav {}** Bereich meinetwegen 12rem hat und zudem am rechten Rand angeordnet wird? Dieser Bereich also ein SEPERATER EIGENSTÄNDIGER Bereich wird? Was bei mir bisher NICHT geklappt hat ist folgendes: ~~~ 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; } ~~~ Wie kann ich das nun machen? --- 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? Mal dumm nachgefragt. ---- f) TAB-SKIP Wäre es NOTWENDIG beispielsweise die Seitenüberschrift oder den SKIP-to-TOP Button mit den TAB anzusteuern? Ist das sinnvoll und notwendig? Freue mich auf eure Antworten Gruß der einsiedelnde

25-03-29 **Mein Fragenkatalog** A) GRID Ich möchte fragen wie es sich RICHTIG verhält: ~~~ 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; } ~~~ Nun, wie ich es nenne, "pinne" ich die entsprechenden *aeras* nun an: ~~~ CSS #content-header { grid-area: content-header; } ## ## Hier pinne ich meine "Seitenübersicht" an <details id="content-nav-box" class="nav-box" tabindex="-1"> <summary>Inhalts-Übersicht</summary> </details> #content-nav-box { grid-area: global-navigations; [ ... ] } ## ## Hier pinne ich mein Hauptmenü an ## #global-nav { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## ## #site-banner { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } #navigations { grid-area: navigations; [ ... ] } ## Ist es NÖTIG dies zusätzlich zu definieren? ## ## Mein scroll-to-top-Button #scroll-button-area { grid-area: aside-banner; grid-row-start: global-navigations-start; grid-template-rows: max-content; [ ... ] } [ ... ] ~~~ a) Ist es NÖTIG mein #site-banner & #navigations ZUSÄTZLICH so zu definieren oder ist es überflussig? b) muss man überall display:grid; dazuschreiben? c) Kann man es so machen das jedes Element "angepinnt" wird? d) Wenn ich nun mein Hauptmenü **#global-nav {}** NICHT der aera *aside-banner* anknüpfen möchte sondern an *global-navigations* anknüpfen möchte DANN nimmt mein **#global-nav {}** logischerweise die GANZE Zeile von *global-navigations* an DAS MÖCHTE ich NICHT Nun meine Frage d)-a) WIE kann man es erreichern das mein **#global-nav {}** Bereich meinetwegen 12rem hat und zudem am rechten Rand angeordnet wird? Dieser Bereich also ein SEPERATER EIGENSTÄNDIGER Bereich wird? Was bei mir bisher NICHT geklappt hat ist folgendes: ~~~ 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; } ~~~ Wie kann ich das nun machen? --- 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? Mal dumm nachgefragt. ---- f) TAB-SKIP Wäre es NOTWENDIG beispielsweise die Seitenüberschrift oder den SKIP-to-TOP Button mit den TAB anzusteuern? Ist das sinnvoll und notwendig? Freue mich auf eure Antworten Gruß der einsiedelnde

25-03-29 **Mein Fragenkatalog** A) GRID Ich möchte fragen wie es sich RICHTIG verhält: ~~~ 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; } ~~~ Nun, wie ich es nenne, "pinne" ich die entsprechenden *aeras* nun an: ~~~ CSS #content-header { grid-area: content-header; } ## ## Hier pinne ich meine "Seitenübersicht" an <details id="content-nav-box" class="nav-box" tabindex="-1"> <summary>Inhalts-Übersicht</summary> </details> #content-nav-box { grid-area: global-navigations; [ ... ] } ## ## Hier pinne ich mein Hauptmenü an ## #global-nav { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## ## #site-banner { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## Ist es NÖTIG dies zusätzlich zu definieren? ## ## Mein scroll-to-top-Button #scroll-button-area { grid-area: aside-banner; grid-row-start: global-navigations-start; grid-template-rows: max-content; [ ... ] } [ ... ] ~~~ a) Ist es NÖTIG mein #site-banner ZUSÄTZLICH so zu definieren oder ist es überflussig? b) muss man überall display:grid; dazuschreiben? c) Kann man es so machen das jedes Element "angepinnt" wird? d) Wenn ich nun mein Hauptmenü **#global-nav {}** NICHT der aera *aside-banner* anknüpfen möchte sondern an *global-navigations* anknüpfen möchte DANN nimmt mein **#global-nav {}** logischerweise die GANZE Zeile von *global-navigations* an DAS MÖCHTE ich NICHT Nun meine Frage d)-a) WIE kann man es erreichern das mein **#global-nav {}** Bereich meinetwegen 12rem hat und zudem am rechten Rand angeordnet wird? Dieser Bereich also ein SEPERATER EIGENSTÄNDIGER Bereich wird? Was bei mir bisher NICHT geklappt hat ist folgendes: ~~~ 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; } ~~~ Wie kann ich das nun machen? --- 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? Mal dumm nachgefragt. ---- f) TAB-SKIP Wäre es NOTWENDIG beispielsweise die Seitenüberschrift oder den SKIP-to-TOP Button mit den TAB anzusteuern? Ist das sinnvoll und notwendig? Freue mich auf eure Antworten Gruß der einsiedelnde

25-03-29 **Mein Fragenkatalog** A) GRID Ich möchte fragen wie es sich RICHTIG verhält: ~~~ 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; } ~~~ Nun, wie ich es nenne, "pinne" ich die entsprechenden *aeras* nun an: ~~~ CSS #content-header { grid-area: content-header; } ## ## Hier pinne ich meine "Seitenübersicht" an <details id="content-nav-box" class="nav-box" tabindex="-1"> <summary>Inhalts-Übersicht</summary> </details> #content-nav-box { grid-area: global-navigations; [ ... ] } ## ## Hier pinne ich mein Hauptmenü an ## #global-nav { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## ## #site-banner { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## Ist es NÖTIG dies zusätzlich zu definieren? ## ## Mein scroll-to-top-Button #scroll-button-area { grid-area: aside-banner; grid-row-start: global-navigations-start; grid-template-rows: max-content; [ ... ] } [ ... ] ~~~ a) Ist es NÖTIG mein #site-banner ZUSÄTZLICH so zu definieren oder ist es überflussig? b) muss man überall display:grid; dazuschreiben? c) Kann man es so machen das jedes Element "angepinnt" wird? d) Wenn ich nun mein Hauptmenü **#global-nav {}** NICHT der aera *aside-banner* anknüpfen möchte sondern an *global-navigations* anknüpfen möchte DANN nimmt mein **#global-nav {}** logischerweise die GANZE Zeile von *global-navigations* an DAS MÖCHTE ich NICHT Nun meine Frage d)-a) WIE kann man es erreichern das mein **#global-nav {}** Bereich meinetwegen 12rem hat und zudem am rechten Rand angeordnet wird? Dieser Bereich also ein SEPERATER EIGENSTÄNDIGER Bereich wird? Was bei mir bisher NICHT geklappt hat ist folgendes: ~~~ 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; } ~~~ Wie kann ich das nun machen? --- 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? Mal dumm nachgefragt. ---- f) TAB-SKIP Wäre es NOTWENDIG beispielsweise die Überschrift oder den SKIP-to-TOP Button mit den TAB anzusteuern? Ist das sinnvoll und notwendig? Freue mich auf eure Antworten Gruß der einsiedelnde

25-03-29 **Mein Fragenkatalog** A) GRID Ich möchte fragen wie es sich RICHTIG verhält: ~~~ 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; } ~~~ Nun, wie ich es nenne, "pinne" ich die entsprechenden *aeras* nun an: ~~~ CSS #content-header { grid-area: content-header; } ## ## Hier pinne ich meine "Seitenübersicht" an <details id="content-nav-box" class="nav-box" tabindex="-1"> <summary>Inhalts-Übersicht</summary> </details> #content-nav-box { grid-area: global-navigations; [ ... ] } ## ## Hier pinne ich mein Hauptmenü an ## #global-nav { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## ## #site-banner { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## Ist es NÖTIG dies zusätzlich zu definieren? ## ## Mein scroll-to-top-Button #scroll-button-area { grid-area: aside-banner; grid-row-start: global-navigations-start; grid-template-rows: max-content; [ ... ] } [ ... ] ~~~ a) Ist es NÖTIG mein #site-banner ZUSÄTZLICH so zu definieren oder ist es überflussig? b) muss man überall display:grid; dazuschreiben? c) Kann man es so machen das jedes Element "angepinnt" wird? d) Wenn ich nun mein Hauptmenü **#global-nav {}** NICHT der aera *aside-banner* anknüpfen möchte sondern an *global-navigations* anknüpfen möchte DANN nimmt mein **#global-nav {}** logischerweise die GANZE Zeile von *global-navigations* an DAS MÖCHTE ich NICHT Nun meine Frage d)-a) WIE kann man es erreichern das mein **#global-nav {}** Bereich meinetwegen 12rem hat? Dieser Bereich also ein SEPERATER EIGENSTÄNDIGER Bereich wird? Was bei mir bisher NICHT geklappt hat ist folgendes: ~~~ 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; } ~~~ Wie kann ich das nun machen? --- 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? Mal dumm nachgefragt. ---- f) TAB-SKIP Wäre es NOTWENDIG beispielsweise die Überschrift oder den SKIP-to-TOP Button mit den TAB anzusteuern? Ist das sinnvoll und notwendig? Freue mich auf eure Antworten Gruß der einsiedelnde

25-03-29 **Mein Fragenkatalog** A) GRID Ich möchte fragen wie es sich RICHTIG verhält: ~~~ 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; } ~~~ Nun, wie ich es nenne, "pinne" ich die entsprechenden *aeras* nun an: ~~~ CSS #content-header { grid-area: content-header; } ## ## Hier pinne ich meine "Seitenübersicht" an <details id="content-nav-box" class="nav-box" tabindex="-1"> <summary>Inhalts-Übersicht</summary> </details> #content-nav-box { grid-area: global-navigations; [ ... ] } ## ## Hier pinne ich mein Hauptmenü an ## #global-nav { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## ## #site-banner { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## Ist es NÖTIG dies zusätzlich zu definieren? ## ## Mein scroll-to-top-Button #scroll-button-area { grid-area: aside-banner; grid-row-start: global-navigations-start; grid-template-rows: max-content; [ ... ] } [ ... ] ~~~ a) Ist es NÖTIG mein #site-banner ZUSÄTZLICH so zu definieren oder ist es überflussig? b) muss man überall display:grid; dazuschreiben? c) Kann man es so machen das jedes Element "angepinnt" wird? d) Wenn ich nun mein Hauptmenü **#global-nav {}** NICHT der aera *aside-baner* anknüpfen möchte sondern an *global-navigations* anknüpfen möchte DANN nimmt mein **#global-nav {}** logischerweise die GANZE Zeile von *global-navigations* an DAS MÖCHTE ich NICHT Nun meine Frage d)-a) WIE kann man es erreichern das mein **#global-nav {}** Bereich meinetwegen 12rem hat? Dieser Bereich also ein SEPERATER EIGENSTÄNDIGER Bereich wird? Was bei mir bisher NICHT geklappt hat ist folgendes: ~~~ 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; } ~~~ Wie kann ich das nun machen? --- 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? Mal dumm nachgefragt. ---- f) TAB-SKIP Wäre es NOTWENDIG beispielsweise die Überschrift oder den SKIP-to-TOP Button mit den TAB anzusteuern? Ist das sinnvoll und notwendig? Freue mich auf eure Antworten Gruß der einsiedelnde

25-03-29 **Mein Fragenkatalog** A) GRID Ich möchte fragen wie es sich RICHTIG verhält: ~~~ 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; } ~~~ Nun, wie ich es nenne, "pinne" ich die entsprechenden *aeras* nun an: ~~~ CSS #content-header { grid-area: content-header; } ## ## Hier pinne ich meine "Seitenübersicht" an <details id="content-nav-box" class="nav-box" tabindex="-1"> <summary>Inhalts-Übersicht</summary> </details> #content-nav-box { grid-area: global-navigations; [ ... ] } ## ## Hier pinne ich mein Hauptmenü an ## #global-nav { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## ## #site-banner { grid-area: aside-banner; grid-row-start: global-navigations-start; [ ... ] } ## Ist es NÖTIG dies zusätzlich zu definieren? ## ## Mein scroll-to-top-Button #scroll-button-area { grid-area: aside-banner; grid-row-start: global-navigations-start; grid-template-rows: max-content; [ ... ] } [ ... ] ~~~ a) Ist es NÖTIG mein #site-banner so zu definieren üder überflussig? b) muss man überall display:grid; dazuschreiben? c) Kann man es so machen das jedes Element "angepinnt" wird? d) Wenn ich nun mein Hauptmenü **#global-nav {}** NICHT der aera *aside-baner* anknüpfen möchte sondern an *global-navigations* anknüpfen möchte DANN nimmt mein **#global-nav {}** logischerweise die GANZE Zeile von *global-navigations* an DAS MÖCHTE ich NICHT Nun meine Frage d)-a) WIE kann man es erreichern das mein **#global-nav {}** Bereich meinetwegen 12rem hat? Dieser Bereich also ein SEPERATER EIGENSTÄNDIGER Bereich wird? Was bei mir bisher NICHT geklappt hat ist folgendes: ~~~ 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; } ~~~ Wie kann ich das nun machen? --- 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? Mal dumm nachgefragt. ---- f) TAB-SKIP Wäre es NOTWENDIG beispielsweise die Überschrift oder den SKIP-to-TOP Button mit den TAB anzusteuern? Ist das sinnvoll und notwendig? Freue mich auf eure Antworten Gruß der einsiedelnde