Bild sensitiv machen

[Gerrit]

Hallo,
wenn ich auf ein Bild klicke, soll ein zunächst unsichtbarer Bereich (z.B. div) nach Möglichkeit ohne Javascript sichtbar gemacht werden? Geht dies und finde ich dann im Wiki etwas (womit muss ich suchen)?

[Der Martin]

n'Abend.

wenn ich auf ein Bild klicke, soll ein zunächst unsichtbarer Bereich (z.B. div) nach Möglichkeit ohne Javascript sichtbar gemacht werden?

ist das eine Frage.^[1]

Geht dies und finde ich dann im Wiki etwas (womit muss ich suchen)?

Das mag unter sehr speziellen Voraussetzungen möglich sein, aber für den allgemeinen Fall ist die Antwort: Nein. Nur mit Javascript-Unterstützung.

Für eine spezifischere Antwort müsstest du schon ein bisschen von deinen Gegebenheiten zeigen.

Live long and pros healthy,
 Martin

---

1. Tipp: Feststellungen (Aussagesätze) schließt man normalerweise mit einem Punkt ab, nicht mit einem Fragezeichen. ↩︎

[Gerrit]

Danke, auf Rechtschreibtipps kann ich verzichten. Dazu gibt es andere Foren. Wenn ich erst noch auf Flüchtigkeitsfehler prüfen muss, dann bin ich hier wohl falsch! n'Abend genügt im übrigen auch nicht den deutschen Rechtschreibregeln! A+

[Gunnar Bittersmann]

@@Gerrit

Findest du es klug, in die Hand zu beißen, die dich füttert?

Ich finde das ziemlich dumm.

😷 LLAP

[Gerrit]

@Gunnar

Ich finde das ziemlich dumm.

Ich finde es ziemlich dumm, wenn man anstatt zu helfen, schulmeisterliche Belehrungen absondert.

[Rolf B]

Hallo Gerrit,

du hast, nachdem Martin aus deiner Frage nicht ganz schlau geworden ist, von Gunnar den Hinweis auf details/summary bekommen. Möchtest Du vielleicht lieber dazu was sagen? Ist das etwas, was Dir hilft? Das kannst Du unter Gunnars Beitrag mit dem Link zu seinem Codepen gern tun.

Oder passt das nicht zu deinen Vorstellungen (könnte ja durchaus sein). Dann könntest Du die an dieser Stelle genauer darstellen.

Zum Thema "dumm" etc. setze ich nun noch mein Moderatoren-Käppi auf 🤠:

ask("Bitte lasst es gut sein", MODE_NICELY);
flameWar.abort();
branch.close();

Rolf

[Gunnar Bittersmann]

@@Der Martin

Das mag unter sehr speziellen Voraussetzungen möglich sein

Wie ein moderner Browser?

Nein. Nur mit Javascript-Unterstützung.

Look Ma, no JavaScript.

😷 LLAP

[Der Martin]

Hallo Gunnar,

Das mag unter sehr speziellen Voraussetzungen möglich sein

Wie ein moderner Browser?

den hatte ich sowieso vorausgesetzt. Ich dachte eher an ein durch CSS beschreibbares Verhältnis von Bild und dem dynamisch sichtbaren Element.

Das hast du in deinem Pen einfach vorausgesetzt. Ich nicht, weil ich es in Gerrits Schilderung nicht erkennen konnte.

Live long and pros healthy,
 Martin

[Gerrit]

Hi, ich habe das Beispiel von Gunnar angesehen. Verstanden habe ich es nicht, da ich nirgendwo ein display: none oder visibility: hidden gefunden habe. Gedacht habe ich an so etwas wie das Bild mit 3 Balken. Wenn man darauf klickt, öffnet sich ein Auswahlbereich.

[Tabellenkalk]

Hallo,

Gedacht habe ich an so etwas wie das Bild mit 3 Balken.

