*Dieser Thread ist ein abgetrennter Teilbaum zum Thema Popover aus [Gabriele: Umstellung auf responsive Neukonzeption](https://forum.selfhtml.org/self/2025/may/05/umstellung-auf-responsive-neukonzeption/1819816). Den Beitrag selbst habe ich dorthin dupliziert. -- Rolf* Hallo Gabriele, eine "ähnliche, triviale Anwendung" habe ich nicht in der Schublade. Eine triviale Webseite verzichtet auf großartiges Layout und stellt alle Elemente untereinander, ohne Nebeneinander oder Popups. Was Du möchtest, ist deutlich mehr als trivial und muss korrekt geplant werden, andernfalls ist die Seite unzugänglich. Meine Fragen beziehen sich darauf, welche Bedeutung deine Oberflächenelemente haben und wie sie sich verhalten sollen. Wie ich schon sagte: die Antworten auf meine Fragen können starken Einfluss auf das Ergebnis haben. Wenn ich falsche Annahmen treffe, zeige ich Dir ein Musterlayout, an dem Du Dir nachher die Finger brichst, weil die Grundkonzeption nicht passt. Oder das Du nachher mit "Diesen Scheiß haben die Schwachköpfe bei Selfhtml gemacht und es ist völlig unbrauchbar" in die Gegend posaunst. Was ich zu fragen vergaß: Welche Bedeutung haben "Bild" und "Text" oben links? Ich vermute ein Logo, bzw. zusammen die Wort-Bild Marke des Seitenanbieters. Stimmt das? Ich habe mal eine Demo gemacht: <https://jsfiddle.net/r8q4t6mf/1/> Kommt das Deinen Vorstellungen nahe? Die Breite kannst Du anpassen, indem Du den senkrechten Trennbalken zwischen den Fenstern mit der Maus verschiebst. Ein Bild hatte ich keins zur Hand, darum ist da dieses div mit dem Farbverlauf drin. Aber weil es ein Bild simuliert, habe ich ihm das alt-Attribut verpasst. Das Hamburger-Menü habe ich mit dem Unicode Zeichen ︙gemacht. Für 3 Streifen gibt's andere Zeichen oder Du machst Dir ein SVG-Bild dazu. Dieser BLÖDE Menübutton zeigt, wie schnell der Aufwand eskaliert, wenn Du eigene Controls auf der Seite haben willst. Aber ohne das ganze Zusatzgeraffel ist der Button für Nutzer von Assistenztechniken nur ein höchst obskures Gebilde, und ein eingebautes Browser-Feature "Menü-Button" gibt's nicht. Mit dem Command- und Popover-API kann man vielleicht etwas machen, aber nach meinem Kenntnisstand funktioniert da die Positionierung der Popovers nicht 100%-ig. ~~~html,bad <button type="button">︙</button> ~~~ ~~~html,good <button type="button" aria-expanded="false" aria-controls="main-menu"> <span aria-hidden="true">︙</span> <span class="visually-hidden">Themenauswahl</span> </button> ~~~ Farben sind eh Schall und Rauch und visualisieren hier höchstens, welches Element wo und wie groß ist. Das Menü ist mit JavaScript gesteuert. Eine Logik, die es auch bei kaputtem/fehlendem JavaScript sichtbar macht, fehlt noch, ist aber für einen Produktiveinsatz eigentlich nötig. Aber damit wird das ganze Gedöns nochmal deutlich komplexer. Zum Verständnis dessen, was ich gemacht habe, solltest Du das Wiki konsultieren. Ich behaupte keinesfalls, dass diese Demo die einzige Wahrheit ist. Man kann das auch ganz anders lösen und Perfektion habe ich aus Zeitgründen eh nicht angestrebt. _Rolf_ -- sumpsi - posui - obstruxi

Dieser Thread ist ein abgetrennter Teilbaum zum Thema Popover aus [Gabriele: Umstellung auf responsive Neukonzeption](https://forum.selfhtml.org/self/2025/may/05/umstellung-auf-responsive-neukonzeption/1819816). Den Beitrag selbst habe ich dorthin dupliziert. Hallo Gabriele, eine "ähnliche, triviale Anwendung" habe ich nicht in der Schublade. Eine triviale Webseite verzichtet auf großartiges Layout und stellt alle Elemente untereinander, ohne Nebeneinander oder Popups. Was Du möchtest, ist deutlich mehr als trivial und muss korrekt geplant werden, andernfalls ist die Seite unzugänglich. Meine Fragen beziehen sich darauf, welche Bedeutung deine Oberflächenelemente haben und wie sie sich verhalten sollen. Wie ich schon sagte: die Antworten auf meine Fragen können starken Einfluss auf das Ergebnis haben. Wenn ich falsche Annahmen treffe, zeige ich Dir ein Musterlayout, an dem Du Dir nachher die Finger brichst, weil die Grundkonzeption nicht passt. Oder das Du nachher mit "Diesen Scheiß haben die Schwachköpfe bei Selfhtml gemacht und es ist völlig unbrauchbar" in die Gegend posaunst. Was ich zu fragen vergaß: Welche Bedeutung haben "Bild" und "Text" oben links? Ich vermute ein Logo, bzw. zusammen die Wort-Bild Marke des Seitenanbieters. Stimmt das? Ich habe mal eine Demo gemacht: <https://jsfiddle.net/r8q4t6mf/1/> Kommt das Deinen Vorstellungen nahe? Die Breite kannst Du anpassen, indem Du den senkrechten Trennbalken zwischen den Fenstern mit der Maus verschiebst. Ein Bild hatte ich keins zur Hand, darum ist da dieses div mit dem Farbverlauf drin. Aber weil es ein Bild simuliert, habe ich ihm das alt-Attribut verpasst. Das Hamburger-Menü habe ich mit dem Unicode Zeichen ︙gemacht. Für 3 Streifen gibt's andere Zeichen oder Du machst Dir ein SVG-Bild dazu. Dieser BLÖDE Menübutton zeigt, wie schnell der Aufwand eskaliert, wenn Du eigene Controls auf der Seite haben willst. Aber ohne das ganze Zusatzgeraffel ist der Button für Nutzer von Assistenztechniken nur ein höchst obskures Gebilde, und ein eingebautes Browser-Feature "Menü-Button" gibt's nicht. Mit dem Command- und Popover-API kann man vielleicht etwas machen, aber nach meinem Kenntnisstand funktioniert da die Positionierung der Popovers nicht 100%-ig. ~~~html,bad <button type="button">︙</button> ~~~ ~~~html,good <button type="button" aria-expanded="false" aria-controls="main-menu"> <span aria-hidden="true">︙</span> <span class="visually-hidden">Themenauswahl</span> </button> ~~~ Farben sind eh Schall und Rauch und visualisieren hier höchstens, welches Element wo und wie groß ist. Das Menü ist mit JavaScript gesteuert. Eine Logik, die es auch bei kaputtem/fehlendem JavaScript sichtbar macht, fehlt noch, ist aber für einen Produktiveinsatz eigentlich nötig. Aber damit wird das ganze Gedöns nochmal deutlich komplexer. Zum Verständnis dessen, was ich gemacht habe, solltest Du das Wiki konsultieren. Ich behaupte keinesfalls, dass diese Demo die einzige Wahrheit ist. Man kann das auch ganz anders lösen und Perfektion habe ich aus Zeitgründen eh nicht angestrebt. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Gabriele, eine "ähnliche, triviale Anwendung" habe ich nicht in der Schublade. Eine triviale Webseite verzichtet auf großartiges Layout und stellt alle Elemente untereinander, ohne Nebeneinander oder Popups. Was Du möchtest, ist deutlich mehr als trivial und muss korrekt geplant werden, andernfalls ist die Seite unzugänglich. Meine Fragen beziehen sich darauf, welche Bedeutung deine Oberflächenelemente haben und wie sie sich verhalten sollen. Wie ich schon sagte: die Antworten auf meine Fragen können starken Einfluss auf das Ergebnis haben. Wenn ich falsche Annahmen treffe, zeige ich Dir ein Musterlayout, an dem Du Dir nachher die Finger brichst, weil die Grundkonzeption nicht passt. Oder das Du nachher mit "Diesen Scheiß haben die Schwachköpfe bei Selfhtml gemacht und es ist völlig unbrauchbar" in die Gegend posaunst. Was ich zu fragen vergaß: Welche Bedeutung haben "Bild" und "Text" oben links? Ich vermute ein Logo, bzw. zusammen die Wort-Bild Marke des Seitenanbieters. Stimmt das? Ich habe mal eine Demo gemacht: <https://jsfiddle.net/r8q4t6mf/1/> Kommt das Deinen Vorstellungen nahe? Die Breite kannst Du anpassen, indem Du den senkrechten Trennbalken zwischen den Fenstern mit der Maus verschiebst. Ein Bild hatte ich keins zur Hand, darum ist da dieses div mit dem Farbverlauf drin. Aber weil es ein Bild simuliert, habe ich ihm das alt-Attribut verpasst. Das Hamburger-Menü habe ich mit dem Unicode Zeichen ︙gemacht. Für 3 Streifen gibt's andere Zeichen oder Du machst Dir ein SVG-Bild dazu. Dieser BLÖDE Menübutton zeigt, wie schnell der Aufwand eskaliert, wenn Du eigene Controls auf der Seite haben willst. Aber ohne das ganze Zusatzgeraffel ist der Button für Nutzer von Assistenztechniken nur ein höchst obskures Gebilde, und ein eingebautes Browser-Feature "Menü-Button" gibt's nicht. Mit dem Command- und Popover-API kann man vielleicht etwas machen, aber nach meinem Kenntnisstand funktioniert da die Positionierung der Popovers nicht 100%-ig. ~~~html,bad <button type="button">︙</button> ~~~ ~~~html,good <button type="button" aria-expanded="false" aria-controls="main-menu"> <span aria-hidden="true">︙</span> <span class="visually-hidden">Themenauswahl</span> </button> ~~~ Farben sind eh Schall und Rauch und visualisieren hier höchstens, welches Element wo und wie groß ist. Das Menü ist mit JavaScript gesteuert. Eine Logik, die es auch bei kaputtem/fehlendem JavaScript sichtbar macht, fehlt noch, ist aber für einen Produktiveinsatz eigentlich nötig. Aber damit wird das ganze Gedöns nochmal deutlich komplexer. Zum Verständnis dessen, was ich gemacht habe, solltest Du das Wiki konsultieren. Ich behaupte keinesfalls, dass diese Demo die einzige Wahrheit ist. Man kann das auch ganz anders lösen und Perfektion habe ich aus Zeitgründen eh nicht angestrebt. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Gabriele, eine "ähnliche, triviale Anwendung" habe ich nicht in der Schublade. Eine triviale Webseite verzichtet auf großartiges Layout und stellt alle Elemente untereinander, ohne Nebeneinander oder Popups. Was Du möchtest, ist deutlich mehr als trivial und muss korrekt geplant werden, andernfalls ist die Seite unzugänglich. Meine Fragen beziehen sich darauf, welche Bedeutung deine Oberflächenelemente haben und wie sie sich verhalten sollen. Wie ich schon sagte: die Antworten auf meine Fragen können starken Einfluss auf das Ergebnis haben. Wenn ich falsche Annahmen treffe, zeige ich Dir ein Musterlayout, an dem Du Dir nachher die Finger brichst, weil die Grundkonzeption nicht passt. Oder das Du nachher mit "Diesen Scheiß haben die Schwachköpfe bei Selfhtml gemacht und es ist völlig unbrauchbar" in die Gegend posaunst. Was ich zu fragen vergaß: Welche Bedeutung haben "Bild" und "Text" oben links? Ich vermute ein Logo, bzw. zusammen die Wort-Bild Marke des Seitenanbieters. Stimmt das? Ich habe mal eine Demo gemacht: <https://jsfiddle.net/r8q4t6mf/> Kommt das Deinen Vorstellungen nahe? Die Breite kannst Du anpassen, indem Du den senkrechten Trennbalken zwischen den Fenstern mit der Maus verschiebst. Ein Bild hatte ich keins zur Hand, darum ist da dieses div mit dem Farbverlauf drin. Aber weil es ein Bild simuliert, habe ich ihm das alt-Attribut verpasst. Das Hamburger-Menü habe ich mit dem Unicode Zeichen ︙gemacht. Für 3 Streifen gibt's andere Zeichen oder Du machst Dir ein SVG-Bild dazu. Dieser BLÖDE Menübutton zeigt, wie schnell der Aufwand eskaliert, wenn Du eigene Controls auf der Seite haben willst. Aber ohne das ganze Zusatzgeraffel ist der Button für Nutzer von Assistenztechniken nur ein höchst obskures Gebilde, und ein eingebautes Browser-Feature "Menü-Button" gibt's nicht. Mit dem Command- und Popover-API kann man vielleicht etwas machen, aber nach meinem Kenntnisstand funktioniert da die Positionierung der Popovers nicht 100%-ig. ~~~html,bad <button type="button">︙</button> ~~~ ~~~html,good <button type="button" aria-expanded="false" aria-controls="main-menu"> <span aria-hidden="true">︙</span> <span class="visually-hidden">Themenauswahl</span> </button> ~~~ Farben sind eh Schall und Rauch und visualisieren hier höchstens, welches Element wo und wie groß ist. Das Menü ist mit JavaScript gesteuert. Eine Logik, die es auch bei kaputtem/fehlendem JavaScript sichtbar macht, fehlt noch, ist aber für einen Produktiveinsatz eigentlich nötig. Aber damit wird das ganze Gedöns nochmal deutlich komplexer. Zum Verständnis dessen, was ich gemacht habe, solltest Du das Wiki konsultieren. Ich behaupte keinesfalls, dass diese Demo die einzige Wahrheit ist. Man kann das auch ganz anders lösen und Perfektion habe ich aus Zeitgründen eh nicht angestrebt. _Rolf_ -- sumpsi - posui - obstruxi