Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 15:07:19 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770378#m1770378 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770378#m1770378 <p>Ich habe einen größeren Bereich als als Link definiert, einfach dadurch dass ich Start- und End-Tag des a-Elements im html alle Elemente umschließen lasse die diesen Link bilden sollen. Dieser besteht aus Bild und Text Elementen und ist nicht mit einen DIV identisch.</p> <p>Das funktioniert als Link in soweit, dass sich der Maus Pfeil-Cursor beim überfahren des Bereichs zu einen Maus Hand/Faust-Cursor ändert.</p> <p>Auch eines der im Bereich enthaltenen Text Elemente reagiert in der Standardweise, wird zum blauen Text mit Blauer Unterstreichung.</p> <p>Ein weiterer Text, der jedoch eine individuelle Gestaltung hat funktioniert zwar als Link, zeigt aber die visuelle Standardänderung nicht. Mich verwundert, dass die individuelle Gestaltung sich auf die Standard-Pseudoklassen auswirkt obwohl diese nicht individuell verändert wurden ???</p> <p>Die beiden Bilder funktionieren auch als Link, geben beim überfahren jedoch überhaupt keine visuelle Rückmeldeung (blauer Rahmen).</p> <p>Natürlich könnte ich jedes Element einzeln zu einem Link machen, aber mich interessiert eben ob und wie ich derartig zusammengesetzte Bereiche insgesamt zu eineḿ Link mache und wie ich dieses a-element, vielmehr dessen unterschiedlichen Kindelemente im css ansprechen kann.</p> <p>Ich möchte hier den ziemlich verschachtelten Code nicht posten, weil das dann noch unübersichtlicher wird. Letztlich geht es einfach um die Frage wie man innerhalb eines a-elements die Pseudoklassen der verschiedenen darin enthaltenen Blockelemente (einzelne Grafik und einzelne Textelemente) anspricht. Und ob das bei Bildern überhaupt geht, wenn das a-element mehr umfasst als das einzelne Bild?</p> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 15:39:37 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770381#m1770381 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770381#m1770381 <p>Hallo michaah,</p> <p>Kannst Du das Problem vielleicht in einem Fiddle oder Codepen in reduzierter Form nachstellen? Im Moment bleibt mir nur eine kurze Antwort: Hä?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 15:47:01 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770382#m1770382 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770382#m1770382 <p>@@michaah</p> <blockquote> <p>Ich habe einen größeren Bereich als als Link definiert, einfach dadurch dass ich Start- und End-Tag des a-Elements im html alle Elemente umschließen lasse die diesen Link bilden sollen. Dieser besteht aus Bild und Text Elementen</p> </blockquote> <p>Das ist schlecht, denn dadurch wird sämtlicher enthaltener Text zum Linktitel. Wenn ein Screenreadernutzer von Link zu Link navigiert, quasselt sich der Screenreader tot. Eine nutzbare Seite geht anders.</p> <p>Der Linktitel sollte kurz und aussagekräftig sein, d.h. es darf nicht der gesamte Inhalt des Bereichs im <code>a</code>-Element stehen.</p> <p>Mir fallen zwei Methoden ein, einen kurzen Link zu haben und dennoch die gesamte Box clickbar zu machen:</p> <ul> <li>mit über die Box gelegtem Pseudoelement; Nachteil: der Text ist nicht mehr markierbar</li> <li>mit JavaScript; die wohl bessere Variante</li> </ul> <p>siehe Codepen <a href="https://codepen.io/gunnarbittersmann/pen/bzGYNP" lang="en" rel="noopener noreferrer">linkek boxes</a> und Posting <a href="https://forum.selfhtml.org/self/2019/jan/16/navigation-nachbauen/1741279#m1741279" rel="noopener noreferrer">ganze Box verlinken</a></p> <p>Die dritte Variante zeigt, wie man’s nicht machen sollte.</p> <blockquote> <p>Mich verwundert, dass […]</p> <p>Ich möchte hier den ziemlich verschachtelten Code nicht posten</p> </blockquote> <p>Dann können wir uns nicht mitwundern.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>) </div> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 15:52:46 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770383#m1770383 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770383#m1770383 <p>@@Gunnar Bittersmann</p> <blockquote> <p><a href="/images/5018d39a-939f-11ea-850b-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/5018d39a-939f-11ea-850b-b42e9947ef30.png?size=medium" alt="Silbentrennung: Screenre-adernutzer" loading="lazy"></a></p> </blockquote> <p>Go home, automatische Silbentrennung, you’re drunk!</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>) </div> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 17:08:06 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770390#m1770390 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770390#m1770390 <p>Lieber Gunnar,</p> <p>ich versuche mal das Wort <em>Screenreader</em> als englische Vokabel auszuzeichnen: Ich habe <em>Screenreader</em> noch nie selbst getestet. Mir fällt auf, dass man nach dem Wort in Asterisken (sonst kenne ich nur Backticks als Gruppierungszeichen) die Sprachauszeichnung durch ein Zeilenende abtrennen muss, damit die Silbentrennung greift. Dieses tut sie dann auch sprachlich korrekt. Ein Kompositum aus zwei Wörtern unterschiedlicher Herkunftssprachen ist aber wirklich zu viel verlangt!</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 21:42:42 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770403#m1770403 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770403#m1770403 <blockquote> <p>@@michaah</p> <blockquote> <p>Ich habe einen größeren Bereich als als Link definiert, einfach dadurch dass ich Start- und End-Tag des a-Elements im html alle Elemente umschließen lasse die diesen Link bilden sollen. Dieser besteht aus Bild und Text Elementen</p> </blockquote> <p>Das ist schlecht, denn dadurch wird sämtlicher enthaltener Text zum Linktitel. Wenn ein Screenreadernutzer von Link zu Link navigiert, quasselt sich der Screenreader tot.</p> </blockquote> <p>Im Grundsatz hast du recht, im konkreten Fall eher nicht. Der erste Text ist ein Kurzhinweis aus vier Wörten, der zweite Ort-Straße-Hausnummer, die Bilder sind Lageplan und Ansicht. Die haben nen Titel, dennoch wird da der Screenreader nicht heißlaufen.</p> <p>Aus Gründen (in Kurzform: der Link soll und muss möglichst ohne Suchen gefunden werden) die ich hier nicht weiter ausbreiten möchte soll eben dieser ganze Lage-Adress-Bereich auf eine gesonderte Seite verlinken.</p> <blockquote> <p>...</p> </blockquote> <blockquote> <p>Mir fallen zwei Methoden ein, einen kurzen Link zu haben und dennoch die gesamte Box clickbar zu machen:</p> <ul> <li>mit über die Box gelegtem Pseudoelement; Nachteil: der Text ist nicht mehr markierbar</li> </ul> </blockquote> <p>Ich hasse nicht markierbaren Text wie die Pest, also wohl eher nicht die Lösung.</p> <blockquote> <ul> <li>mit JavaScript; die wohl bessere Variante</li> </ul> </blockquote> <p>Die Seite nutzt nirgends JS, und ich will damit nicht anfangen.</p> <p>Danke für die Hinweise, vielleicht schaue ich mir das mit der Pseudobox dennoch mal an, aber ich habe jetzt schon Aversionen dagegen. Nur die angesprochenen Elemente einzeln als Link zu nutzen erscheint mir ebenso fragwürdig. Man ejh ...</p> <p>Fast finde ich es am besten es so zu lassen wie es ist. Es funktioniert ja als Link, gibt dazu aber eben nur sehr bescheiden und eigentlich zu unauffällig Rückmeldung.</p> <p>Aber nochmals, weil das vielleicht untergegangen ist: Das Adress Textelement funktioniert ja wie es soll. Gibt es eine nachvollziehbare Erklärung warum beim zweiten Textelement, für das zwar der Schriftzug selbst, nicht aber die zugehörenden Pseudoklassen individuell definiert sind, die Standard Pseudoklassen nicht zur Anwendung kommen? Und wenn das für Text ja (in einem Fall) klappt, warum nicht für die Bilder, ist da nicht ein Blauer Rahmen Standard?</p> <p>Ich glaube ich bilde das mit einem pseudonymisierten Code mal nach, vielleicht geht da ja doch was ...</p> <p>morgen !</p> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 16:57:28 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770389#m1770389 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770389#m1770389 <p>Lieber Gunnar,</p> <blockquote> <p>Go home, automatische Silbentrennung, you’re drunk!</p> </blockquote> <p>ist denn <em>Screenreader</em> ein deutsches Wort, das die Silbentrennung korrekt nach deutschen Sprachmerkmalen trennen kann?</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 17:27:42 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770392#m1770392 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770392#m1770392 <p>Hallo Felix,</p> <blockquote> <blockquote> <p>Go home, automatische Silbentrennung, you’re drunk!</p> </blockquote> <p>ist denn <em>Screenreader</em> ein deutsches Wort, das die Silbentrennung korrekt nach deutschen Sprachmerkmalen trennen kann?</p> </blockquote> <p>nein, eben nicht. Deswegen bin ich ja immer wieder dafür, dass eine automatische Silbentrennung nur an &shy; (oder der jeweiligen Entsprechung in einer Textverarbeitung) trennen soll, oder an Stellen, die in einem Wörterbuch mit begrenztem Umfang aufgeführt sind.</p> <p>Generell finde ich, dass man Silbentrennung, ganz egal ob automatisch oder manuell, nur in Ausnahmefällen anwenden sollte. Nämlich dann, wenn ein Wort relativ lang im Verhältnis zur Gesamt-Textbreite ist.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Ich stamme aus Ironien, einem Land am sarkastischen Ozean. </div> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 17:53:28 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770395#m1770395 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770395#m1770395 <p>Hallo,</p> <blockquote> <p>Ein Kompositum aus zwei Wörtern unterschiedlicher Herkunftssprachen ist …</p> </blockquote> <p>ein No-Go. Selbst „Screenreader-Nutzer“ ist kagge.</p> <p>Gruß<br> Kalk</p> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 20:02:19 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770401#m1770401 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770401#m1770401 <p>@@Tabellenkalk</p> <blockquote> <blockquote> <p>Ein Kompositum aus zwei Wörtern unterschiedlicher Herkunftssprachen ist …</p> </blockquote> <p>ein No-Go. Selbst „Screenreader-Nutzer“ ist kagge.</p> </blockquote> <p>Was tun, wenn weder eine Hardware-Lösung noch eine Software-Lösung infragekommt?</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>) </div> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Mon, 11 May 20 22:24:09 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770405#m1770405 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770405#m1770405 <p>Meine Güte warum kann ich jetzt den oberen Beitrag nicht mehr bearbeiten. Bitte beantwortet diese Frage <strong><strong>nicht</strong></strong>.</p> <p>Zur eigentlichen Fragestellung: Es wäre zwar schön diesen Bereich via Pseudoklassen durch einen Rahmen kenntlich zu machen, aber wenn jedes einzelne Element eine Rückmeldung gäbe wäre das eben so gut. Und da ein Element ja Rückmeldung gibt muss es ja irgendwie gehen ...</p> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Tue, 12 May 20 08:51:20 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770419#m1770419 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770419#m1770419 <p>@@michaah</p> <blockquote> <blockquote> <ul> <li>mit JavaScript; die wohl bessere Variante</li> </ul> </blockquote> <p>Die Seite nutzt nirgends JS, und ich will damit nicht anfangen.</p> </blockquote> <p>Dass du bis jetzt nicht die Nutzbarkeit der Seite mit unobstrusivem JavaScript verbessert hast, ist kein Grund, nicht damit anzufangen.</p> <p>Dass es in diesem Fall nicht nötig ist, sondern der gesamte Text als Linktitel herhalten kann, ist ein Grund.</p> <blockquote> <p>Gibt es eine nachvollziehbare Erklärung warum beim zweiten Textelement, für das zwar der Schriftzug selbst, nicht aber die zugehörenden Pseudoklassen individuell definiert sind, die Standard Pseudoklassen nicht zur Anwendung kommen?</p> </blockquote> <p>Woher sollen wir das wissen, wenn du nicht zeigst, was du da gemacht hast?</p> <p>Das ist wie beim Arzt anzurufen und „Mir geht’s so dreckig“ zu sagen und zu erwarten, dass ohne Fieber zu messen, in den Rachen zu schauen und die Lunge abzuhorchen eine Prognose möglich wäre.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>) </div> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Tue, 12 May 20 07:15:34 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770414#m1770414 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770414#m1770414 <p>Hallo michaah,</p> <blockquote> <p>Meine Güte warum kann ich jetzt den oberen Beitrag nicht mehr bearbeiten. Bitte beantwortet diese Frage <strong><strong>nicht</strong></strong>.</p> </blockquote> <p>Du hast ein Zeitfenster von 30 Minuten um deine Beiträge zu editieren. Es schließt sich (auch vorzeitig) mit der ersten Antwort auf deinen Beitrag.</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> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Tue, 12 May 20 09:16:37 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770420#m1770420 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770420#m1770420 <p>Hallo Gunnar,</p> <blockquote> <p>Das ist wie beim Arzt anzurufen und „Mir geht’s so dreckig“ zu sagen und zu erwarten, dass ohne Fieber zu messen, in den Rachen zu schauen und die Lunge abzuhorchen eine Prognose möglich wäre.</p> </blockquote> <p>eine <strong>Pro</strong>gnose ist für den Arzt mitunter auch <strong>mit</strong> diesen Untersuchungen schwierig. Vermutlich meintest du eine <strong>Dia</strong>gnose. </p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Ich stamme aus Ironien, einem Land am sarkastischen Ozean. </div> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Tue, 12 May 20 11:38:51 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770427#m1770427 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770427#m1770427 <p>@@Der Martin</p> <blockquote> <p>eine <strong>Pro</strong>gnose ist für den Arzt mitunter auch <strong>mit</strong> diesen Untersuchungen schwierig. Vermutlich meintest du eine <strong>Dia</strong>gnose. </p> </blockquote> <p>Habe keine Ahnung, was ich meinte. Habe <strong>A</strong>gnose. </p> <p><em>Fremdwörter sind Glückssache.</em></p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>) </div> Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ? Tue, 12 May 20 12:25:59 Z https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770429#m1770429 https://forum.selfhtml.org/self/2020/may/11/bereich-image-text-image-text-als-link-wie-pseudo-elemente-in-css-ansprechen/1770429#m1770429 <p>Hi,</p> <blockquote> <blockquote> <p>eine <strong>Pro</strong>gnose ist für den Arzt mitunter auch <strong>mit</strong> diesen Untersuchungen schwierig. Vermutlich meintest du eine <strong>Dia</strong>gnose. </p> </blockquote> <p>Habe keine Ahnung, was ich meinte. Habe <strong>A</strong>gnose. </p> </blockquote> <p>Vermutlich Pixelgnose - im Zeitalter der Digitalkameras macht doch keiner mehr ein Dia </p> <p>cu,<br> Andreas a/k/a MudGuard</p>