Bereich (image - text - image - text) als link. Wie pseudo-elemente in CSS ansprechen ?

[michaah]

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.

Das funktioniert als Link in soweit, dass sich der Maus Pfeil-Cursor beim überfahren des Bereichs zu einen Maus Hand/Faust-Cursor ändert.

Auch eines der im Bereich enthaltenen Text Elemente reagiert in der Standardweise, wird zum blauen Text mit Blauer Unterstreichung.

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 ???

Die beiden Bilder funktionieren auch als Link, geben beim überfahren jedoch überhaupt keine visuelle Rückmeldeung (blauer Rahmen).

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.

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?

[Rolf B]

Hallo michaah,

Kannst Du das Problem vielleicht in einem Fiddle oder Codepen in reduzierter Form nachstellen? Im Moment bleibt mir nur eine kurze Antwort: Hä?

Rolf

[Gunnar Bittersmann]

@@michaah

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

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.

Der Linktitel sollte kurz und aussagekräftig sein, d.h. es darf nicht der gesamte Inhalt des Bereichs im a-Element stehen.

Mir fallen zwei Methoden ein, einen kurzen Link zu haben und dennoch die gesamte Box clickbar zu machen:

• mit über die Box gelegtem Pseudoelement; Nachteil: der Text ist nicht mehr markierbar
• mit JavaScript; die wohl bessere Variante

siehe Codepen linkek boxes und Posting ganze Box verlinken

Die dritte Variante zeigt, wie man’s nicht machen sollte.

Mich verwundert, dass […]

Ich möchte hier den ziemlich verschachtelten Code nicht posten

Dann können wir uns nicht mitwundern.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Go home, automatische Silbentrennung, you’re drunk!

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Felix Riesterer]

Lieber Gunnar,

Go home, automatische Silbentrennung, you’re drunk!

ist denn Screenreader ein deutsches Wort, das die Silbentrennung korrekt nach deutschen Sprachmerkmalen trennen kann?

Liebe Grüße

Felix Riesterer

[Der Martin]

Hallo Felix,

Go home, automatische Silbentrennung, you’re drunk!

ist denn Screenreader ein deutsches Wort, das die Silbentrennung korrekt nach deutschen Sprachmerkmalen trennen kann?

nein, eben nicht. Deswegen bin ich ja immer wieder dafür, dass eine automatische Silbentrennung nur an ­ (oder der jeweiligen Entsprechung in einer Textverarbeitung) trennen soll, oder an Stellen, die in einem Wörterbuch mit begrenztem Umfang aufgeführt sind.

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.

Live long and pros healthy,
 Martin

[Felix Riesterer]

Lieber Gunnar,

ich versuche mal das Wort Screenreader als englische Vokabel auszuzeichnen: Ich habe Screenreader 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!

Liebe Grüße

Felix Riesterer

[Tabellenkalk]

Hallo,

Ein Kompositum aus zwei Wörtern unterschiedlicher Herkunftssprachen ist …

ein No-Go. Selbst „Screenreader-Nutzer“ ist kagge.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Ein Kompositum aus zwei Wörtern unterschiedlicher Herkunftssprachen ist …

ein No-Go. Selbst „Screenreader-Nutzer“ ist kagge.

Was tun, wenn weder eine Hardware-Lösung noch eine Software-Lösung infragekommt?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[michaah]

@@michaah

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

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.

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.

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.

...

Mir fallen zwei Methoden ein, einen kurzen Link zu haben und dennoch die gesamte Box clickbar zu machen:

• mit über die Box gelegtem Pseudoelement; Nachteil: der Text ist nicht mehr markierbar

Ich hasse nicht markierbaren Text wie die Pest, also wohl eher nicht die Lösung.

• mit JavaScript; die wohl bessere Variante

Die Seite nutzt nirgends JS, und ich will damit nicht anfangen.

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

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.

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?

Ich glaube ich bilde das mit einem pseudonymisierten Code mal nach, vielleicht geht da ja doch was ...

morgen !

[michaah]

Meine Güte warum kann ich jetzt den oberen Beitrag nicht mehr bearbeiten. Bitte beantwortet diese Frage nicht.

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

[Matthias Apsel]

Hallo michaah,

Meine Güte warum kann ich jetzt den oberen Beitrag nicht mehr bearbeiten. Bitte beantwortet diese Frage nicht.

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.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@michaah

• mit JavaScript; die wohl bessere Variante

Die Seite nutzt nirgends JS, und ich will damit nicht anfangen.

Dass du bis jetzt nicht die Nutzbarkeit der Seite mit unobstrusivem JavaScript verbessert hast, ist kein Grund, nicht damit anzufangen.

Dass es in diesem Fall nicht nötig ist, sondern der gesamte Text als Linktitel herhalten kann, ist ein Grund.

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?

Woher sollen wir das wissen, wenn du nicht zeigst, was du da gemacht hast?

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.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Der Martin]

Hallo Gunnar,

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.

eine Prognose ist für den Arzt mitunter auch mit diesen Untersuchungen schwierig. Vermutlich meintest du eine Diagnose. 🤓

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Der Martin

eine Prognose ist für den Arzt mitunter auch mit diesen Untersuchungen schwierig. Vermutlich meintest du eine Diagnose. 🤓

Habe keine Ahnung, was ich meinte. Habe Agnose. 😆

Fremdwörter sind Glückssache.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[MudGuard]

Hi,

eine Prognose ist für den Arzt mitunter auch mit diesen Untersuchungen schwierig. Vermutlich meintest du eine Diagnose. 🤓

Habe keine Ahnung, was ich meinte. Habe Agnose. 😆

Vermutlich Pixelgnose - im Zeitalter der Digitalkameras macht doch keiner mehr ein Dia 😉

cu,
Andreas a/k/a MudGuard