Grafik zerstört meinen "Read-more" Code

[MJCool81]

Guten Morgen liebe Community,

bitte helft mir zu verstehen ob ich einen falschen Lösungsansatz verfolge, es also über meinen eingeschlagenen Weg nicht programmierbar ist oder ob ich lediglich nicht über genügend HTML / CSS Kenntnisse verfüge um meinen "Read-more" Code ordentlich umzusetzen.

ich habe mir folgendes bereits zusammengebastelt:

<div>
  <input type="checkbox" class="read-more-state" id="post-2" />

  <ul style="padding-left:0em;" class="read-more-wrap">
    <p>lorem</p>
    <p>lorem 2</p>
    <p class="read-more-target">lorem 3</p>
    <p class="read-more-target">lorem 4</p>
    <p class="read-more-target">lorem 5</p>
    <p class="read-more-target">lorem 6</p>
    <p class="read-more-target"><img src="http://u7.tsv-heimbuchenthal.de/images/pictures/w7e1b0c162f210023dafebec4cc24861/w7e1b0c162f350028e3a611d63f9d632/w7e1b131603180018fb5dedcc123c3e0/ErgebnisVorlage2.jpg?w=545&h=50" style="border: 5px solid #eeeeee; border-radius:.25em;"/></p>
    <p class="read-more-target">lorem 7</p>
  </ul>
  
  <label for="post-2" class="read-more-trigger"></label>
</div>

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0,2;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 0;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}

Meine Frage ist nun, warum "verschwinden" die "lorem" Weiterlesen-Einträge, die Grafik aber nicht - im deaktivierten "Read-more" Modus? Daraus ergibt sich nämlich, das der "Read-more" Button nicht mehr aktivierbar ist weil die Grafik eben im Hintergrund liegt. Zur Verdeutlichung hab ich mal die opacity bei .read-more-target auf 0,2 gesetzt.

Ich hoffe ich bin hier in diesem Forum, an dieser Stelle richtig. Falls nicht steinigt mich bitte nicht sondern seid nachsichtig mit mir und verbessert mich. Ich gelobe Besserung!

[Regina Schaukrug]

<div>
  <input type="checkbox" class="read-more-state" id="post-2" />

  <ul style="padding-left:0em;" class="read-more-wrap">
    <p>lorem</p>
    <p>lorem 2</p>
    <p class="read-more-target">lorem 3</p>
    <p class="read-more-target">lorem 4</p>
    <p class="read-more-target">lorem 5</p>
    <p class="read-more-target">lorem 6</p>
    <p class="read-more-target"><img src="http://u7.tsv-heimbuchenthal.de/images/pictures/w7e1b0c162f210023dafebec4cc24861/w7e1b0c162f350028e3a611d63f9d632/w7e1b131603180018fb5dedcc123c3e0/ErgebnisVorlage2.jpg?w=545&h=50" style="border: 5px solid #eeeeee; border-radius:.25em;"/></p>
    <p class="read-more-target">lorem 7</p>
  </ul>
  
  <label for="post-2" class="read-more-trigger"></label>
</div>

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0,2;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 0;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}

Meine Frage ist nun, warum "verschwinden" die "lorem" Weiterlesen-Einträge, die Grafik aber nicht - im deaktivierten "Read-more" Modus? Daraus ergibt sich nämlich, das der "Read-more" Button nicht mehr aktivierbar ist weil die Grafik eben im Hintergrund liegt. Zur Verdeutlichung hab ich mal die opacity bei .read-more-target auf 0,2 gesetzt.

Ich hoffe ich bin hier in diesem Forum, an dieser Stelle richtig. Falls nicht steinigt mich bitte nicht sondern seid nachsichtig mit mir und verbessert mich. Ich gelobe Besserung!

Hm. Kannst Du das online stellen? Ist schwierig nachzuvollziehen.

Auf den ersten Blick ist:

opacity: 0,2;

ungültig. Da muss als Dezimaltrenner ein Punkt hin.

Validiere also zunächst das HTML und das CSS.

[MJCool81]

Danke für die schnelle Antwort.

online findest du das Ganze hier Die Seite befindet sich noch im Aufbau.

Online ist die opacity nicht auf 0.2 gesetzt - sprich das dahinterliegende Bild ist nicht erkennbar.

Sehr schön siehst du allerdings, das es unerheblich ist wieviel Text hinter dem "read-more" steckt - der Button funktioniert trotzdem. (Turniersieg, der Zweite - zweiter Button)

Sowohl beim ersten Button-dort liegen 3 Grafiken dahinter- als auch beim dritten Button (erstes Turnier, erster Turniersieg) - dort liegen 2 Grafiken dahinter - funktioniert der Button nicht mehr. Um genauer zu sein, funktioniert es beim dritten Button wenn man direkt auf die untere Rahmenlinie des Buttons drückt.