Ah, du suchst ein "Hamburger-Menü"…
Das ist im Wiki eine Weiterleitung auf Grundstruktur der Navigation. Da ist aber leider der Hamburger nicht erwähnt...

Gruß
Kalk

[Rolf B]

Hallo Gerrit,

Verstanden habe ich es nicht, da ich nirgendwo ein display: none oder visibility: hidden gefunden habe.

Aber Du hättest recherchieren können, was die Dir unbekannten Elemente <details> und <summary> tun 😉. Ein vollständiges Menü mit details/summary hat Jürgen einmal in unserem Wiki aufgeschrieben. Auf einem genügend schmalen Bildschirm kollabiert es auch zu einem "Hamburger"-Button. Leider mit viel JavaScript dabei, also nicht das, was Du willst. Aber vielleicht kannst Du dort ein paar Ideen abgucken.

Für eine reine CSS Lösung ist details/summary aber eigentlich der beste Ansatz, andere Lösungen wie :hover oder Checkbox-Hack leiden an fehlender Bedienbarkeit (was meint: Bedienbarkeit für jeden, ob Maus, Touch, Tastatur, Screenreader oder Braille-Zeile). Du hängst da allerdings die kleine Schar derjeniger ab, die noch zur Nutzung des Internet Explorers gezwungen sind. Die bekommst Du nur mit einer Javascript-Lösung richtig unterstützt.

Rolf

[JürgenB]

Hallo Rolf,

… Ein vollständiges Menü mit details/summary hat Jürgen einmal in unserem Wiki aufgeschrieben. Auf einem genügend schmalen Bildschirm kollabiert es auch zu einem "Hamburger"-Button. Leider mit viel JavaScript dabei, …

das viele Javascript ist aber nur dem Komfort und dem IE11 und den alten Edge geschuldet. Ich habe leider keine Möglichkeit gefunden, schon im css Browser zu erkennen, die details/summary nicht unterstützen.

Im fiddle aus der anderen Antwort verwendest du

@supports (width: max-content) {
  ...
}

Damit wird aber nur der IE11 gefunden, nicht aber alte Edge?

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

das war jetzt ein reiner Glücksgriff mit max-content. Edge-Edge kann @supports, aber details und max-content werden beide erst mit Chromium-Edge eingeführt. Sagt caniuse jedenfalls.

Rolf

[JürgenB]

Hallo Rolf,

der erkennst also den IE11 nur dran, dass er supports nicht kennt.

Wenn ich eine Möglichkeit hätte, auch MS-Edge im css zu erkennen, wäre die Navigation im Wiki-Tutorial nicht so Javascriptabhängig.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

dann nimm doch max-content. Das ist zwar eine leicht unredliche Abfrage, aber da wir von einem Blick in die Historie reden, passt das.

MDN sagt, dass heute alle Browser außer Edge-Edge und IE max-content unterstützen. MDN sagt, dass heute alle Browser außer Edge-Edge und IE <details> unterstützen.

If it walks like duck, swims like a duck and quacks like a duck, I call it a duck...

Rolf

[MudGuard]

Hi,

der erkennst also den IE11 nur dran, dass er supports nicht kennt.

Wenn ich eine Möglichkeit hätte, auch MS-Edge im css zu erkennen, wäre die Navigation im Wiki-Tutorial nicht so Javascriptabhängig.

leider wurde

* html {} 

zu früh abgeschafft …

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Gerrit,

mein naiver Versuch mit details sähe so aus: https://jsfiddle.net/Rolf_b/gc1j4drL/

Das ::marker Pseudoelement ist seit Oktober 2020 in den Evergreen-Browsern nutzbar. Für den Internet Explorer habe ich noch eine Browserweiche drin, mit @supports. Das kennt der IE nicht, das Menü ist dann ständig offen.

Rolf

[Rolf B]

