tag:forum.selfhtml.org,2005:/selfText sichtbar/unsichtbar – SELFHTML-Forum2020-10-05T17:55:09Zhttps://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776119#m1776119Gerhard-Anfänger2020-10-04T09:54:48Z2020-10-04T10:31:34ZText 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#m1776121Der Martin2020-10-04T10:10:02Z2020-10-04T10:10:02ZText 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#m1776126Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-04T10:36:31Z2020-10-04T10:36:31ZText 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#m1776182Gerhard-Anfänger2020-10-04T17:51:18Z2020-10-04T17:51:18ZWilder 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#m1776227Gerhard-Anfänger2020-10-05T17:55:09Z2020-10-05T17:55:09ZText jetzt sichtbar/unsichtbar<p>@alle Helfer:
Es ist vollbracht, danke!</p>
https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776127#m1776127Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-04T10:40:28Z2020-10-04T10:40:28ZText 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#m1776130Gerhard-Anfänger2020-10-04T11:20:33Z2020-10-04T11:20:33ZText 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#m1776134Gerhard-Anfänger2020-10-04T11:50:18Z2020-10-04T11:50:18ZText 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#m1776135JürgenBhttps://www.j-berkemeier.de2020-10-04T11:53:46Z2020-10-04T11:53:46ZText 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#m1776128Der Martin2020-10-04T11:17:38Z2020-10-04T11:17:38ZText 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#m1776129Gerhard-Anfänger2020-10-04T11:18:10Z2020-10-04T11:18:10ZText sichtbar/unsichtbar<p>Das "Herumspringen" stört mich nicht.</p>
https://forum.selfhtml.org/self/2020/oct/04/text-sichtbar-unsichtbar/1776150#m1776150Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-04T13:14:24Z2020-10-04T13:14:24ZText 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#m1776209Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-05T10:03:35Z2020-10-05T10:03:35ZText 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#m1776138Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-04T12:01:01Z2020-10-04T12:01:01ZText 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#m1776141Gerhard-Anfänger2020-10-04T12:12:15Z2020-10-04T12:12:15ZText 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#m1776207Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-05T09:14:26Z2020-10-05T09:14:26ZText 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#m1776152Der Martin2020-10-04T13:25:49Z2020-10-04T13:25:49ZText 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#m1776154Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-04T13:37:57Z2020-10-04T14:20:43ZText 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#m1776208Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-05T09:28:38Z2020-10-05T09:28:38ZText 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#m1776156Der Martin2020-10-04T13:53:25Z2020-10-04T14:20:56ZText 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#m1776165Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-04T14:32:18Z2020-10-04T15:55:39ZText 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#m1776175Der Martin2020-10-04T15:51:00Z2020-10-04T15:51:00ZText 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#m1776177Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-04T16:27:32Z2020-10-05T06:23:22ZText 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#m1776201Auge2020-10-05T07:16:05Z2020-10-05T07:16:05ZText 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#m1776178Der Martin2020-10-04T16:49:36Z2020-10-04T16:49:36ZText 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#m1776180Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-04T17:16:24Z2020-10-04T17:16:24ZText 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#m1776183Der Martin2020-10-04T18:09:16Z2020-10-04T18:17:11ZWilder 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#m1776184Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-04T18:15:47Z2020-10-04T18:16:06ZWilder 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#m1776204Gerhard-Anfänger2020-10-05T08:22:47Z2020-10-05T08:40:30ZWilder 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#m1776202Der Martin2020-10-05T07:32:58Z2020-10-05T07:32:58ZText 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#m1776203Matthias Apselmatthias.apsel@selfhtml.orghttps://brückentage.info2020-10-05T07:50:08Z2020-10-05T07:50:08ZText 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#m1776205Der Martin2020-10-05T08:39:04Z2020-10-05T08:39:04ZWilder 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#m1776206Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-05T08:49:02Z2020-10-05T08:49:02ZWilder 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#m1776212Der Martin2020-10-05T10:29:35Z2020-10-05T10:29:35ZText 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#m1776213Der Martin2020-10-05T10:31:32Z2020-10-05T10:31:32ZText 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#m1776225Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-05T16:59:03Z2020-10-05T16:59:03ZText 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#m1776217Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2020-10-05T11:31:33Z2020-10-05T11:31:33ZText 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>