In allen Fällen funktioniert der "Show less" Button einwandfrei, weil in diesem Moment die Grafiken nicht mehr störend dahinter liegen.

[Gunnar Bittersmann]

@@MJCool81

der Button funktioniert trotzdem.

Nein, das tut er nicht. Es ist ein Label für ein Eingabe-Element (Checkbox), das es überhaupt nicht gibt (wegen display: none). Das kann gar nicht funktionieren (im Sinne von: funktionieren – für alle, nicht nur für einen ausgewählten Nutzerkreis). Eingabe-Elemente, die bedienbar sein sollen, dürfen allerhöchstens visuell versteckt werden.

Überhaupt ist der Checkbox-Hack keine vernünftige Lösung. Verwende einen button und JavaScript zum Ein-/Ausblenden. (Wobei erst mit JavaScript ausgeblendet werden sollte, damit ohne JavaScript alles sichtbar ist.) S.a. Inclusive Components: Collapsible sections.

Oder verwende reines HTML: detail/summary.

Übrigens: Bei Tastaturnavigation ist auf deiner Seite sehr schwer zu erkennen, welches Element gerade den Fokus hat. Statt a:focus { outline: dotted thin } sollte es etwas besser Sichtbares sein.

LLAP 🖖

[MJCool81]

Okay, danke für deine Erläuterungen.

Sieht alles komplizierter aus als ich es mir gedacht habe. Da ich weder Fachinformatiker noch Programmierer bin werde ich das so wohl nicht umsetzen können. Schade!

Dachte es irgendwie möglich die Grafik genau so "verschwinden" zu lassen wie die "lorem"-Einträge.

[Regina Schaukrug]

Sieht alles komplizierter aus als ich es mir gedacht habe. Da ich weder Fachinformatiker noch Programmierer bin werde ich das so wohl nicht umsetzen können. Schade!

"Programmplanung" ist die Kunst, "komplexe Probleme" in "triviale Einzelschritte" aufzulösen und diese sodann in einer Sprache, die selbst ein Idiot (wie ein Computer nun mal einer ist) versteht, zu notieren. Nur letzteres nennt man "programmieren".

[MJCool81]

Aja, danke!

[Gunnar Bittersmann]

@@MJCool81

Okay, danke für deine Erläuterungen.

Sieht alles komplizierter aus als ich es mir gedacht habe. Da ich weder Fachinformatiker noch Programmierer bin werde ich das so wohl nicht umsetzen können. Schade!

Ach was, so schlimm ist das nicht.

Erster Quick fix:

Nicht

.read-more-state {
	display: none;
}

sondern

.read-more-state {
	position: absolute;
	opacity: 0;
}

Und den Fokus sichtbar machen:

.read-more-state:focus ~ .read-more-trigger {
	outline: medium solid lightblue;
}

Und schon klappt’s auch mit Tastaturbedienung.

Ein Screenreader liest freilich immer noch Unfug vor. Das liegt daran, dass Checkboxen missbraucht werden. „Pure CSS“ anzustreben ist hier Unsinn; eine Lösung mit Button und JavaScript deutlich besser.

LLAP 🖖

[Gunnar Bittersmann]

@@MJCool81

Dein Doppelposting habe ich mal gelöscht.

Außer der Ergänzung „Online findet ihr das Ganze hier“ ^[1] habe ich auf die Schnelle keinen Unterschied gesehen.

Falls du dort noch andere Ergänzungen gemacht hattest, poste sie hier in diesem Thread. Wenn du den Text des gelöschten Postings nochmal brauchst, gib Bescheid.

LLAP 🖖

---

1. „hier“ ist kein sinnvoller Linktitel. „Stellen Sie sicher, dass Links auch ohne Kontext Sinn ergeben. Jeder Link sollte Sinn ergeben, wenn er alleinstehend gelesen wird. Benutzer von Screenreadern haben die Wahl, sich nur die Links auf einer Webseite vorlesen zu lassen. Bestimmte Phrasen wie »hier klicken« und »mehr« müssen vermieden werden.“ [WebAIM] ↩︎

[MJCool81]

Nein, alles ok. Entschuldigung! Muss mich hier erst noch zurecht finden.

Meinen Beitrag kann ich offensichtlich nicht mehr bearbeiten, sonst hätte ich auch deinen Hinweis bezgl. Linktiteln beherzigt und korrigiert

[MJCool81]

wenn man den HTML und CSS Teil (mit . bei opacity statt ,) hier https://codepen.io/Idered/pen/AeBgF eingibt, dann ist es wohl etwas anschaulicher, was ich meine!