Roland: Link-Pseudoklassen

Hallo,

ich versuche, graphische Links mit den Pseudoklassen a:link etc. zu formatieren, was auch wunderhübsch funktioniert.

Lediglich den bekannten/lästigen gestrichelten Rahmen um aktive Links bekomme ich nicht weg. (Keine Sorge, ich möchte aktive Links nicht unkenntlich machen, sondern nur schöner formatieren).

Die Javascript-"Lösung" mit blur kommt nicht in Frage, da damit nur der active-Status unterdrückt wird und a:active nicht mehr greift (außerdem möchte ich kein Javascript einsetzen).

Hier die abgespeckte Version meiner bisherigen Versuche:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>abc</title>
    <style type="text/css">
      body { background-color:#0033ff; }

#test
      { border:none 0px;
      }
      #test a
      { display:block; position:absolute; width:175px; height:59px;
        border:none 0px; text-decoration:none;
        background:url(img/eidechse-175-3fach-ind.gif) no-repeat 0px 0px;
      }
      #test a:link { border:none 0px; text-decoration:none; }
      #test a:visited { border:none 0px; text-decoration:none; }
      #test a:hover
      { border:none 0px; text-decoration:none;
        background:url(img/eidechse-175-3fach-ind.gif) no-repeat 0px -59px;
      }
      #test a:active
      { border:none 0px; text-decoration:none;
        background:url(img/eidechse-175-3fach-ind.gif) no-repeat 0px -118px;
      }
      #test a { border:none 0px; }
      #test a img { border:none 0px; }
      #test a:link img { border:none 0px; }
      #test a:visited img { border:none 0px; }
      #test a:active img { border:none 0px; }
      #test a:focus img { border:none 0px; }
    </style>
  </head>

<body>
    <div id="test"><a href="#"></a></div>
  </body>
</html>

Online unter http://www.ganz-la-gomera.de/echse-test.html

Alles valide (naja, beim HTML kein Kusntstück..)

Mache ich was falsch oder geht es gar nicht?

Oh, in Opera klappt es, in IE und Firefox nicht.

Danke für Eure Hilfe!
Roland

  1. Hi,

    Die Javascript-"Lösung" mit blur kommt nicht in Frage, da damit nur der active-Status unterdrückt wird und a:active nicht mehr greift

    blur hat was mit :focus zu tun, nicht mit :active.
    (Daß IE die beiden durcheinander bringt, ist ein altbekannter Bug)

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  2. Hi,

    Lediglich den bekannten/lästigen gestrichelten Rahmen um aktive Links bekomme ich nicht weg.

    Nachtrag: outline ist dafür vorgesehen, wird aber noch kaum unterstützt (Firefox ab 1.5, vorher -moz-outline IIRC).

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo und danke auch für Deine Antworten. Outline hatte ich schon erfolglos versucht, jetzt weiß ich auch, warum erfolglos.

      Roland

      Hi,

      Lediglich den bekannten/lästigen gestrichelten Rahmen um aktive Links bekomme ich nicht weg.

      Nachtrag: outline ist dafür vorgesehen, wird aber noch kaum unterstützt (Firefox ab 1.5, vorher -moz-outline IIRC).

      cu,
      Andreas

    2. Hallo MudGuard.

      Lediglich den bekannten/lästigen gestrichelten Rahmen um aktive Links bekomme ich nicht weg.

      Nachtrag: outline ist dafür vorgesehen, wird aber noch kaum unterstützt (Firefox ab 1.5, vorher -moz-outline IIRC).

      Und natürlich nativ im Opera.

      Einen schönen Donnerstag noch.

      Gruß, Ashura

  3. Hi,

    Lediglich den bekannten/lästigen gestrichelten Rahmen um aktive Links bekomme ich nicht weg.

    bekannt: Ja. Lästig: Kein Stück - im Gegenteil! Das ist ein unverzichtbares Navigationselement, dessen Fehlen zur Unbenutzbarkeit Deiner Site führen kann.

    Alles valide (naja, beim HTML kein Kusntstück..)

    Im CSS-Code sind aber ziemlich viele Wiederholungen. Viele Wiederholungen. Da sind Wiederholungen im CSS-Code, und zwar ziemlich viele.

    Mache ich was falsch

    Ja: Du versuchst, den bekannten/notwendigen gestrichelten Rahmen um fokussierte Links zu entfernen.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hallo Cheatah,

      natürlich sollen die Benutzer meiner Site einen aktiven Link als solchen erkennen. Ich möchte mir nur nicht vorschreiben lassen, daß dies mit einem derart primitiven Rahmen geschehen muß.

      In meinem Beispiel verändert sich die Grafik in einer bestimmten Art und Weise, die ich bei allen Links wiederholen werde, damit über die ganze Site erkennbar ist, daß damit aktive Links gekennzeichnet werden.

      Bei den Wiederholungen hast Du Recht, ich weiß nicht, um welches Element der Rahmen eigentlich gezeichnet wird und habe versucht, ihn an allen möglichen Stellen zu unterdrücken.

      Wie mir gerade auffällt, sind allerdings sämtliche "a img"-Formatierungen überflüssig, da ich im Link gar kein Bild (mehr) habe, sondern mit einem Hintergrundbild arbeite, sorry.

      Nun ja, dann werde ich die bekannte/notwendige Kennzeichnung aktiver Links durch einen lästigen/unschönen gestrichelten Rahmen wohl hinnehmen müssen?

      Danke für Deine Antwort,
      Roland

      Hi,

      Lediglich den bekannten/lästigen gestrichelten Rahmen um aktive Links bekomme ich nicht weg.

      bekannt: Ja. Lästig: Kein Stück - im Gegenteil! Das ist ein unverzichtbares Navigationselement, dessen Fehlen zur Unbenutzbarkeit Deiner Site führen kann.

      Alles valide (naja, beim HTML kein Kusntstück..)

      Im CSS-Code sind aber ziemlich viele Wiederholungen. Viele Wiederholungen. Da sind Wiederholungen im CSS-Code, und zwar ziemlich viele.

      Mache ich was falsch

      Ja: Du versuchst, den bekannten/notwendigen gestrichelten Rahmen um fokussierte Links zu entfernen.

      Cheatah

      1. Hallo Roland,

        [...] aktiven Link als solchen erkennen. Ich möchte mir nur nicht vorschreiben lassen, daß dies mit einem derart primitiven Rahmen geschehen muß.

        aber so sind es die Leute gewohnt, und man sollte sie nicht ständig mit neuen Ideen konfrontieren. Usability heißt auch, sich an Konventionen zu halten, die sich einfach etabliert haben.

        verändert sich die Grafik [...], daß damit aktive Links gekennzeichnet werden.

        Und das ist auch intuitiv jedem klar?
        Ich melde hier Zweifel an, weil ich schon viele Webseiten gesehen habe, bei denen ich selbst über die Grundzüge der Seitennavigation schon rätseln musste, von solchen Feinheiten wie der Kennzeichnung des aktiven Elements ganz abgesehen.

        Nun ja, dann werde ich die bekannte/notwendige Kennzeichnung aktiver Links durch einen lästigen/unschönen gestrichelten Rahmen wohl hinnehmen müssen?

        Ja, bitte.
        Und in Zukunft bitte kein TOFU, okay?

        Schönen Tag noch,

        Martin

        1. Hallo Martin,

          aber so sind es die Leute gewohnt, und man sollte sie nicht ständig mit neuen Ideen konfrontieren. Usability heißt auch, sich an Konventionen zu halten, die sich einfach etabliert haben.

          Ich kenne diese Argumentation und kann sie teilweise auch nachvollziehen, aber eben nur teilweise. Wenn alle das immer so konsequent durchgezogen hätten, dann müßten z.B. Textlinks nach wie vor in blauer Schrift und unterstrichen sein.

          Ich melde hier Zweifel an, weil ich schon viele Webseiten gesehen habe, bei denen ich selbst über die Grundzüge der Seitennavigation schon rätseln musste, von solchen Feinheiten wie der Kennzeichnung des aktiven Elements ganz abgesehen.

          Daß das wirklich funktioniert, liegt natürlich in meiner Verantwortung, und wenn die User entnervt abhauen, habe ich ja selber den Schaden.

          Ich habe auch schon über diverse Navigationen und Steuerungen gerätselt, aber dann manchmal doch erkannt, daß diese mehr Usability bieten, als standardkonforme Implementierungen.

          Naja, muß jeder selbst wissen. Sollte es einmal eine saubere Lösung wie z.B. outline geben, werde ich sie nutzen.

          Trotzdem danke für Deine Meinung, auch wenn es nicht ganz meine ist.

          Roland.

          P.S.: Mit TOFU ist schon recht, mochte ich eigentlich noch nie.

        2. Moin,

          aber so sind es die Leute gewohnt, und man sollte sie nicht ständig mit neuen Ideen konfrontieren. Usability heißt auch, sich an Konventionen zu halten, die sich einfach etabliert haben.

          Wenn wir das immer so streng sehen würden mit den neuen Ideen und den Konventionen müssten wir noch auf den Bäumen sitzen oder Steinigungen gutheißen :-)

          Ich denke, dass Menschen beweglicher sind und flexibler reagieren, als wir manchmal glauben. Gut gemachte (okay, das ist ein ziemlich unbestimmter Begriff mit ziemlich undeutlichen Rändern) Weiterentwicklungen können durchaus akzeptabel sein, sonst wären Links immer noch ... siehe Roland.

          Zurückhaltend eingesetzte Weiterentwicklung sollte deshalb IMHO nicht _per se_ verdammt werden, zumal wenn sie, wie der OP ja von Beginn an erwähnte, nicht als "Wegfall einer Hilfe" sondern als "Alternative Darstellung der Hilfe" gegriffen wird.

          Ich melde hier Zweifel an, weil ich schon viele Webseiten gesehen habe, bei denen ich selbst über die Grundzüge der Seitennavigation schon rätseln musste, von solchen Feinheiten wie der Kennzeichnung des aktiven Elements ganz abgesehen.

          Zustimmung. Wer schon mal zugesehen hat, wie ein Schlaganfallgeschädigter, der die Maus nicht bedienen kann, mit dem Tabulator versucht, den "In den Warenkorb"-Link zu drücken, vergisst das nicht so schnell.

          Viele Grüße

          Swen Wacker

          1. Hallo.

            Wenn wir das immer so streng sehen würden mit den neuen Ideen und den Konventionen müssten wir noch auf den Bäumen sitzen oder Steinigungen gutheißen :-)

            Noch so ein Spruch und ich schmeiße dir von hier oben ein Stein an den Kopf.
            MfG, at

      2. Hi,

        natürlich sollen die Benutzer meiner Site einen aktiven Link als solchen erkennen. Ich möchte mir nur nicht vorschreiben lassen, daß dies mit einem derart primitiven Rahmen geschehen muß.

        natürlich. Allerdings hast Du das, was Du Dir nicht vorschreiben lassen möchtest, *immer* dem unterzuordnen, was Deine Besucher sich nicht vorschreiben lassen möchten. Das Stichwort Usability wurde ja bereits genannt.

        In meinem Beispiel verändert sich die Grafik in einer bestimmten Art und Weise, die ich bei allen Links wiederholen werde, damit über die ganze Site erkennbar ist, daß damit aktive Links gekennzeichnet werden.

        Das Gehirn des Menschen ist nicht in der Lage, eine derart umfassende Änderung der Symbolik intuitiv zu erfassen. Und damit ist auch Dein Argument mit der Linkfarbe entkräftet: Der Übergang muss sehr viel fließender sein, als es Dir derzeit möglich ist.

        Wie mir gerade auffällt, sind allerdings sämtliche "a img"-Formatierungen überflüssig, da ich im Link gar kein Bild (mehr) habe, sondern mit einem Hintergrundbild arbeite, sorry.

        Die Formatierungen brauchst Du dann nicht zu nennen, das stimmt, aber es stört nicht, wenn Du sie trotzdem in Deinem Code stehen hast. Nicht jede Regel muss auch auf jeder Seite greifen.

        Nun ja, dann werde ich die bekannte/notwendige Kennzeichnung aktiver Links durch einen lästigen/unschönen gestrichelten Rahmen wohl hinnehmen müssen?

        Derzeit: ja. Wenn CSS/3.0 sich hinreichender Verbreitung erfreut _und_ sich eine Richtung der alternativen Markierung in der Praxis heraus kristallisiert: nein.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hi Cheatah,

          ich stimme zu, daß die Rechte/Freiheiten des Users wichtiger als die des Autors sind. Ich möchte auch bestehende, standardkonforme Instrumente nicht ersetzen, sondern eine Alternative anbieten.

          Gerade darum wäre ja eine CSS-Lösung schön: Der User kann jederzeit auf sein User-Stylesheet wechseln und damit meine Ideen einfach ignorieren.

          OK, schaun mer mal, was die Zukunft Schönes bringt.

          Grüße
          Roland

      3. Hi,

        Wie mir gerade auffällt, sind allerdings sämtliche "a img"-Formatierungen überflüssig, da ich im Link gar kein Bild (mehr) habe, sondern mit einem Hintergrundbild arbeite, sorry.

        Wenn Dir wirklich an Usability liegt, dann hast Du hier einen falschen Weg eingeschlagen. Denn ohne Grafikanzeige sind keine Links mehr vorhanden. Vom fehlenden Linktext ganz abgesehen.
        http://www.1ngo.de/web/bildwechsel.html zeigt Dir eine barrierefreie(re) Alternative.

        Nun ja, dann werde ich die bekannte/notwendige Kennzeichnung aktiver Links durch einen lästigen/unschönen gestrichelten Rahmen wohl hinnehmen müssen?

        Nein, mußt Du eigentlich nicht, jedenfalls wenn es Dir nur um die technische Umsetzung geht. Ich sehe kein Manko in <a onclick="this.blur()"> und verwende ähnliches auch in meinen Diashows (wo ich allerdings den Markierungsrahmen durch einen normalen CSS-border ersetze - der würde sonst nämlich vom Markierungsrahmen überdeckt). Der Einsatz von Javascript unterdrückt hier lediglich bei Maussteuerung (onclick) den Markierungsrahmen.

        freundliche Grüße
        Ingo

        1. Hallo Ingo,

          Wenn Dir wirklich an Usability liegt, dann hast Du hier einen falschen Weg eingeschlagen. Denn ohne Grafikanzeige sind keine Links mehr vorhanden. Vom fehlenden Linktext ganz abgesehen.

          Genau in dieser Reihenfolge sind mir die Schwachstellen auch so langsam klargeworden, mein Beispiel war allerdings auch abgespeckt auf die ursprüngliche Fragestellung. Linktexte wird es auf jeden Fall geben, die Grafik ist nur sugar for the eyes.

          http://www.1ngo.de/web/bildwechsel.html zeigt Dir eine barrierefreie(re) Alternative.

          *Das* gefällt mir, werde versuchen, es als Anregung und nicht als reine Vorlage zum Kopieren zu verwenden, die Versuchung ist ja groß. Danke!
          (noch besser gefällt mir übrigens der letzte Satz in Deinem Impressum!)

          Ich sehe kein Manko in <a onclick="this.blur()"> und verwende ähnliches auch in meinen Diashows

          Stimme ich zu, ich wollte einfach mal sehen, was sich alles ohne JS machen läßt.

          Danke Dir
          Roland

          1. Hi,

            Linktexte wird es auf jeden Fall geben, die Grafik ist nur sugar for the eyes.

            Du weißt, daß es keine Möglichkeit gibt, (Link-)texte mit CSS so auszublenden, daß wirklich alle Screenreader sie noch vorlesen?

            (noch besser gefällt mir übrigens der letzte Satz in Deinem Impressum!)

            hehe ... der wurde ja automatisch generiert. Danke für den Hinweis; ich habe das Juristendeutsch jetzt mal etwas normalisiert.

            freundliche Grüße
            Ingo

            1. Hi (ist schon wieder Tag?)

              Du weißt, daß es keine Möglichkeit gibt, (Link-)texte mit CSS so auszublenden, daß wirklich alle Screenreader sie noch vorlesen?

              Ja, weiß ich, uhhhm seit einer Minute jedenfalls, bedankt..
              Macht hier nix, der Gesamtlink soll aus Grafik und echtem, immer lesbarem Text bestehen, und klar, die Grafik bekommt noch ein alt-Attribut. Ich sehe, mein Beispiel war zu sehr reduziert.

              Über nicht-graphische Ausgaben habe ich mir hier wenig Gedanken gemacht, weil ich ehrlich glaube, daß sich an den geplanten Inhalten nur Sehende erfreuen können.

              Wenn diese Inhalte mal implementiert sind, werde ich mich hier wieder melden, zu verbessern gibt es dann garantiert noch ne Menge!

              Bis dahin wirst Du mich wohl öfter in Deinen Logfiles wiederfinden;-)

              Bis denne
              Roland

              1. Hi,

                Über nicht-graphische Ausgaben habe ich mir hier wenig Gedanken gemacht, weil ich ehrlich glaube, daß sich an den geplanten Inhalten nur Sehende erfreuen können.

                dazu noch ein kleiner Hinweis: Wer z.B. mit PDA über Mobilfunk ins Internet geht, wird möglicherweise Grafiken deaktiviert haben, um Kosten zu sparen.

                freundliche Grüße
                Ingo

            2. Hallo

              Linktexte wird es auf jeden Fall geben, die Grafik ist nur sugar for the eyes.
              Du weißt, daß es keine Möglichkeit gibt, (Link-)texte mit CSS so auszublenden, daß wirklich alle Screenreader sie noch vorlesen?

              Die zweite Methode auf dieser Seite von wellstyled.com sollte den Anspruch erfüllen. Dort wird der Text nicht per CSS ausgeblendet, sondern das Bild über dem Text positioniert. Es überdeckt also den Text.

              Dazu gab es hier auch schon eine Diskussion über das Für und Wider der Methode.
              http://forum.de.selfhtml.org/archiv/2005/6/t110028/#m688969

              Tschö, Auge

              --
              Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
              (Victor Hugo)
              Veranstaltungsdatenbank Vdb 0.1