tag:forum.selfhtml.org,2005:/self Text sichtbar/unsichtbar – SELFHTML-Forum 2020-10-05T17:55:09Z https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776119#m1776119 Gerhard-Anfänger 2020-10-04T09:54:48Z 2020-10-04T10:31:34Z Text sichtbar/unsichtbar <p>Moin, bisher hatte ich folgendes HTML.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#id1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#id2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#id3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#id4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... </code></pre> <p>Dabei konnte man durch Scrollen alles ansehen. Nun möchte ich aber, dass bei einem Klick auf einen Link nur der zugehörige Text erscheint. Wie kann ich das realisieren?</p> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776121#m1776121 Der Martin 2020-10-04T10:10:02Z 2020-10-04T10:10:02Z Text sichtbar/unsichtbar <p>Hallo,</p> <blockquote> <p>bisher hatte ich folgendes HTML.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#id1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#id2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#id3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#id4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... </code></pre> </blockquote> <p>also den gesamten Inhalt auf einer einzigen Seite.</p> <blockquote> <p>Dabei konnte man durch Scrollen alles ansehen.<br> Nun möchte ich aber, dass bei einem Klick auf einen Link nur der zugehörige Text erscheint.<br> Wie kann ich das realisieren?</p> </blockquote> <p>Entweder "klassisch" durch Aufteilen in mehrere HTML-Dokumente und Verlinken des gesamten Dokuments. Dann brauchst du die IDs eventuell auch nicht mehr.</p> <p>Oder mit CSS und der Pseudoklasse :target (<a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target" rel="nofollow noopener noreferrer">Erklärung und Beispiel</a>).</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776126#m1776126 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-04T10:36:31Z 2020-10-04T10:36:31Z Text sichtbar/unsichtbar <p>@@Gerhard-Anfänger</p> <blockquote> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>id4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Abteilung4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> ......... </code></pre> </blockquote> <p>Fehler: <code>h1</code> sollte auf einer Webseite nur einmal vorkommen und den Seitentitel angeben. Deine Kapitelüberschriften sind dann <code>h2</code>.</p> <blockquote> <p>Nun möchte ich aber, dass bei einem Klick auf einen Link nur der zugehörige Text erscheint. Wie kann ich das realisieren?</p> </blockquote> <p>Mit einem Akkordeon: <em lang="en">Inclusive Components</em> > <a href="https://inclusive-components.design/collapsible-sections/" lang="en" rel="noopener noreferrer">Collapsible Sections</a></p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776182#m1776182 Gerhard-Anfänger 2020-10-04T17:51:18Z 2020-10-04T17:51:18Z Wilder Antwortdschungel <p>Hallo!<br> Ich bin frustriert!<br> Ist dies der Normalfall im Forum?<br> Könnte man wenigstens die Antworten markieren, die nichts zur Klärung beitragen.<br> Meine Fragen sind jedenfalls noch nicht zufriedenstellend beantwortet.</p> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776227#m1776227 Gerhard-Anfänger 2020-10-05T17:55:09Z 2020-10-05T17:55:09Z Text jetzt sichtbar/unsichtbar <p>@alle Helfer: Es ist vollbracht, danke!</p> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776127#m1776127 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-04T10:40:28Z 2020-10-04T10:40:28Z Text sichtbar/unsichtbar <p>@@Der Martin</p> <blockquote> <p>Oder mit CSS und der Pseudoklasse :target (<a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target" rel="nofollow noopener noreferrer">Erklärung und Beispiel</a>).</p> </blockquote> <p>Das Rumspringen der Seite sollte Grund genug sein, das nicht so zu machen.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776130#m1776130 Gerhard-Anfänger 2020-10-04T11:20:33Z 2020-10-04T11:20:33Z Text sichtbar/unsichtbar <p>Allerdings habe ich folgenden Effekt. Wenn ich :target im Html mit <style>....</style> definiere funktioniert es. Wenn ich die Definition in meine CSS-Datei lege, funktioniert es nicht. Die CSS-Datei wird auch korrekt eingebunden, was ich im erzeugten Source-Code sehen kann.</p> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776134#m1776134 Gerhard-Anfänger 2020-10-04T11:50:18Z 2020-10-04T11:50:18Z Text sichtbar/unsichtbar <blockquote> <p>@@Gerhard-Anfänger</p> </blockquote> <blockquote> <p>Mit einem Akkordeon: <em lang="en">Inclusive Components</em> > <a href="https://inclusive-components.design/collapsible-sections/" lang="en" rel="noopener noreferrer">Collapsible Sections</a></p> </blockquote> <p>Das ist für mich noch viel zu kompliziert.</p> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776135#m1776135 JürgenB https://www.j-berkemeier.de 2020-10-04T11:53:46Z 2020-10-04T11:53:46Z Text sichtbar/unsichtbar <p>Hallo Gunnar,</p> <blockquote> <blockquote> <p>Nun möchte ich aber, dass bei einem Klick auf einen Link nur der zugehörige Text erscheint. Wie kann ich das realisieren?</p> </blockquote> <p>Mit einem Akkordeon: <em lang="en">Inclusive Components</em> > <a href="https://inclusive-components.design/collapsible-sections/" lang="en" rel="noopener noreferrer">Collapsible Sections</a></p> </blockquote> <p>wäre details/summary nicht eine einfachere Lösung?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776128#m1776128 Der Martin 2020-10-04T11:17:38Z 2020-10-04T11:17:38Z Text sichtbar/unsichtbar <p>Hallo,</p> <blockquote> <blockquote> <p>Oder mit CSS und der Pseudoklasse :target (<a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target" rel="nofollow noopener noreferrer">Erklärung und Beispiel</a>).</p> </blockquote> <p>Das Rumspringen der Seite sollte Grund genug sein, das nicht so zu machen.</p> </blockquote> <p>als ich das Prinzip für eine Präsentation im Intranet vor einigen Monaten angewendet habe, ist da nichts rumgesprungen. Kern der Geschichte ist im Prinzip sowas:</p> <pre><code class="block language-css"><span class="token selector">main > :not(:target)</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> </code></pre> <p>Die Negation sorgt neben der einleuchtenden Semantik ("blende alles aus, was <em>nicht</em> Target ist") auch dafür, dass weniger begabte Browser, die :target nicht kennen, wenigstens ersatzweise <em>alle</em> Inhalts-Container anzeigen.</p> <p>Die UX ist genau dieselbe, als würde man konventionell auf eine neue Seite verlinken. Nur ohne Verzögerung. Wenn da bei dir was rumspringt, solltest du vielleicht den Hund an die Leine nehmen oder die Ziege anpflocken.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776129#m1776129 Gerhard-Anfänger 2020-10-04T11:18:10Z 2020-10-04T11:18:10Z Text sichtbar/unsichtbar <p>Das "Herumspringen" stört mich nicht.</p> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776150#m1776150 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-04T13:14:24Z 2020-10-04T13:14:24Z Text sichtbar/unsichtbar <p>@@Der Martin</p> <blockquote> <p>Wenn da bei dir was rumspringt, solltest du vielleicht den Hund an die Leine nehmen oder die Ziege anpflocken.</p> </blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/OJNKwwJ" rel="noopener noreferrer"><em>Und sie bewegt sich doch!</em></a></p> <p>Meinem Hund geht’s gut, meiner Ziege auch. Wie geht’s deinen Augen? </p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776209#m1776209 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-05T10:03:35Z 2020-10-05T10:03:35Z Text sichtbar/unsichtbar <p>@@Der Martin</p> <blockquote> <pre><code class="block language-css"><span class="token selector">main > :not(:target)</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> </code></pre> <p>Die UX ist genau dieselbe, als würde man konventionell auf eine neue Seite verlinken.</p> </blockquote> <p>Nein, nicht die <em lang="en">user experience</em>, sondern die <em lang="en"><strong>some</strong> user experience</em> – SUX.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>Bekommt denn ein Screenreader die Veränderung der Sichtbarkeit mit und liest den jeweiligen Text vor?</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Credits: <a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Bill Gregory</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776138#m1776138 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-04T12:01:01Z 2020-10-04T12:01:01Z Text sichtbar/unsichtbar <p>@@JürgenB</p> <blockquote> <p>wäre details/summary nicht eine einfachere Lösung?</p> </blockquote> <p>Ja, da war ich auch gerade am Basteln. Bloß noch schnell die „alle öffnen“-/„alle schließen“-Buttons hinzugefügt ☞ <a href="https://codepen.io/gunnarbittersmann/pen/oNxKyrp" rel="noopener noreferrer">Guckst du.</a></p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776141#m1776141 Gerhard-Anfänger 2020-10-04T12:12:15Z 2020-10-04T12:12:15Z Text sichtbar/unsichtbar <p>So soll es nicht sein:</p> <p>`Artikel 1</p> <p>Alle Menschen sind frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.<br> Artikel 2<br> Artikel 3`</p> <p>sondern</p> <p>`Artikel 1<br> Artikel 2<br> Artikel 3</p> <p><strong>Artikel1</strong><br> Alle Menschen sind frei und gleich an Würde und Rechten geboren. Sie sind mit Vernunft und Gewissen begabt und sollen einander im Geiste der Brüderlichkeit begegnen.<br> `</p> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776207#m1776207 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-05T09:14:26Z 2020-10-05T09:14:26Z Text sichtbar/unsichtbar <p>@@Gerhard-Anfänger</p> <blockquote> <p>So soll es nicht sein: … sondern …</p> </blockquote> <p>Dann willst du kein Akkordeon, sondern – was ebenfalls in den <a href="https://inclusive-components.design/tabbed-interfaces/" lang="en" rel="noopener noreferrer"><em>Inclusive Components</em></a> zu finden ist – ein <a href="https://inclusive-components.design/tabbed-interfaces/" lang="en" rel="noopener noreferrer">Tabbed Interface</a>. (Ob die Tab-Liste nun horizontal oder vertikal ist, ändert an der Art der Komponente nichts.)</p> <p>Auch dafür gilt vermutlich: „Das ist für mich noch viel zu kompliziert.“</p> <p>Entweder lernen oder nicht deine bevorzugte Lösung umsetzen, sondern eine, die auch funktioniert, aber einfach zu implementieren ist, wie eben <a href="https://codepen.io/gunnarbittersmann/pen/oNxKyrp" rel="noopener noreferrer">die mit <code>details</code>/<code>summary</code></a>.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776152#m1776152 Der Martin 2020-10-04T13:25:49Z 2020-10-04T13:25:49Z Text sichtbar/unsichtbar <p>Hallo,</p> <blockquote> <blockquote> <p>Wenn da bei dir was rumspringt, solltest du vielleicht den Hund an die Leine nehmen oder die Ziege anpflocken.</p> </blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/OJNKwwJ" rel="noopener noreferrer"><em>Und sie bewegt sich doch!</em></a></p> </blockquote> <p>natürlich bewegt sich da was: Die Anzeige scrollt zum gewählten Ziel hin. Einmal! Das ist ja Teil des gewünschten Verhaltens. Unter "Rumspringen" verstehe ich z.B. das unruhige Verhalten allzu flexibler Layouts, wenn während des Seitenaufbaus die Bilder so allmählich nachgekleckert kommen, und jedes Bild eine Neuordnung des Inhalts bewirkt. Oder wenn bei :hover Schriftgröße und/oder -stärke geändert wird und der umgebende Text dadurch zappelt.</p> <p>Wenn die gesamte Seite kurz genug oder das Browserfenster groß genug ist, dass sie vollständig (ohne Scrollen) sichtbar ist, merkt man aber auch das Scrollen zum Zielanker nicht.</p> <blockquote> <p>Meinem Hund geht’s gut, meiner Ziege auch. Wie geht’s deinen Augen? </p> </blockquote> <p>Kann nicht klagen. Gegen Kurzsichtigkeit gibt's ja Brillen.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776154#m1776154 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-04T13:37:57Z 2020-10-04T14:20:43Z Text sichtbar/unsichtbar <p>@@Gunnar Bittersmann</p> <blockquote> <p>Meinem Hund geht’s gut, meiner Ziege auch.</p> </blockquote> <p><a href="https://www.youtube.com/watch?v=1V3ZY_TXKwU" lang="ru" rel="nofollow noopener noreferrer">Смотри!</a> </p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776208#m1776208 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-05T09:28:38Z 2020-10-05T09:28:38Z Text sichtbar/unsichtbar <p>@@Der Martin</p> <blockquote> <blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/OJNKwwJ" rel="noopener noreferrer"><em>Und sie bewegt sich doch!</em></a></p> </blockquote> <p>natürlich bewegt sich da was: Die Anzeige scrollt zum gewählten Ziel hin. Einmal!</p> </blockquote> <p>Hapert’s am Kucken oder am Zählen? </p> <p>Click auf „Artikel 29“ – das Menü springt nach oben raus.</p> <p>Click auf „Artikel 30“ – das Menü springt wieder runter.</p> <blockquote> <p>Das ist ja Teil des gewünschten Verhaltens.</p> </blockquote> <p>Nö. Das ist Teil des wohl inakzeptablen Verhaltens.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776156#m1776156 Der Martin 2020-10-04T13:53:25Z 2020-10-04T14:20:56Z Text sichtbar/unsichtbar <p>Hallo Gunnar,</p> <blockquote> <blockquote> <p>Meinem Hund geht’s gut, meiner Ziege auch.</p> </blockquote> <p><a href="https://www.youtube.com/watch?v=1V3ZY_TXKwU" lang="ru" rel="nofollow noopener noreferrer">Смотри!</a> </p> </blockquote> <p>Понятно.<br> Okay, ich verstehe kein Wort, aber zumindest die Verbindung.<br> <a href="https://www.deepl.com/translator#de/ru/Armer%20B%C3%A4r!" rel="nofollow noopener noreferrer">Бедный медведь</a>!</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776165#m1776165 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-04T14:32:18Z 2020-10-04T15:55:39Z Text sichtbar/unsichtbar <p>@@Der Martin</p> <blockquote> <blockquote> <blockquote> <p>Meinem Hund geht’s gut, meiner Ziege auch.</p> </blockquote> <p><a href="https://www.youtube.com/watch?v=1V3ZY_TXKwU" lang="ru" rel="nofollow noopener noreferrer">Смотри!</a> </p> </blockquote> <p>Понятно.<br> Okay, ich verstehe kein Wort</p> </blockquote> <p>Gibt’s auch <a href="https://www.youtube.com/watch?v=FHbOvYrjDOs" rel="nofollow noopener noreferrer">auf deutsch</a>. Find ich aber schrecklich. Die Synchronstimme passt überhaupt nicht zu Mascha. Die <a href="https://www.youtube.com/watch?v=tqqhZ8Fsseg" rel="nofollow noopener noreferrer">englische Stimme</a> trifft’s da schon besser.</p> <p>Intersessant übrigens, dass die Beschriftung für die englische Fassung geändert wurde: „Москва – Пекин“ zu „Moscow – Alaska“. Hunh? „Beijing“ kann man dem angelsächsischen Publikum nicht zumuten?</p> <p>Für die deutsche Fassung wurde die englische zugrundegelegt. Kyrillische Buchstaben kann man dem deutschen Publikum nicht zumuten?</p> <blockquote> <p>aber zumindest die Verbindung.</p> </blockquote> <p>Ja, an den allermeisten Folgen hat man seinen Spaß auch ohne Russisch zu verstehen.</p> <blockquote> <p><a href="https://www.deepl.com/translator#de/ru/Armer%20B%C3%A4r!" rel="nofollow noopener noreferrer">Бедный медведь</a>!</p> </blockquote> <p>Das konnte ich verstehen, weil’s auf polnisch auch <em lang="pl">biedny</em> heißt. Beim Bären ist aus dem M ein N geworden: <em lang="pl">niedźwiedź</em>.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776175#m1776175 Der Martin 2020-10-04T15:51:00Z 2020-10-04T15:51:00Z Text sichtbar/unsichtbar <p>Hi,</p> <blockquote> <p>Intersessant übrigens, dass die Beschriftung für die englische Fassung geändert wurde: „Москва - Пекин“ zu „Moscow – Alaska“. Hunh? „Beijing“ kann man dem angelsächsischen Publikum nicht zumuten?</p> </blockquote> <p>anscheinend nicht ...</p> <p>Aber im Disney/Pixar-Film <strong>WALL-E</strong> wird etwas ganz Ähnliches getan: Die Tafeln mit Werbeplakaten, die in der Anfangsphase ab und zu ins Bild kommen, sind in der deutschen sowie der türkischen Synchronfassung auch <em>bildlich</em> in die jeweilige Sprache übersetzt. Ebenso ein Zeitungsfetzen, den WALL-E in einer Szene überrollt.</p> <p>Mir ist das aufgefallen, als ich den Film von DVD zu mp4 eindampfen und dabei die englische <em>und</em> die deutsche Tonspur mitnehmen wollte: Im ersten Arbeitsgang Video mit englischer Tonspur extrahiert, im zweiten Arbeitsgang nur die deutsche Tonspur. Als ich alles wieder zusammenmuxen wollte , stellte ich fest, dass die Länge um ein paar Zehntelsekunden unterschiedlich war. Also musste ich erst noch "basteln".</p> <blockquote> <p>Für die deutsche Fassung wurde die englische zugrundegelegt. Kyrillische Buchstaben kann man dem deutschen Publikum nicht zumuten?</p> </blockquote> <p>Anscheinend nicht ...</p> <blockquote> <blockquote> <p>aber zumindest die Verbindung.</p> </blockquote> <p>Ja, an den allermeisten Folgen hat man seinen Spaß auch ohne Russisch zu verstehen.</p> </blockquote> <p>Das auch, aber das meinte ich nicht. Ich meinte: Ich verstehe, wie du von Hund und Ziege zu Mascha gelangt bist.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776177#m1776177 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-04T16:27:32Z 2020-10-05T06:23:22Z Text sichtbar/unsichtbar <p>@@Der Martin</p> <blockquote> <p>Aber im Disney/Pixar-Film <strong>WALL-E</strong> wird etwas ganz Ähnliches getan: Die Tafeln mit Werbeplakaten, die in der Anfangsphase ab und zu ins Bild kommen, sind in der deutschen sowie der türkischen Synchronfassung auch <em>bildlich</em> in die jeweilige Sprache übersetzt. Ebenso ein Zeitungsfetzen, den WALL-E in einer Szene überrollt.</p> </blockquote> <p>Wurde das in <em>Zootopia</em> auch gemacht, der in einigen Regionen <em>Zootropolis</em> heißt?</p> <p>Den deutschen Titel <em>Zoomania</em> finde ich völlig bescheuert; der geht total am Sinn des Films vorbei.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776201#m1776201 Auge 2020-10-05T07:16:05Z 2020-10-05T07:16:05Z Text sichtbar/unsichtbar <p>Hallo</p> <blockquote> <p>Aber im Disney/Pixar-Film <strong>WALL-E</strong> wird etwas ganz Ähnliches getan: Die Tafeln mit Werbeplakaten, die in der Anfangsphase ab und zu ins Bild kommen, sind in der deutschen sowie der türkischen Synchronfassung auch <em>bildlich</em> in die jeweilige Sprache übersetzt. Ebenso ein Zeitungsfetzen, den WALL-E in einer Szene überrollt.</p> </blockquote> <p>Das wird in den neueren Simpsons-Staffeln auch so gehandhabt. In älteren Staffeln werden, gerade bei längeren Texten hilfreich, noch Untertitel mit den Übersetzungen, zum Beispiel unter dem Schild vor der Kirche mit der Losung der Woche, eingeblendet. Heutzutage ersetzen die deutschen Texte die englischen Originaltexte „vor Ort“. Das klappt manchmal gut, manchmal entstellt das aber auch einen Gag, der mit dem Originaltext in Zusammenhang steht.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776178#m1776178 Der Martin 2020-10-04T16:49:36Z 2020-10-04T16:49:36Z Text sichtbar/unsichtbar <p>Hallo,</p> <blockquote> <blockquote> <p>Aber im Disney/Pixar-Film <strong>WALL-E</strong> wird etwas ganz Ähnliches getan: Die Tafeln mit Werbeplakaten, die in der Anfangsphase ab und zu ins Bild kommen, sind in der deutschen sowie der türkischen Synchronfassung auch <em>bildlich</em> in die jeweilige Sprache übersetzt. Ebenso ein Zeitungsfetzen, den WALL-E in einer Szene überrollt.</p> </blockquote> <p>Wurde das in <em>Zootopia</em> auch gemacht</p> </blockquote> <p>keine Ahnung, den kenne ich nicht. Ich vermute aber <em>nein</em>, denn ich finde in der IMDB zwar <a href="https://www.imdb.com/title/tt2948356/mediaindex?refine=still_frame" rel="nofollow noopener noreferrer">eine Menge Standbilder aus dem Film</a>, aber keins mit Schrift.</p> <blockquote> <p>der in einigen Regionen <em>Zootropolis</em> heißt?</p> </blockquote> <p><a href="https://en.wikipedia.org/wiki/Zootopia" rel="nofollow noopener noreferrer">Ja, in UK</a>.</p> <blockquote> <p>Den deutschen Titel <em>Zoomania</em> finde ich völiig bescheuert; der geht total am Sinn des Fils vorbei.</p> </blockquote> <p>Die deutsche Wikipedia hat noch ein paar <a href="https://de.wikipedia.org/wiki/Zoomania#Alternativtitel" rel="nofollow noopener noreferrer">Ausreden dazu</a>.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776180#m1776180 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-04T17:16:24Z 2020-10-04T17:16:24Z Text sichtbar/unsichtbar <p>@@Der Martin</p> <blockquote> <blockquote> <p><em>Zootopia</em></p> </blockquote> <p>keine Ahnung, den kenne ich nicht.</p> </blockquote> <p>Solltest du bei Gelegenheit mal nachholen. Nicht nur für Kinder gemacht; auch Erwachsene können da durchaus interessante Themen drin finden (wenn auch vielleicht andere als Kinder): Freundschaft, Rassismus, Drogen, … die <em>Utopie</em>, dass alle Menschen friedlich zusammenleben (daher der Titel).</p> <p>Das ist der Vorteil, wenn man Kinder hat: Da kriegt man so’ne Filme mit. Auch <a href="https://de.wikipedia.org/wiki/Alles_steht_Kopf" rel="nofollow noopener noreferrer"><em>Inside Out</em></a> ist sehr sehenswert. (Der deutsche Titel <em>Alles steht Kopf</em> ist OK.)</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776183#m1776183 Der Martin 2020-10-04T18:09:16Z 2020-10-04T18:17:11Z Wilder Antwortdschungel <p>Hallo Gerhard,</p> <blockquote> <p>Ich bin frustriert!<br> Ist dies der Normalfall im Forum?</p> </blockquote> <p>was denn? Nebenhandlungen, so wie hier gerade zwischen Gunnar und mir? Ja, völlig normal.</p> <blockquote> <p>Könnte man wenigstens die Antworten markieren, die nichts zur Klärung beitragen.</p> </blockquote> <p>Fällt es dir so schwer, einen Seitenast im Thread-Baum einfach zu ignorieren?</p> <blockquote> <p>Meine Fragen sind jedenfalls noch nicht zufriedenstellend beantwortet.</p> </blockquote> <p>Du hast eine Menge Anregungen bekommen.</p> <p>EDIT: Und von Gunnar sogar ein funktionstüchtig aufgebautes Beispiel für meinen Ansatz, das du als Grundlage nehmen könntest. /EDIT</p> <p>Wenn dabei noch etwas unklar ist (und das wäre sicher nicht überraschend), dann gehe auf das jeweilige Posting ein und stelle gezielte Rückfragen. So, dass auch den Experten klar wird, wo dein Verständnisproblem liegt.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776184#m1776184 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-04T18:15:47Z 2020-10-04T18:16:06Z Wilder Antwortdschungel <p>@@Gerhard-Anfänger</p> <blockquote> <p>Ist dies der Normalfall im Forum?</p> </blockquote> <p><a href="https://forum.selfhtml.org/cites/1469#content" rel="noopener noreferrer">Ja.</a></p> <blockquote> <p>Könnte man wenigstens die Antworten markieren, die nichts zur Klärung beitragen.</p> </blockquote> <p>Das sind sie doch schon längst. Die mit <strong>menschelei</strong> getaggten Postings haben nichts mehr mit deinem Problem zu tun.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776204#m1776204 Gerhard-Anfänger 2020-10-05T08:22:47Z 2020-10-05T08:40:30Z Wilder Antwortdschungel <p>Hallo,</p> <blockquote> <p>EDIT: Und von Gunnar sogar ein funktionstüchtig aufgebautes Beispiel für meinen Ansatz, das du als Grundlage nehmen könntest. /EDIT</p> </blockquote> <p>Dazu habe ich aber geschrieben, dass sein Beispiel (<a href="https://codepen.io/gunnarbittersmann/pen/oNxKyrp" rel="noopener noreferrer">https://codepen.io/gunnarbittersmann/pen/oNxKyrp</a>) nicht das von mir gewünschte liefert.<br> Er:<br> Artikel1<br> .... Text ....<br> Artikel2<br> Artikel3</p> <p>Ich:<br> Artikel2<br> Artikel3</p> <p>.... Text zu Artikel n</p> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776202#m1776202 Der Martin 2020-10-05T07:32:58Z 2020-10-05T07:32:58Z Text sichtbar/unsichtbar <p>Moin,</p> <blockquote> <blockquote> <p>Aber im Disney/Pixar-Film <strong>WALL-E</strong> wird etwas ganz Ähnliches getan: Die Tafeln mit Werbeplakaten, die in der Anfangsphase ab und zu ins Bild kommen, sind in der deutschen sowie der türkischen Synchronfassung auch <em>bildlich</em> in die jeweilige Sprache übersetzt. Ebenso ein Zeitungsfetzen, den WALL-E in einer Szene überrollt.</p> </blockquote> <p>Das wird in den neueren Simpsons-Staffeln auch so gehandhabt. In älteren Staffeln werden, gerade bei längeren Texten hilfreich, noch Untertitel mit den Übersetzungen, zum Beispiel unter dem Schild vor der Kirche mit der Losung der Woche, eingeblendet.</p> </blockquote> <p>ja, die Untertitel-Lösung ist trivial. Das wird ja auch im Fernsehen bei vielen Hollywood-Filmen gemacht. Manchmal so ausgiebig, dass es schon lästig ist. Wenn man Glück hat, ist es wirklich ein separater Untertitel-Stream, den man im Mitschnitt dann einfach weglassen kann. Aber manchmal werden diese Einblendungen auch tatsächlich ins Videomaterial "eingebrannt".</p> <blockquote> <p>Heutzutage ersetzen die deutschen Texte die englischen Originaltexte „vor Ort“.</p> </blockquote> <p>Und da frage ich mich: Warum dieser Mehraufwand? Das bedeutet immerhin, dass man sämtliche Szenen, in denen Texte irgendwo zu sehen sind, mehrfach drehen oder produzieren muss. Bei Animationsfilmen, die zum Großteil durch Computer gerendert werden, okay. Aber bei Realfilmen? Cui bono?</p> <blockquote> <p>Das klappt manchmal gut, manchmal entstellt das aber auch einen Gag, der mit dem Originaltext in Zusammenhang steht.</p> </blockquote> <p>Ja, das ist bei Übersetzungen allgemein schwierig. Wortwitz bleibt oft auf der Strecke; der Übersetzer muss schon echt ein Genie sein, um das angemessen wiederzugeben.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776203#m1776203 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2020-10-05T07:50:08Z 2020-10-05T07:50:08Z Text sichtbar/unsichtbar <p>Hallo Der Martin,</p> <blockquote> <p>Ja, das ist bei Übersetzungen allgemein schwierig. Wortwitz bleibt oft auf der Strecke;</p> </blockquote> <p>Sowas zum Beispiel:<br> +++ Donald und Melania Trump positiv auf Corona getestet: Wir wünschen Biden alles Gute +++<br> <a href="https://t.co/GGu2N9whDp" rel="nofollow noopener noreferrer">https://t.co/GGu2N9whDp</a></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/2020/oct/04/text-sichtbar-unsichtbar/1776205#m1776205 Der Martin 2020-10-05T08:39:04Z 2020-10-05T08:39:04Z Wilder Antwortdschungel <p>Moin,</p> <blockquote> <blockquote> <p>EDIT: Und von Gunnar sogar ein funktionstüchtig aufgebautes Beispiel für meinen Ansatz, das du als Grundlage nehmen könntest. /EDIT</p> </blockquote> <p>Dazu habe ich aber geschrieben, dass sein Beispiel (https://codepen.io/gunnarbittersmann/pen/oNxKyrp) nicht das von mir gewünschte liefert.</p> </blockquote> <p>tatsächlich nicht?</p> <blockquote> <p>Er:<br> Artikel1<br> .... Text ....<br> Artikel2<br> Artikel3</p> </blockquote> <p>Nein.</p> <blockquote> <p>Ich:<br> Artikel2<br> Artikel3</p> <p>.... Text zu Artikel n</p> </blockquote> <p>Genau das liefert Gunnars Codepen-Beispiel bei mir.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776206#m1776206 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-05T08:49:02Z 2020-10-05T08:49:02Z Wilder Antwortdschungel <p>@@Der Martin</p> <blockquote> <blockquote> <p>Dazu habe ich aber geschrieben, dass sein Beispiel (https://codepen.io/gunnarbittersmann/pen/oNxKyrp) nicht das von mir gewünschte liefert.</p> </blockquote> <p>tatsächlich nicht?</p> </blockquote> <p>Nein. Gerhard-Anfänger bezog sich auf das <a href="https://codepen.io/gunnarbittersmann/pen/oNxKyrp" rel="noopener noreferrer">Akkordeon mit <code>details</code>/<code>summary</code></a> …</p> <blockquote> <p>Genau das liefert Gunnars Codepen-Beispiel bei mir.</p> </blockquote> <p>… du beziehst dich auf die <a href="https://codepen.io/gunnarbittersmann/pen/OJNKwwJ" rel="noopener noreferrer">Geschichte mit <code>:not(:target)</code></a> mit der mieserablen UX.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776212#m1776212 Der Martin 2020-10-05T10:29:35Z 2020-10-05T10:29:35Z Text sichtbar/unsichtbar <p>Hallo,</p> <blockquote> <blockquote> <blockquote> <p><a href="https://codepen.io/gunnarbittersmann/pen/OJNKwwJ" rel="noopener noreferrer"><em>Und sie bewegt sich doch!</em></a></p> </blockquote> <p>natürlich bewegt sich da was: Die Anzeige scrollt zum gewählten Ziel hin. Einmal!</p> </blockquote> <p>Hapert’s am Kucken oder am Zählen? </p> </blockquote> <p>bei dir wohl am Zählen.</p> <blockquote> <p>Click auf „Artikel 29“ – das Menü springt nach oben raus.</p> </blockquote> <p>Ja. <strong>Einmal</strong>. Weil der Browser versucht, das Linkziel (die Überschrift) am oberen Fensterrand zu positionieren. Nur ist der folgende Absatz so kurz, dass er die Überschrift nicht ganz so weit "hochziehen" kann. Diesen Effekt hättest du auch mit gewöhnlichen seiteninternen Links. Auch ohne das Gedöns mit :target.</p> <blockquote> <p>Click auf „Artikel 30“ – das Menü springt wieder runter.</p> </blockquote> <p>Ja. <strong>Einmal</strong>. Weil der Artikel 30 <em>noch</em> kürzer ist als der 29.</p> <blockquote> <blockquote> <p>Das ist ja Teil des gewünschten Verhaltens.</p> </blockquote> <p>Nö. Das ist Teil des wohl inakzeptablen Verhaltens.</p> </blockquote> <p>Da haben wir wohl unterschiedliche Ansichten.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776213#m1776213 Der Martin 2020-10-05T10:31:32Z 2020-10-05T10:31:32Z Text sichtbar/unsichtbar <p>Hallo,</p> <blockquote> <p>Bekommt denn ein Screenreader die Veränderung der Sichtbarkeit mit und liest den jeweiligen Text vor?</p> </blockquote> <p>keine Ahnung. Wer's wissen möchte (oder wer's wissen <em>sollte</em>), möge es testen.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776225#m1776225 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-05T16:59:03Z 2020-10-05T16:59:03Z Text sichtbar/unsichtbar <p>@@Der Martin</p> <blockquote> <blockquote> <p>Click auf „Artikel 29“ – das Menü springt nach oben raus.</p> </blockquote> <p>Ja. <strong>Einmal</strong>. Weil der Browser …</p> <blockquote> <p>Click auf „Artikel 30“ – das Menü springt wieder runter.</p> </blockquote> <p>Ja. <strong>Einmal</strong>. Weil der Artikel …</p> </blockquote> <p>Also <strong>jedesmal</strong>. Bei jeder Nutzerinteraktion hüpft der Seiteninhalt hoch und runter – die Nutzer (m/w/d) verlieren die Orientierung.</p> <p>So sollte man das nicht machen.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776217#m1776217 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-10-05T11:31:33Z 2020-10-05T11:31:33Z Text sichtbar/unsichtbar <p>@@Der Martin</p> <blockquote> <blockquote> <p>Bekommt denn ein Screenreader die Veränderung der Sichtbarkeit mit und liest den jeweiligen Text vor?</p> </blockquote> <p>keine Ahnung. Wer's wissen möchte (oder wer's wissen <em>sollte</em>)</p> </blockquote> <p>Also alle Entwickler.</p> <blockquote> <p>möge es testen.</p> </blockquote> <p>Hab ich: VoiceOver bleibt stumm.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div>