Text sichtbar/unsichtbar

[Gerhard-Anfänger]

Moin, bisher hatte ich folgendes HTML.

<ul>  
   <li><a href="#id1">Abteilung1</a></li>  
   <li><a href="#id2">Abteilung2</a></li>  
   <li><a href="#id3">Abteilung3</a></li>  
   <li><a href="#id4">Abteilung4</a></li>  
</ul>  

<h1 id="id1">Abteilung1</h1>  
.........

<h1 id="id2">Abteilung2</h1>  
.........

<h1 id="id3">Abteilung3</h1>  
.........

<h1 id="id4">Abteilung4</h1>  
.........

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?

[Der Martin]

Hallo,

bisher hatte ich folgendes HTML.

<ul>  
   <li><a href="#id1">Abteilung1</a></li>  
   <li><a href="#id2">Abteilung2</a></li>  
   <li><a href="#id3">Abteilung3</a></li>  
   <li><a href="#id4">Abteilung4</a></li>  
</ul>  

<h1 id="id1">Abteilung1</h1>  
.........

<h1 id="id2">Abteilung2</h1>  
.........

<h1 id="id3">Abteilung3</h1>  
.........

<h1 id="id4">Abteilung4</h1>  
.........

also den gesamten Inhalt auf einer einzigen Seite.

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?

Entweder "klassisch" durch Aufteilen in mehrere HTML-Dokumente und Verlinken des gesamten Dokuments. Dann brauchst du die IDs eventuell auch nicht mehr.

Oder mit CSS und der Pseudoklasse :target (Erklärung und Beispiel).

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Oder mit CSS und der Pseudoklasse :target (Erklärung und Beispiel).

Das Rumspringen der Seite sollte Grund genug sein, das nicht so zu machen.

😷 LLAP

[Der Martin]

Hallo,

Oder mit CSS und der Pseudoklasse :target (Erklärung und Beispiel).

Das Rumspringen der Seite sollte Grund genug sein, das nicht so zu machen.

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:

main > :not(:target)
 { display: none;
 }

Die Negation sorgt neben der einleuchtenden Semantik ("blende alles aus, was nicht Target ist") auch dafür, dass weniger begabte Browser, die :target nicht kennen, wenigstens ersatzweise alle Inhalts-Container anzeigen.

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.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Wenn da bei dir was rumspringt, solltest du vielleicht den Hund an die Leine nehmen oder die Ziege anpflocken.

Und sie bewegt sich doch!

Meinem Hund geht’s gut, meiner Ziege auch. Wie geht’s deinen Augen? 😜

😷 LLAP

[Der Martin]

Hallo,

Wenn da bei dir was rumspringt, solltest du vielleicht den Hund an die Leine nehmen oder die Ziege anpflocken.

Und sie bewegt sich doch!

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.

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.

Meinem Hund geht’s gut, meiner Ziege auch. Wie geht’s deinen Augen? 😜

Kann nicht klagen. Gegen Kurzsichtigkeit gibt's ja Brillen.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Und sie bewegt sich doch!

natürlich bewegt sich da was: Die Anzeige scrollt zum gewählten Ziel hin. Einmal!

Hapert’s am Kucken oder am Zählen? 🤪

Click auf „Artikel 29“ – das Menü springt nach oben raus.

Click auf „Artikel 30“ – das Menü springt wieder runter.

Das ist ja Teil des gewünschten Verhaltens.

Nö. Das ist Teil des wohl inakzeptablen Verhaltens.

😷 LLAP

[Der Martin]

Hallo,

Und sie bewegt sich doch!

natürlich bewegt sich da was: Die Anzeige scrollt zum gewählten Ziel hin. Einmal!

Hapert’s am Kucken oder am Zählen? 🤪

bei dir wohl am Zählen.

Click auf „Artikel 29“ – das Menü springt nach oben raus.

Ja. Einmal. 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.

Click auf „Artikel 30“ – das Menü springt wieder runter.

Ja. Einmal. Weil der Artikel 30 noch kürzer ist als der 29.