Nachtrag: Bei der Gelegenheit habe ich festgestellt, dass sich bei ::marker einiges in der Browser-Unterstützung getan hat. Zudem polemisiert der Text in unserem Wiki darüber, dass die Browser Müll machen würden - aber einiges von diesem Müll steht gar nicht (mehr) in der Spec; die Formatierungsmöglichkeiten des ::marker Pseudoelements sind limitiert.

Insbesondere sieht die Spec nicht vor, eine Positionierung oder transform:scale einzusetzen. Ich habe diese Teile aus dem Wiki entfernt (@Matthias Apsel - du hattest das geschrieben). Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?

Rolf

[Matthias Scharwies]

Servus!

Ich habe diese Teile aus dem Wiki entfernt

Vielen Dank!

Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Rolf,

details-marker:

Safari
zu: roter Pfeil nach rechts offen: grüner Pfeil nach unten Klick außerhalb des Elements: roter Pfeil nach unten

MacOS Firefox
Kennt das Symbol nicht und zeigt „Kasten“

details mit eigenem Marker:

Safari
zeigt grünes + und rotes x wie vorgesehen, die Originalsymbole bleiben aber.

MacOS Firefox
OK

Im Tutorial behandle ich die Symbole browserübergreifend so:

/* Originalsymbole vor den Summary entfernen und eigene Symbole definieren */
#sitenav summary::-webkit-details-marker { 
	display: none; 
}
#sitenav summary { 
	list-style-type: none; 
}
#sitenav details summary::after { 
	font-family: arial_unicode_ms; 
	vertical-align: top; 
}
#sitenav ul details:not([open]) > summary::after { 
	content: ' ►'; 
}
#sitenav ul details[open] > summary::after { 
	content: ' ◄'; 

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

Safari
zu: roter Pfeil nach rechts
offen: grüner Pfeil nach unten
Klick außerhalb des Elements: roter Pfeil nach unten

WTF? Grüner Pfeil nach unten sollte angezeigt werden, wenn die Details zu sind und öffnet sie. Das andere Ding soll ein roter Pfeil nach oben sein und die Details schließen.

Liegt das am verwendeten Font? Das Frickl verwendet Zeichen aus Plane 1 (Navigation Arrows):
🡱 - 1f871 - Pfeil nach oben
🡳 - 1f873 - Pfeil nach unten

Nachdem ich die hier eingefügt hatte, ist erstmal auch die Edit-Box des Forums ausgeflippt. Die "normalen" Pfeile ↑ und ↓ sind allerdings recht unansehnlich. Hier im Forum geht's noch, im Frickl gar nicht (Chrome/Windows). Aber was gibt's in der BMP? ⭣⬇⮯⮋⮛⮟, alles nicht so dolle. Im SMP Block "zusätzliche Pfeile C" gibt es eine Inflation an Pfeilen: 🠋🠟🡇🡫🡳🡻🢃🢛 - aber wenn die nicht sauber dargestellt werden ist es Käse. Ich mag in so ein einfaches Beispiel aber auch kein SVG-Bild einfügen oder mit CSS-Tricks einen Pfeil generieren.

Rolf

[kai345]

Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?

Opera Windows:

[Rolf B]

Hallo kai345,

das ist natürlich total blöd - da sind die Open/Close Symbole gar nicht ersetzt worden. War das Opera 73 oder 74?

Edit: Hab mir den aktüllen Opera 74 nun selber installiert. Content wird ignoriert, Farben, font-size und transition funktionieren. Und ::marker funktioniert nicht, es muss die -webkit Variante sein. Angeblich basiert Opera 74 auf Blink 88, da muss wohl zwischen 88 und 89 noch was passiert sein.

Fun Fact: da ein summary-Element den Anzeigetyp display:list-item hat, kann man mit list-style-type: "🡱" das Symbol ebenfalls setzen. In Chrome jedenfalls.

Rolf

[kai345]

Edit: Hab mir den aktüllen Opera 74 nun selber installiert. Content wird ignoriert, Farben, font-size und transition funktionieren. Und ::marker funktioniert nicht, es muss die -webkit Variante sein. Angeblich basiert Opera 74 auf Blink 88, da muss wohl zwischen 88 und 89 noch was passiert sein.

