tag:forum.selfhtml.org,2005:/self Bild sensitiv machen – SELFHTML-Forum 2021-03-09T19:47:34Z https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785148?srt=yes#m1785148 Gerrit 2021-03-02T19:28:27Z 2021-03-02T19:28:27Z Bild sensitiv machen <p>Hallo,<br> 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)?</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785149?srt=yes#m1785149 Der Martin 2021-03-02T19:37:31Z 2021-03-02T19:37:31Z Bild sensitiv machen <p>n'Abend.</p> <blockquote> <p>wenn ich auf ein Bild klicke, soll ein zunächst unsichtbarer Bereich (z.B. div) nach Möglichkeit ohne Javascript sichtbar gemacht werden?</p> </blockquote> <p>ist das eine Frage.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <blockquote> <p>Geht dies und finde ich dann im Wiki etwas (womit muss ich suchen)?</p> </blockquote> <p>Das mag unter sehr speziellen Voraussetzungen möglich sein, aber für den allgemeinen Fall ist die Antwort: Nein. Nur mit Javascript-Unterstützung.</p> <p>Für eine spezifischere Antwort müsstest du schon ein bisschen von deinen Gegebenheiten zeigen.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br> (mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung ) </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Tipp: Feststellungen (Aussagesätze) schließt man normalerweise mit einem Punkt ab, nicht mit einem Fragezeichen. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785153?srt=yes#m1785153 Gerrit 2021-03-02T19:55:57Z 2021-03-03T09:57:30Z Bild sensitiv machen <p>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+</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785156?srt=yes#m1785156 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-03-02T20:57:31Z 2021-03-02T20:57:31Z Bild sensitiv machen <p>@@Der Martin</p> <blockquote> <p>Das mag unter sehr speziellen Voraussetzungen möglich sein</p> </blockquote> <p>Wie ein moderner Browser?</p> <blockquote> <p>Nein. Nur mit Javascript-Unterstützung.</p> </blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/yLVjmqy" rel="noopener noreferrer">Look Ma, no JavaScript.</a></p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785158?srt=yes#m1785158 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-03-02T21:02:19Z 2021-03-02T21:02:19Z Bild sensitiv machen <p>@@Gerrit</p> <p>Findest du es klug, in die Hand zu beißen, die dich füttert?</p> <p>Ich finde das ziemlich dumm.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785159?srt=yes#m1785159 Der Martin 2021-03-02T21:12:20Z 2021-03-02T21:12:20Z Bild sensitiv machen <p>Hallo Gunnar,</p> <blockquote> <blockquote> <p>Das mag unter sehr speziellen Voraussetzungen möglich sein</p> </blockquote> <p>Wie ein moderner Browser?</p> </blockquote> <p>den hatte ich sowieso vorausgesetzt. Ich dachte eher an ein durch CSS beschreibbares Verhältnis von Bild und dem dynamisch sichtbaren Element.</p> <p>Das hast du in deinem Pen einfach vorausgesetzt. Ich nicht, weil ich es in Gerrits Schilderung nicht erkennen konnte.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br> (mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung ) </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785176?srt=yes#m1785176 Gerrit 2021-03-03T09:33:37Z 2021-03-03T09:33:37Z Bild sensitiv machen <p>@Gunnar</p> <blockquote> <p>Ich finde das ziemlich dumm.</p> </blockquote> <p>Ich finde es ziemlich dumm, wenn man anstatt zu helfen, schulmeisterliche Belehrungen absondert.</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785180?srt=yes#m1785180 Gerrit 2021-03-03T10:06:29Z 2021-03-03T10:06:29Z Bild sensitiv machen <p>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.</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785177?srt=yes#m1785177 Rolf B 2021-03-03T09:45:35Z 2021-03-03T09:46:06Z Bild sensitiv machen <p>Hallo Gerrit,</p> <p>du hast, nachdem Martin aus deiner Frage nicht ganz schlau geworden ist, von Gunnar den Hinweis auf <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/details" rel="nofollow noopener noreferrer">details/summary</a> bekommen. Möchtest Du vielleicht lieber dazu was sagen? Ist das etwas, was Dir hilft? Das kannst Du unter <a href="https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785156#m1785156" rel="noopener noreferrer">Gunnars Beitrag</a> mit dem Link zu seinem Codepen gern tun.</p> <p>Oder passt das nicht zu deinen Vorstellungen (könnte ja durchaus sein). Dann könntest Du die an dieser Stelle genauer darstellen.</p> <p>Zum Thema "dumm" etc. setze ich nun noch mein Moderatoren-Käppi auf :</p> <pre><code class="block">ask("Bitte lasst es gut sein", MODE_NICELY); flameWar.abort(); branch.close(); </code></pre> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785183?srt=yes#m1785183 Tabellenkalk 2021-03-03T10:20:32Z 2021-03-03T10:20:32Z Bild sensitiv machen <p>Hallo,</p> <blockquote> <p>Gedacht habe ich an so etwas wie das Bild mit 3 Balken.</p> </blockquote> <p>Ah, du suchst ein "Hamburger-Menü"…<br> Das ist im Wiki eine Weiterleitung auf <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation/Grundstruktur" rel="nofollow noopener noreferrer">Grundstruktur der Navigation</a>. Da ist aber leider der Hamburger nicht erwähnt...</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785186?srt=yes#m1785186 Rolf B 2021-03-03T10:35:58Z 2021-03-03T10:36:42Z Bild sensitiv machen <p>Hallo Gerrit,</p> <blockquote> <p>Verstanden habe ich es nicht, da ich nirgendwo ein display: none oder visibility: hidden gefunden habe.</p> </blockquote> <p>Aber Du hättest recherchieren können, was die Dir unbekannten Elemente <details> und <summary> tun . Ein vollständiges <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Dropdown-Navigation" rel="nofollow noopener noreferrer">Menü mit details/summary</a> 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.</p> <p>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 <strong>jeden</strong>, 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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785187?srt=yes#m1785187 Rolf B 2021-03-03T11:02:43Z 2021-03-03T11:02:43Z Bild sensitiv machen <p>Hallo Gerrit,</p> <p>mein naiver Versuch mit details sähe so aus: <a href="https://jsfiddle.net/Rolf_b/gc1j4drL/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/gc1j4drL/</a></p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785188?srt=yes#m1785188 JürgenB https://www.j-berkemeier.de 2021-03-03T11:24:34Z 2021-03-03T11:24:34Z Bild sensitiv machen <p>Hallo Rolf,</p> <blockquote> <p>… Ein vollständiges <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Dropdown-Navigation" rel="nofollow noopener noreferrer">Menü mit details/summary</a> 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, …</p> </blockquote> <p>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.</p> <p>Im fiddle aus der anderen Antwort verwendest du</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span><span class="token property">width</span><span class="token punctuation">:</span> max-content<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> </code></pre> <p>Damit wird aber nur der IE11 gefunden, nicht aber alte Edge?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785194?srt=yes#m1785194 Rolf B 2021-03-03T14:42:31Z 2021-03-03T14:42:31Z Bild sensitiv machen <p>Nachtrag: Bei der Gelegenheit habe ich festgestellt, dass sich bei ::marker einiges in der Browser-Unterstützung getan hat. Zudem polemisiert der <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/details#Formatierung_des_details-markers" rel="nofollow noopener noreferrer">Text in unserem Wiki</a> 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.</p> <p>Insbesondere sieht die Spec <strong>nicht</strong> vor, eine Positionierung oder transform:scale einzusetzen. Ich habe diese Teile aus dem Wiki entfernt (<a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a> - du hattest das geschrieben). Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785259?srt=yes#m1785259 Gerrit 2021-03-04T23:13:11Z 2021-03-04T23:13:11Z Bild sensitiv machen <p>Hallo Rolf, in Deinem jsfiddle-Beispiel ist die Struktur</p> <pre><code class="block"><header> <nav> ...... </code></pre> <p>Für mein "Erstlingswerk" hatte ich aus SELFHTML folgendes übernommen:</p> <pre><code class="block"><!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> </code></pre> <p>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?</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785189?srt=yes#m1785189 Rolf B 2021-03-03T11:48:47Z 2021-03-03T11:48:47Z Bild sensitiv machen <p>Hallo JürgenB,</p> <p>das war jetzt ein reiner Glücksgriff mit max-content. Edge-Edge kann @supports, aber details <strong>und</strong> max-content werden beide erst mit Chromium-Edge eingeführt. Sagt caniuse jedenfalls.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785191?srt=yes#m1785191 JürgenB https://www.j-berkemeier.de 2021-03-03T12:12:43Z 2021-03-03T12:12:43Z Bild sensitiv machen <p>Hallo Rolf,</p> <p>der erkennst also den IE11 nur dran, dass er supports nicht kennt.</p> <p>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.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785192?srt=yes#m1785192 Rolf B 2021-03-03T12:31:39Z 2021-03-03T12:31:39Z Bild sensitiv machen <p>Hallo JürgenB,</p> <p>dann nimm doch max-content. Das ist zwar eine leicht unredliche Abfrage, aber da wir von einem Blick in die Historie reden, passt das.</p> <p>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.</p> <p>If it walks like duck, swims like a duck and quacks like a duck, I call it a duck...</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785193?srt=yes#m1785193 MudGuard http://www.andreas-waechter.de/ 2021-03-03T12:38:12Z 2021-03-03T12:38:12Z Bild sensitiv machen <p>Hi,</p> <blockquote> <p>der erkennst also den IE11 nur dran, dass er supports nicht kennt.</p> <p>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.</p> </blockquote> <p>leider wurde</p> <pre><code class="block language-css"><span class="token selector">* html</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> </code></pre> <p>zu früh abgeschafft …</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785195?srt=yes#m1785195 Matthias Scharwies mscharwies@selfhtml.org 2021-03-03T14:55:40Z 2021-03-03T14:55:40Z Bild sensitiv machen <p>Servus!</p> <blockquote> <p>Ich habe diese Teile aus dem Wiki entfernt</p> </blockquote> <p>Vielen Dank!</p> <blockquote> <p>Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785196?srt=yes#m1785196 JürgenB https://www.j-berkemeier.de 2021-03-03T15:13:07Z 2021-03-03T15:13:07Z Bild sensitiv machen <p>Hallo Rolf,</p> <p>details-marker:</p> <p>Safari<br> zu: roter Pfeil nach rechts offen: grüner Pfeil nach unten Klick außerhalb des Elements: roter Pfeil nach unten</p> <p>MacOS Firefox<br> Kennt das Symbol nicht und zeigt „Kasten“</p> <p>details mit eigenem Marker:</p> <p>Safari<br> zeigt grünes + und rotes x wie vorgesehen, die Originalsymbole bleiben aber.</p> <p>MacOS Firefox<br> OK</p> <p>Im Tutorial behandle ich die Symbole browserübergreifend so:</p> <pre><code class="block language-css"><span class="token comment">/* Originalsymbole vor den Summary entfernen und eigene Symbole definieren */</span> <span class="token selector">#sitenav summary::-webkit-details-marker</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#sitenav summary</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#sitenav details summary::after</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> arial_unicode_ms<span class="token punctuation">;</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#sitenav ul details:not([open]) > summary::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">' ►'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#sitenav ul details[open] > summary::after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">' ◄'</span><span class="token punctuation">;</span> </code></pre> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785197?srt=yes#m1785197 kai345 2021-03-03T15:42:50Z 2021-03-03T15:42:50Z Bild sensitiv machen <blockquote> <p>Ein Test mit einem aktuellen Opera und Safari wäre noch gut, kann das jemand tun?</p> </blockquote> <p><strong>Opera</strong> Windows:<br> <a href="/images/f240c51c-7c36-11eb-9384-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/f240c51c-7c36-11eb-9384-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a><br> <a href="/images/027cd0ec-7c37-11eb-b1b2-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/027cd0ec-7c37-11eb-b1b2-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <div class="signature">-- <br> Stur lächeln und winken, Männer! </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785222?srt=yes#m1785222 Gerrit 2021-03-04T13:34:58Z 2021-03-04T13:34:58Z Bild sensitiv machen <p>Hallo Rolf,<br> besten Dank für das Beispiel. Wenn es in den gängigsten Browsern läuft, so genügt dies mir am Anfang auch.<br> Ich finde solche Beispiele (für meine Herangehensweise) ideal.<br> 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.<br> Und ich kann dann gezielt nachschauen, was die einzelnen für mich unbekanten Elemente/Parameter bedeuten (learning ba doing). Schönen Gruß Gerrit</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785198?srt=yes#m1785198 Rolf B 2021-03-03T15:46:39Z 2021-03-03T16:03:17Z Bild sensitiv machen <p>Hallo JürgenB,</p> <blockquote> <p>Safari<br> zu: roter Pfeil nach rechts<br> offen: grüner Pfeil nach unten<br> Klick außerhalb des Elements: roter Pfeil nach unten</p> </blockquote> <p>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 <strong>oben</strong> sein und die Details schließen.</p> <p>Liegt das am verwendeten Font? Das Frickl verwendet Zeichen aus Plane 1 (Navigation Arrows):<br> - 1f871 - Pfeil nach oben<br> - 1f873 - Pfeil nach unten</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785225?srt=yes#m1785225 Rolf B 2021-03-04T14:22:00Z 2021-03-04T14:51:09Z Bild sensitiv machen <p>Hallo kai345,</p> <p>das ist natürlich total blöd - da sind die Open/Close Symbole gar nicht ersetzt worden. War das Opera 73 oder 74?</p> <p>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.</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785243?srt=yes#m1785243 kai345 2021-03-04T18:25:00Z 2021-03-04T18:25:00Z Bild sensitiv machen <blockquote> <p>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.</p> </blockquote> <p><strong>Opera 75 beta</strong> [Chromium 89]:</p> <p><a href="/images/6f4153ee-7d16-11eb-bb93-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/6f4153ee-7d16-11eb-bb93-b42e9947ef30.png?size=medium" alt="Ansicht in Opera75beta - zu" title="gechlossen/Opera75" loading="lazy"></a><br> <a href="/images/7877f030-7d16-11eb-94f0-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/7877f030-7d16-11eb-94f0-b42e9947ef30.png?size=medium" alt="Ansicht in Opera75beta - offen" title="geöffnet/Opera75" loading="lazy"></a></p> <div class="signature">-- <br> Stur lächeln und winken, Männer! </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785260?srt=yes#m1785260 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-03-05T06:14:01Z 2021-03-05T06:14:01Z Bild sensitiv machen <p>@@Gerrit</p> <blockquote> <p>Für mein "Erstlingswerk" hatte ich aus SELFHTML folgendes übernommen:</p> <pre><code class="block"><!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> </code></pre> </blockquote> <p>Kannst du uns die Stelle In SELFHTML sagen, von wo du das übernommen hast, damit das dort berichtigt werden kann?</p> <p>Es ist nämlich falsch: „Name unserer Seite“ ist nicht <code class="bad">h1</code>, sondern <code>p</code>.</p> <p>„Überschrift des Artikels“ ist auf der Seite die <code class="good">h1</code> – und davon sollte es nur eine geben. (Das h in <code>h1</code> steht für Highlander.)</p> <blockquote> <p>Kann ich, damit Dein Beispiel passt das <nav> in <article></article> oder etwas ähnliches einbetten und das CSS entsprechend abändern?</p> </blockquote> <p>In <code>article</code> wohl nicht, aber in <code>div</code> kannst du einbetten, was du willst. Warum solltest du das brauchen?</p> <blockquote> <p>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?</p> </blockquote> <p>So ist es. HTML-Elemente sind nicht wahllos, sondern genau ihrer Bestimmung nach zu verwenden.</p> <p>„Name unserer Seite“ gehört nicht ins <code>nav</code>-Element. Das Navigationsmenü gehört in ein <code>nav</code>-Element.</p> <p>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 <code>nav</code>-Element.</p> <p>Und ja, ein <code>button</code>-Element, das per JavaScript das Menü auf- und zumacht und entsprechende Attribute für die Barrierefreiheit setzt.</p> <p>S.a. <a href="https://codepen.io/gunnarbittersmann/pen/RwaMoWd" rel="noopener noreferrer">Beispiel</a> und Hinweise auf den <a href="https://speakerdeck.com/gunnarbittersmann/til-wie-man-ein-menu-serviert" rel="nofollow noopener noreferrer">Folien „TIL wie man ein Menü serviert“</a>.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785262?srt=yes#m1785262 Tabellenkalk 2021-03-05T06:47:22Z 2021-03-05T06:47:22Z Bild sensitiv machen <p>Hallo,</p> <p>es ist nicht einfach, sowas im Wiki zu finden, aber <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Seitenstrukturierung#So_sieht_das_fertige_Beispiel_aus:" rel="nofollow noopener noreferrer">hier</a> fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785266?srt=yes#m1785266 Rolf B 2021-03-05T07:25:53Z 2021-03-05T07:25:53Z Bild sensitiv machen <p>Hallo Gunnar,</p> <blockquote> <p>Und ja, ein button-Element, das per JavaScript das Menü auf- und zumacht</p> </blockquote> <p>Du widersprichst der Idee, ein Dropdown-Menü mit details/summary zu realisieren? Genau darum geht es hier doch.</p> <p>Du widersprichst damit auch dem Wiki-Artikel von Jürgen über eine zugängliche Dropdown-Navigation?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785263?srt=yes#m1785263 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-03-05T06:50:57Z 2021-03-05T06:50:57Z Bild sensitiv machen <p>Hallo Tabellenkalk,</p> <blockquote> <p>es ist nicht einfach, sowas im Wiki zu finden,</p> </blockquote> <p>in der Tat.</p> <p>aber <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Seitenstrukturierung#So_sieht_das_fertige_Beispiel_aus:" rel="nofollow noopener noreferrer">hier</a> fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…</p> <p>Ich habe werde es mal geändert haben.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785264?srt=yes#m1785264 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-03-05T06:54:45Z 2021-03-05T06:54:45Z Bild sensitiv machen <p>Hallo Matthias Apsel,</p> <blockquote> <p>aber <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Seitenstrukturierung#So_sieht_das_fertige_Beispiel_aus:" rel="nofollow noopener noreferrer">hier</a> fand ich ein Beispiel, das noch 2 h1-Elemente nutzt…</p> <p>Ich habe werde es mal geändert haben.</p> </blockquote> <p>Das Beispiel selbst war schon seit 2014 korrekt, zu einer Zeit also, als das vielleicht noch gar nicht korrekt war.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785284?srt=yes#m1785284 Gerrit 2021-03-05T10:54:21Z 2021-03-05T10:54:21Z Bild sensitiv machen <p>Hallo Ihr Lieben, jetzt bin ich aber total verwirrt! Welche Struktur und welche Art Dropdown-Menu ist "state of the art"? Gruß Gerrit</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785286?srt=yes#m1785286 Rolf B 2021-03-05T10:59:52Z 2021-03-05T11:00:59Z Bild sensitiv machen <p>Hallo Gerrit,</p> <p>ich bin's auch, darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.</p> <p>Also, erstmal Ruhe bewahren, wir diskutieren das aus </p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785287?srt=yes#m1785287 Gerrit 2021-03-05T11:09:19Z 2021-03-05T11:09:19Z Bild sensitiv machen <p>Hallo Rolf,<br> ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.<br> Gruß<br> Gerrit</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785292?srt=yes#m1785292 JürgenB https://www.j-berkemeier.de 2021-03-05T12:05:06Z 2021-03-05T12:05:06Z Bild sensitiv machen <p>Hallo Rolf,</p> <p>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%.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785309?srt=yes#m1785309 Gerrit 2021-03-06T11:24:17Z 2021-03-06T11:24:17Z Bild sensitiv machen <p>Hallo Rolf</p> <blockquote> <p>ich bin's auch, darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.</p> <p>Also, erstmal Ruhe bewahren, wir diskutieren das aus </p> </blockquote> <p>Hat sich Gunnar schon bei Dir gemeldet, hier ja noch nicht, oder seid Ihr noch tief in der Diskussion?<br> Schönen Gruß<br> Gerrit</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785288?srt=yes#m1785288 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-03-05T11:27:29Z 2021-03-05T11:27:29Z Bild sensitiv machen <p>Hallo Gerrit,</p> <blockquote> <p>ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.</p> </blockquote> <p>In den seltensten Fällen ist er wirklich <strong>selbst</strong> schuld.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785290?srt=yes#m1785290 Der Martin 2021-03-05T11:49:38Z 2021-03-05T11:49:38Z Bild sensitiv machen <p>Hallo,</p> <blockquote> <blockquote> <p>ich bin auch der Meinung, wer den IE nutzt, ist selber schuld.</p> </blockquote> <p>In den seltensten Fällen ist er wirklich <strong>selbst</strong> schuld.</p> </blockquote> <p>dem schließe ich mich an. Meist sind es wohl Vorgaben des eigenen Arbeitgebers.</p> <p>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<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>), 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.<br> Das kann man als Vorteil oder als Risiko kommunizieren, je nachdem, wo man gerade steht.</p> <p>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.</p> <p>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.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br> (mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung ) </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>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." <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785293?srt=yes#m1785293 JürgenB https://www.j-berkemeier.de 2021-03-05T12:16:38Z 2021-03-05T12:16:38Z Bild sensitiv machen <p>Hallo Martin,</p> <blockquote> <p>Meist sind es wohl Vorgaben des eigenen Arbeitgebers.</p> </blockquote> <p>oder veraltete System mit Windows 7 und weder Geld noch Hilfe, um da etwas dran zu ändern.</p> <p>Aber ich finde auch, schmuckloses Design und z.B. offene Details sind zumutbar. Die Seite bleibt ja bedienbar.</p> <p>Ü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.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785294?srt=yes#m1785294 Gerrit 2021-03-05T12:39:57Z 2021-03-05T12:39:57Z Bild sensitiv machen <p>Hallo,</p> <blockquote> <p>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."</p> </blockquote> <p>Ich war auch zufrieden mit Windows XP.<br> Ja man kann natürlich auf alles Rücksicht nehmen.<br> Und ich wünschte mir dies für mein nicht sehr altes Smartphone, auf dem die Corona-App nicht lauffähig ist.</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785295?srt=yes#m1785295 Der Martin 2021-03-05T12:45:52Z 2021-03-05T12:45:52Z Bild sensitiv machen <p>Hallo,</p> <blockquote> <blockquote> <p>Meist sind es wohl Vorgaben des eigenen Arbeitgebers.</p> </blockquote> <p>oder veraltete System mit Windows 7 und weder Geld noch Hilfe, um da etwas dran zu ändern.</p> </blockquote> <p>nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.</p> <p>Firefox fragt beim Setup sogar, ob er Daten eines bereits vorhandenen Browsers übernehmen soll (z.B. Bookmarks). Chrome bestimmt auch, oder?</p> <blockquote> <p>Aber ich finde auch, schmuckloses Design und z.B. offene Details sind zumutbar. Die Seite bleibt ja bedienbar.</p> </blockquote> <p>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.</p> <blockquote> <p>Ü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.</p> </blockquote> <p>Wohl wahr.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br> (mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung ) </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785297?srt=yes#m1785297 Rolf B 2021-03-05T12:55:18Z 2021-03-05T12:55:18Z Bild sensitiv machen <p>Hallo Martin,</p> <blockquote> <p>nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.</p> </blockquote> <p>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.</p> <p>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.</p> <p>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)</p> <p>Manche Dinge sind einfach gruselig.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785298?srt=yes#m1785298 Der Martin 2021-03-05T13:03:14Z 2021-03-05T13:03:14Z Bild sensitiv machen <p>Hallo,</p> <blockquote> <blockquote> <p>nein, das lasse ich nicht gelten. Sich einen Firefox oder Chrome herunterladen und installieren ist so einfach, dass das eigentlich jeder schaffen sollte.</p> </blockquote> <p>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.</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785290#m1785290" rel="noopener noreferrer">geh bitte nochmal einen Schritt zurück</a>. Ich sagte ganz bewusst: Wenn jemand den IE verwenden <em>muss</em>, ist das meistens eine vom Arbeitgeber verhängte Einschränkung.</p> <blockquote> <p>Manche Dinge sind einfach gruselig.</p> </blockquote> <p>Allerdings, ja.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Lasst uns ins Horn brechen und aufstoßen. Höchste Zeit, auf den Weg zu machen.<br> (mit freundlichem Dank an <a href="https://forum.selfhtml.org/self/2021/feb/20/telefonbuch-ruckwartssuche/1784617#m1784617" rel="noopener noreferrer">Tabellenkalk</a> für die Ergänzung ) </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785327?srt=yes#m1785327 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-03-06T14:19:17Z 2021-03-06T14:19:17Z Bild sensitiv machen <p>@@Gerrit</p> <blockquote> <p>darum habe ich Gunnar gespiegelt, wie ich seinen Beitrag verstanden habe, und rechne mit einer Stellungnahme von ihm.</p> <p>Hat sich Gunnar schon bei Dir gemeldet, hier ja noch nicht</p> </blockquote> <p>Der hat gerade <a href="https://cssbattle.dev/" rel="nofollow noopener noreferrer">andere Schlachten</a> zu schlagen. ⚔️</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785331?srt=yes#m1785331 Rolf B 2021-03-06T14:53:37Z 2021-03-06T14:53:37Z Bild sensitiv machen <p>Hallo Gerrit,</p> <blockquote> <p>bei Dir gemeldet</p> </blockquote> <p>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 </p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785335?srt=yes#m1785335 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-03-06T15:39:05Z 2021-03-06T15:39:05Z Bild sensitiv machen <p>@@Rolf B</p> <blockquote> <p>Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details" …</p> </blockquote> <p>Es gibt hier keine 24/7-Anwesenheitspflicht. Und ich lasse mir da kein schlechtes Gewissen einreden.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785336?srt=yes#m1785336 Tabellenkalk 2021-03-06T15:41:46Z 2021-03-06T15:41:46Z Bild sensitiv machen <p>Hallo,</p> <blockquote> <p>Es gibt hier keine 24/7-Anwesenheitspflicht.</p> </blockquote> <p>Ist das neu?</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785337?srt=yes#m1785337 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2021-03-06T16:48:06Z 2021-03-06T16:48:06Z Bild sensitiv machen <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <p>Aber wenn Gunnar die CSS-Battle wichtiger ist als eine kurze Stellungnahme zu "Button vs Details" …</p> </blockquote> <p>Es gibt hier keine 24/7-Anwesenheitspflicht. Und ich lasse mir da kein schlechtes Gewissen einreden.</p> </blockquote> <p>zu Ende lesen!</p> <blockquote> <blockquote> <p>Bei einem gravierenden Accessibility-Fehler hätte er sich sicherlich schon deutlicher geäußert.</p> </blockquote> </blockquote> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785344?srt=yes#m1785344 Gerrit 2021-03-06T17:44:57Z 2021-03-06T17:44:57Z Bild sensitiv machen <p>Hallo Gunnar, hallo Rolf,<br> ich wollte auch nicht drängeln!<br> Ich schaue einfach ab und zu noch einmal vorbei.<br> Gruß<br> Gerrit</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785543?srt=yes#m1785543 Gerrit 2021-03-09T14:15:11Z 2021-03-09T14:15:11Z Bild sensitiv machen <p>Hi,<br> ist Gunnar noch mit der CSS-Battle zugange?<br> Vielleicht kann mir jemand einen Tipp geben zu dem Problem:</p> <p><a href="https://jsfiddle.net/Gerrit1/z19px3ec/1/" rel="noopener noreferrer">Hier </a><br> schiebt sich der Seiteninhalt nach unten, wenn man auf "Menu" klickt.<br> Wie erreiche ich, dass das Auswahlmenu über die aktuelle Seite gelegt wird?<br> Gruß<br> Gerrit</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785545?srt=yes#m1785545 Rolf B 2021-03-09T14:22:57Z 2021-03-09T14:22:57Z Bild sensitiv machen <p>Hallo Gerrit,</p> <p>indem Du - wenn Du die Schachtelung der Elemente anders als in meinem Fiddle machst, auch das CSS entsprechend änderst.</p> <p>Die CSS Selektoren gehen von einer bestimmten Hierarchie der Elemente aus.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785546?srt=yes#m1785546 JürgenB https://www.j-berkemeier.de 2021-03-09T14:24:27Z 2021-03-09T14:24:27Z Bild sensitiv machen <p>Hallo,</p> <blockquote> <p><a href="https://jsfiddle.net/Gerrit1/z19px3ec/1/" rel="noopener noreferrer">Hier </a><br> schiebt sich der Seiteninhalt nach unten, wenn man auf "Menu" klickt.<br> Wie erreiche ich, dass das Auswahlmenu über die aktuelle Seite gelegt wird?</p> </blockquote> <p>im <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Dropdown-Navigation" rel="nofollow noopener noreferrer">Tutorial</a> 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.</p> <p>Details/summary würde z.B. im IE bei absoluter Positionierung den Inhalt überdecken. Ich teste aber gerade eine reine CSS-Abfrage mit</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span><span class="token property">width</span><span class="token punctuation">:</span> max-content<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* Nicht für IE und MS-Edge */</span> <span class="token selector">#sitenav</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#sitenav ul</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/mar/02/bild-sensitiv-machen/1785584?srt=yes#m1785584 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-03-09T19:47:34Z 2021-03-09T19:47:34Z Bild sensitiv machen <p>@@Gerrit</p> <blockquote> <p>ist Gunnar noch mit der CSS-Battle zugange?</p> </blockquote> <p><a href="https://twitter.com/css_battle/status/1369244096691249155" rel="nofollow noopener noreferrer">Aber ja. </a></p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div>