Das ist ja Teil des gewünschten Verhaltens.

Nö. Das ist Teil des wohl inakzeptablen Verhaltens.

Da haben wir wohl unterschiedliche Ansichten.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Click auf „Artikel 29“ – das Menü springt nach oben raus.

Ja. Einmal. Weil der Browser …

Click auf „Artikel 30“ – das Menü springt wieder runter.

Ja. Einmal. Weil der Artikel …

Also jedesmal. Bei jeder Nutzerinteraktion hüpft der Seiteninhalt hoch und runter – die Nutzer (m/w/d) verlieren die Orientierung.

So sollte man das nicht machen.

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Meinem Hund geht’s gut, meiner Ziege auch.

Смотри! 🤣

😷 LLAP

[Der Martin]

Hallo Gunnar,

Meinem Hund geht’s gut, meiner Ziege auch.

Смотри! 🤣

Понятно.
Okay, ich verstehe kein Wort, aber zumindest die Verbindung.
Бедный медведь!

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Meinem Hund geht’s gut, meiner Ziege auch.

Смотри! 🤣

Понятно.
Okay, ich verstehe kein Wort

Gibt’s auch auf deutsch. Find ich aber schrecklich. Die Synchronstimme passt überhaupt nicht zu Mascha. Die englische Stimme trifft’s da schon besser.

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?

Für die deutsche Fassung wurde die englische zugrundegelegt. Kyrillische Buchstaben kann man dem deutschen Publikum nicht zumuten?

aber zumindest die Verbindung.

Ja, an den allermeisten Folgen hat man seinen Spaß auch ohne Russisch zu verstehen.

Бедный медведь!

Das konnte ich verstehen, weil’s auf polnisch auch biedny heißt. Beim Bären ist aus dem M ein N geworden: niedźwiedź.

😷 LLAP

[Der Martin]

Hi,

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?

anscheinend nicht ...

Aber im Disney/Pixar-Film WALL-E 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 bildlich in die jeweilige Sprache übersetzt. Ebenso ein Zeitungsfetzen, den WALL-E in einer Szene überrollt.

Mir ist das aufgefallen, als ich den Film von DVD zu mp4 eindampfen und dabei die englische und 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".

Für die deutsche Fassung wurde die englische zugrundegelegt. Kyrillische Buchstaben kann man dem deutschen Publikum nicht zumuten?

Anscheinend nicht ...

aber zumindest die Verbindung.

Ja, an den allermeisten Folgen hat man seinen Spaß auch ohne Russisch zu verstehen.

Das auch, aber das meinte ich nicht. Ich meinte: Ich verstehe, wie du von Hund und Ziege zu Mascha gelangt bist.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Aber im Disney/Pixar-Film WALL-E 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 bildlich in die jeweilige Sprache übersetzt. Ebenso ein Zeitungsfetzen, den WALL-E in einer Szene überrollt.

Wurde das in Zootopia auch gemacht, der in einigen Regionen Zootropolis heißt?

Den deutschen Titel Zoomania finde ich völlig bescheuert; der geht total am Sinn des Films vorbei.

😷 LLAP

[Der Martin]

Hallo,

Aber im Disney/Pixar-Film WALL-E 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 bildlich in die jeweilige Sprache übersetzt. Ebenso ein Zeitungsfetzen, den WALL-E in einer Szene überrollt.

Wurde das in Zootopia auch gemacht

keine Ahnung, den kenne ich nicht. Ich vermute aber nein, denn ich finde in der IMDB zwar eine Menge Standbilder aus dem Film, aber keins mit Schrift.

der in einigen Regionen Zootropolis heißt?

Ja, in UK.

Den deutschen Titel Zoomania finde ich völiig bescheuert; der geht total am Sinn des Fils vorbei.

Die deutsche Wikipedia hat noch ein paar Ausreden dazu.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Zootopia

keine Ahnung, den kenne ich nicht.

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 Utopie, dass alle Menschen friedlich zusammenleben (daher der Titel).