Opera 75 beta [Chromium 89]:

[Gerrit]

Hallo Rolf,
besten Dank für das Beispiel. Wenn es in den gängigsten Browsern läuft, so genügt dies mir am Anfang auch.
Ich finde solche Beispiele (für meine Herangehensweise) ideal.
Ich muss nicht zuerst (neben einer Einführung) alles über flex oder grid lesen, sondern ich habe sofort ein Ergebnis, auf dem ich aufbauen kann.
Und ich kann dann gezielt nachschauen, was die einzelnen für mich unbekanten Elemente/Parameter bedeuten (learning ba doing). Schönen Gruß Gerrit

[Gerrit]

Hallo Rolf, in Deinem jsfiddle-Beispiel ist die Struktur

<header>
  <nav>
  ......

Für mein "Erstlingswerk" hatte ich aus SELFHTML folgendes übernommen:

<!doctype html>
<html lang="de">
  <head>
     …
  </head>
  <body>
    <header>
      <h1>Name unserer Seite</h1>
    </header>
    <nav>
      …
    </nav>
    <main>
      <h1>Überschrift des Artikels</h1>
      <p>weiterer Inhalt</p>
    </main>
  </body>
</html>

Kann ich, damit Dein Beispiel passt das <nav> in <article></article> oder etwas ähnliches einbetten und das CSS entsprechend abändern? Ein anderer Weg wäre statt header das nav zu verwenden und unter dem nav ein <div> zu setzen.Beides würde wohl so funktionieren, aber widerspricht es dann der Philosophie oder ist es dann nicht mehr barrierefrei?

[Gunnar Bittersmann]

@@Gerrit

Für mein "Erstlingswerk" hatte ich aus SELFHTML folgendes übernommen:

<!doctype html>
<html lang="de">
  <head>
     …
  </head>
  <body>
    <header>
      <h1>Name unserer Seite</h1>
    </header>
    <nav>
      …
    </nav>
    <main>
      <h1>Überschrift des Artikels</h1>
      <p>weiterer Inhalt</p>
    </main>
  </body>
</html>

Kannst du uns die Stelle In SELFHTML sagen, von wo du das übernommen hast, damit das dort berichtigt werden kann?

Es ist nämlich falsch: „Name unserer Seite“ ist nicht h1, sondern p.

„Überschrift des Artikels“ ist auf der Seite die h1 – und davon sollte es nur eine geben. (Das h in h1 steht für Highlander.)

Kann ich, damit Dein Beispiel passt das <nav> in <article></article> oder etwas ähnliches einbetten und das CSS entsprechend abändern?

In article wohl nicht, aber in div kannst du einbetten, was du willst. Warum solltest du das brauchen?

Ein anderer Weg wäre statt header das nav zu verwenden und unter dem nav ein <div> zu setzen.Beides würde wohl so funktionieren, aber widerspricht es dann der Philosophie oder ist es dann nicht mehr barrierefrei?

So ist es. HTML-Elemente sind nicht wahllos, sondern genau ihrer Bestimmung nach zu verwenden.

„Name unserer Seite“ gehört nicht ins nav-Element. Das Navigationsmenü gehört in ein nav-Element.

Und wenn es sich bei deinem Bild um ein Hamburger-Icon zum Öffnen des Menüs handelt, dann gehört dieser Button auch mit ins nav-Element.

Und ja, ein button-Element, das per JavaScript das Menü auf- und zumacht und entsprechende Attribute für die Barrierefreiheit setzt.

S.a. Beispiel und Hinweise auf den Folien „TIL wie man ein Menü serviert“.

😷 LLAP

[Tabellenkalk]

Hallo,

es ist nicht einfach, sowas im Wiki zu finden, aber hier fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

es ist nicht einfach, sowas im Wiki zu finden,