Das ist der Vorteil, wenn man Kinder hat: Da kriegt man so’ne Filme mit. Auch Inside Out ist sehr sehenswert. (Der deutsche Titel Alles steht Kopf ist OK.)

😷 LLAP

[Auge]

Hallo

Aber im Disney/Pixar-Film WALL-E 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 bildlich in die jeweilige Sprache übersetzt. Ebenso ein Zeitungsfetzen, den WALL-E in einer Szene überrollt.

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.

Tschö, Auge

[Der Martin]

Moin,

Aber im Disney/Pixar-Film WALL-E 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 bildlich in die jeweilige Sprache übersetzt. Ebenso ein Zeitungsfetzen, den WALL-E in einer Szene überrollt.

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.

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".

Heutzutage ersetzen die deutschen Texte die englischen Originaltexte „vor Ort“.

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?

Das klappt manchmal gut, manchmal entstellt das aber auch einen Gag, der mit dem Originaltext in Zusammenhang steht.

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.

Live long and pros healthy,
 Martin

[Matthias Apsel]

Hallo Der Martin,

Ja, das ist bei Übersetzungen allgemein schwierig. Wortwitz bleibt oft auf der Strecke;

Sowas zum Beispiel:
+++ Donald und Melania Trump positiv auf Corona getestet: Wir wünschen Biden alles Gute +++
https://t.co/GGu2N9whDp

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Der Martin

main > :not(:target)
 { display: none;
 }

Die UX ist genau dieselbe, als würde man konventionell auf eine neue Seite verlinken.

Nein, nicht die user experience, sondern die some user experience – SUX.^[1]

Bekommt denn ein Screenreader die Veränderung der Sichtbarkeit mit und liest den jeweiligen Text vor?

😷 LLAP

---

1. Credits: Bill Gregory ↩︎

[Der Martin]

Hallo,

Bekommt denn ein Screenreader die Veränderung der Sichtbarkeit mit und liest den jeweiligen Text vor?

keine Ahnung. Wer's wissen möchte (oder wer's wissen sollte), möge es testen.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Bekommt denn ein Screenreader die Veränderung der Sichtbarkeit mit und liest den jeweiligen Text vor?

keine Ahnung. Wer's wissen möchte (oder wer's wissen sollte)

Also alle Entwickler.

möge es testen.

Hab ich: VoiceOver bleibt stumm.

😷 LLAP

[Gerhard-Anfänger]

Das "Herumspringen" stört mich nicht.

[Gerhard-Anfänger]

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.

[Gunnar Bittersmann]

@@Gerhard-Anfänger

<h1 id="id1">Abteilung1</h1>  
.........

<h1 id="id2">Abteilung2</h1>  
.........

<h1 id="id3">Abteilung3</h1>  
.........

<h1 id="id4">Abteilung4</h1>  
.........

Fehler: h1 sollte auf einer Webseite nur einmal vorkommen und den Seitentitel angeben. Deine Kapitelüberschriften sind dann h2.

Nun möchte ich aber, dass bei einem Klick auf einen Link nur der zugehörige Text erscheint. Wie kann ich das realisieren?

Mit einem Akkordeon: Inclusive Components > Collapsible Sections

😷 LLAP

[Gerhard-Anfänger]

@@Gerhard-Anfänger

Mit einem Akkordeon: Inclusive Components > Collapsible Sections

Das ist für mich noch viel zu kompliziert.

[JürgenB]

Hallo Gunnar,

Nun möchte ich aber, dass bei einem Klick auf einen Link nur der zugehörige Text erscheint. Wie kann ich das realisieren?

Mit einem Akkordeon: Inclusive Components > Collapsible Sections

wäre details/summary nicht eine einfachere Lösung?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

wäre details/summary nicht eine einfachere Lösung?

Ja, da war ich auch gerade am Basteln. Bloß noch schnell die „alle öffnen“-/„alle schließen“-Buttons hinzugefügt ☞ Guckst du.

😷 LLAP

[Gerhard-Anfänger]

So soll es nicht sein:

`Artikel 1

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.
Artikel 2
Artikel 3`

sondern

`Artikel 1
Artikel 2
Artikel 3

Artikel1
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.
`

[Gunnar Bittersmann]

@@Gerhard-Anfänger

So soll es nicht sein: … sondern …

Dann willst du kein Akkordeon, sondern – was ebenfalls in den Inclusive Components zu finden ist – ein Tabbed Interface. (Ob die Tab-Liste nun horizontal oder vertikal ist, ändert an der Art der Komponente nichts.)

Auch dafür gilt vermutlich: „Das ist für mich noch viel zu kompliziert.“

Entweder lernen oder nicht deine bevorzugte Lösung umsetzen, sondern eine, die auch funktioniert, aber einfach zu implementieren ist, wie eben die mit details/summary.

😷 LLAP

[Gerhard-Anfänger]

Hallo!
Ich bin frustriert!
Ist dies der Normalfall im Forum?
Könnte man wenigstens die Antworten markieren, die nichts zur Klärung beitragen.
Meine Fragen sind jedenfalls noch nicht zufriedenstellend beantwortet.

[Der Martin]

Hallo Gerhard,

Ich bin frustriert!
Ist dies der Normalfall im Forum?

was denn? Nebenhandlungen, so wie hier gerade zwischen Gunnar und mir? Ja, völlig normal.

Könnte man wenigstens die Antworten markieren, die nichts zur Klärung beitragen.

Fällt es dir so schwer, einen Seitenast im Thread-Baum einfach zu ignorieren?

Meine Fragen sind jedenfalls noch nicht zufriedenstellend beantwortet.

Du hast eine Menge Anregungen bekommen.

EDIT: Und von Gunnar sogar ein funktionstüchtig aufgebautes Beispiel für meinen Ansatz, das du als Grundlage nehmen könntest. /EDIT

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.

Live long and pros healthy,
 Martin

[Gerhard-Anfänger]

Hallo,

EDIT: Und von Gunnar sogar ein funktionstüchtig aufgebautes Beispiel für meinen Ansatz, das du als Grundlage nehmen könntest. /EDIT

Dazu habe ich aber geschrieben, dass sein Beispiel (https://codepen.io/gunnarbittersmann/pen/oNxKyrp) nicht das von mir gewünschte liefert.
Er:
Artikel1
.... Text ....
Artikel2
Artikel3

Ich:
Artikel2
Artikel3

.... Text zu Artikel n

[Der Martin]

Moin,

EDIT: Und von Gunnar sogar ein funktionstüchtig aufgebautes Beispiel für meinen Ansatz, das du als Grundlage nehmen könntest. /EDIT

Dazu habe ich aber geschrieben, dass sein Beispiel (https://codepen.io/gunnarbittersmann/pen/oNxKyrp) nicht das von mir gewünschte liefert.

tatsächlich nicht?

Er:
Artikel1
.... Text ....
Artikel2
Artikel3

Nein.

Ich:
Artikel2
Artikel3

.... Text zu Artikel n

Genau das liefert Gunnars Codepen-Beispiel bei mir.

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

Dazu habe ich aber geschrieben, dass sein Beispiel (https://codepen.io/gunnarbittersmann/pen/oNxKyrp) nicht das von mir gewünschte liefert.

tatsächlich nicht?

Nein. Gerhard-Anfänger bezog sich auf das Akkordeon mit details/summary …

Genau das liefert Gunnars Codepen-Beispiel bei mir.

… du beziehst dich auf die Geschichte mit :not(:target) mit der mieserablen UX.

😷 LLAP

[Gunnar Bittersmann]

@@Gerhard-Anfänger

Ist dies der Normalfall im Forum?

Ja.

Könnte man wenigstens die Antworten markieren, die nichts zur Klärung beitragen.

Das sind sie doch schon längst. Die mit menschelei getaggten Postings haben nichts mehr mit deinem Problem zu tun.

😷 LLAP

[Gerhard-Anfänger]

@alle Helfer: Es ist vollbracht, danke!