in der Tat.

aber hier fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…

Ich habe werde es mal geändert haben.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

aber hier fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…

Ich habe werde es mal geändert haben.

Das Beispiel selbst war schon seit 2014 korrekt, zu einer Zeit also, als das vielleicht noch gar nicht korrekt war.

Bis demnächst
Matthias

[Rolf B]

Hallo Gunnar,

Und ja, ein button-Element, das per JavaScript das Menü auf- und zumacht

Du widersprichst der Idee, ein Dropdown-Menü mit details/summary zu realisieren? Genau darum geht es hier doch.

Du widersprichst damit auch dem Wiki-Artikel von Jürgen über eine zugängliche Dropdown-Navigation?

Rolf

[Gerrit]

Hallo Ihr Lieben, jetzt bin ich aber total verwirrt! Welche Struktur und welche Art Dropdown-Menu ist "state of the art"? Gruß Gerrit

[Rolf B]

Hallo Gerrit,

ich bin's auch, darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.

Also, erstmal Ruhe bewahren, wir diskutieren das aus 😉

Die Button-Lösung ist die "klassische", braucht aber JavaScript. Die details/summary Lösung kommt ohne JS aus, aber der Internet Explorer kennt dieses Element noch nicht. Deswegen habe ich meinen Vorschlag so gebaut, dass er im IE einfach als "ständig offen" und ohne das Menübild dargestellt wird. Das ist nicht schön, aber die Seite ist nutzbar. Auf "schönes" Layout hat ein IE-Opfer heute keinen Anspruch mehr.

Rolf

[Gerrit]

Hallo Rolf,
ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.
Gruß
Gerrit

[Matthias Apsel]

Hallo Gerrit,

ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.

In den seltensten Fällen ist er wirklich selbst schuld.

Bis demnächst
Matthias

[Der Martin]

Hallo,

ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.

In den seltensten Fällen ist er wirklich selbst schuld.

dem schließe ich mich an. Meist sind es wohl Vorgaben des eigenen Arbeitgebers.

Während bei uns im Unternehmen die Menge der tatsächlich genutzten Browser recht vielfältig ist (Chrome in allen Geschmacksrichtungen einschließlich Microsoft, Firefox und Varianten^[1]), empfiehlt unsere IT zumindest fürs Intranet immer noch den IE11. Der lässt sich nämlich so einstellen, dass er sich überall, wo eine Anmeldung gefordert ist, erstmal ungefragt mit den Windows-Credentials anzumelden versucht.
Das kann man als Vorteil oder als Risiko kommunizieren, je nachdem, wo man gerade steht.

Benutzt man einen anderen Browser fürs Intranet, muss man sich halt mit ständig aufpoppenden Login-Abfragen abfinden. Oder die Anmeldedaten für die diversen Dienste im Browser speichern. Das möchte ich aber auch wieder nicht.

Also fahre ich zweigleisig: Für hausinterne Web-Dienste (z.B. Sharepoint, das ESS-Modul von SAP oder das bei uns verwendete e-Learning-Portal) den alten IE, für externe Sites Pale Moon, seltener auch den "echten" Firefox.

Live long and pros healthy,
 Martin

---

1. Ein älterer Kollege benutzt sogar für alles nur den IE11. "Den bin ich gewöhnt, mit dem komme ich gut zurecht, ich brauch nichts anderes." ↩︎

[JürgenB]

Hallo Martin,

Meist sind es wohl Vorgaben des eigenen Arbeitgebers.

oder veraltete System mit Windows 7 und weder Geld noch Hilfe, um da etwas dran zu ändern.

Aber ich finde auch, schmuckloses Design und z.B. offene Details sind zumutbar. Die Seite bleibt ja bedienbar.

Über den Einsatz „moderner“ Javascriptmethoden, die den IE auf einen Syntaxfehler laufen lassen, sollte man aber schon nachdenken und evtl. statische Alternativen anbieten. Syntaktischer Zucker rechtfertigt nicht, alte Browser auszusperren.

Gruß
Jürgen

[Der Martin]

Hallo,

Meist sind es wohl Vorgaben des eigenen Arbeitgebers.

oder veraltete System mit Windows 7 und weder Geld noch Hilfe, um da etwas dran zu ändern.

nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.

Firefox fragt beim Setup sogar, ob er Daten eines bereits vorhandenen Browsers übernehmen soll (z.B. Bookmarks). Chrome bestimmt auch, oder?

Aber ich finde auch, schmuckloses Design und z.B. offene Details sind zumutbar. Die Seite bleibt ja bedienbar.

Für den hier aktuellen Fall: Ja, finde ich auch okay. Wer archaisches Zeug nutzt, ist daran gewöhnt, dass nicht immer alles so schick aussieht wie beim Nachbarn, möchte das vielleicht sogar so.

Über den Einsatz „moderner“ Javascriptmethoden, die den IE auf einen Syntaxfehler laufen lassen, sollte man aber schon nachdenken und evtl. statische Alternativen anbieten. Syntaktischer Zucker rechtfertigt nicht, alte Browser auszusperren.

Wohl wahr.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.

Die Arbeitsplätze meines Arbeitgebers laufen unter Windows 7 (ok, Windows Server 2008 R2 plus Citrix) und das Selbstinstallieren eines Chrome ist nicht möglich. Ein Firefox ist drauf, aber für bestimmte Anwendungen limitiert. Seit einem halben Jahr gibt's endlich einen aktuellen Edge und die neue Sharepoint-Version, die damit klar kommt.

Eine Standardsoftware, die ich betreue, hatte bis vor kurzem noch ein Java Applet intus und ist immer noch nicht javafrei, sondern wurde vom Hersteller nur auf Java Webstart umgestellt.

Dieses Jahr findet bei uns der zweite oder dritte Anlauf für eine Win10 Migration statt. Und beginnt wieder mal auf eine Art, die das Coronamanagement der deutschen Verwaltungen bewundernswert erscheinen lässt ("Liefern Sie uns umgehend Ihre Software fertig paketiert und getestet!" - "Wo ist der Testserver für mich, der nach Maßgaben der neuen Umgebung konfiguriert ist?" - "Äh, da haben wir grad keine Zeit für..." - einen Testserver in Eigenregie aufsetzen bringt nichts; zum einen darf ich das nicht und zum anderen weiß ich ja nicht, was die an Policies eindrehen, die mich ggf. abschießen)

Manche Dinge sind einfach gruselig.

Rolf

[Der Martin]

Hallo,

nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.

Die Arbeitsplätze meines Arbeitgebers laufen unter Windows 7 (ok, Windows Server 2008 R2 plus Citrix) und das Selbstinstallieren eines Chrome ist nicht möglich.

geh bitte nochmal einen Schritt zurück. Ich sagte ganz bewusst: Wenn jemand den IE verwenden muss, ist das meistens eine vom Arbeitgeber verhängte Einschränkung.

Manche Dinge sind einfach gruselig.

Allerdings, ja.

Live long and pros healthy,
 Martin

[Gerrit]

Hallo,

Ein älterer Kollege benutzt sogar für alles nur den IE11. "Den bin ich gewöhnt, mit dem komme ich gut zurecht, ich brauch nichts anderes."

Ich war auch zufrieden mit Windows XP.
Ja man kann natürlich auf alles Rücksicht nehmen.
Und ich wünschte mir dies für mein nicht sehr altes Smartphone, auf dem die Corona-App nicht lauffähig ist.

[JürgenB]

Hallo Rolf,

auf meiner(!) Site kennen z.Zt. von den Besuchern mit eingeschaltetem Javascript 2% kein details/summary, Tendez abnehmend. Laut caniuse sind es noch weniger. Es lohnt sich also nicht, da viel zu investieren. Im Wiki-Tutorial habe ich einen einfachen auf dieses Problem zugeschnittenen Poyfill, evtl. was für Gerrit. Ich habe auch beschrieben, wie dieser nur bei Bedarf nachgeladen wird. Über dieses Nachladen messe ich übrigens die 2%.

Gruß
Jürgen

[Gerrit]

Hallo Rolf

ich bin's auch, darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.

Also, erstmal Ruhe bewahren, wir diskutieren das aus 😉

Hat sich Gunnar schon bei Dir gemeldet, hier ja noch nicht, oder seid Ihr noch tief in der Diskussion?
Schönen Gruß
Gerrit

[Gunnar Bittersmann]

@@Gerrit

darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.

Hat sich Gunnar schon bei Dir gemeldet, hier ja noch nicht

Der hat gerade andere Schlachten zu schlagen. ⚔️

😷 LLAP

[Rolf B]

Hallo Gerrit,

bei Dir gemeldet

Gunnar lebt in Berlin, ich bei Köln. Wenn wir kommunizieren, dann hier offen im Forum. Oder über Moderationsfälle im Intern-Forum. Vieraugen-Diskussionen als Privatchat haben wir bisher nur über "Mathe zum ..." geführt 😉

Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details", dann ist der Unterschied da wohl auch nicht so wichtig. Bei einem gravierenden Accessibility-Fehler hätte er sich sicherlich schon deutlicher geäußert.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details" …

Es gibt hier keine 24/7-Anwesenheitspflicht. Und ich lasse mir da kein schlechtes Gewissen einreden.

😷 LLAP

[Tabellenkalk]

Hallo,

Es gibt hier keine 24/7-Anwesenheitspflicht.

Ist das neu?

Gruß
Kalk

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details" …

Es gibt hier keine 24/7-Anwesenheitspflicht. Und ich lasse mir da kein schlechtes Gewissen einreden.

zu Ende lesen!

Bei einem gravierenden Accessibility-Fehler hätte er sich sicherlich schon deutlicher geäußert.

Bis demnächst
Matthias

[Gerrit]

Hallo Gunnar, hallo Rolf,
ich wollte auch nicht drängeln!
Ich schaue einfach ab und zu noch einmal vorbei.
Gruß
Gerrit

[Gerrit]

Hi,
ist Gunnar noch mit der CSS-Battle zugange?
Vielleicht kann mir jemand einen Tipp geben zu dem Problem:

Hier
schiebt sich der Seiteninhalt nach unten, wenn man auf "Menu" klickt.
Wie erreiche ich, dass das Auswahlmenu über die aktuelle Seite gelegt wird?
Gruß
Gerrit

[Rolf B]

Hallo Gerrit,

indem Du - wenn Du die Schachtelung der Elemente anders als in meinem Fiddle machst, auch das CSS entsprechend änderst.

Die CSS Selektoren gehen von einer bestimmten Hierarchie der Elemente aus.

Rolf

[JürgenB]

Hallo,

Hier
schiebt sich der Seiteninhalt nach unten, wenn man auf "Menu" klickt.
Wie erreiche ich, dass das Auswahlmenu über die aktuelle Seite gelegt wird?

im Tutorial mache ich das mit position: absolute, aber erst, nachdem ich sicher bin, das Javascript eingeschaltet ist, und ich prüfen kann, ob details/summary unterstütz wird und der Polyfill bei Bedarf geladen werden kann.

Details/summary würde z.B. im IE bei absoluter Positionierung den Inhalt überdecken. Ich teste aber gerade eine reine CSS-Abfrage mit

@supports (width: max-content) { /* Nicht für IE und MS-Edge */
	#sitenav { position: absolute; }
	#sitenav ul { position: absolute; }
}

Gruß
Jürgen

[Gunnar Bittersmann]

@@Gerrit

ist Gunnar noch mit der CSS-Battle zugange?

Aber ja. 🐘🐑

😷 LLAP