Uli: Problem mit Pseudoklasse

Hallo,

bei meiner Seite www.pragtrip.de würde ich gerne eine Navigation haben wie bei autoscout.de links unter Gebrauchtwagen. Also so, dass neben dem hover-Effekt auch der aktuelle Link farbig bleibt, zur besseren Orientierung für die Besucher.Hab mich schon etwas umgeschaut hier, nix gefunden, an der Reihenfolge der Pseudoklassen kanns ja nicht liegen. Den Code habe ich übrigens mit einem Generator gemacht, ich bin nicht so der CSS-Experte, wenns hier einen gibt der weiss wo der Hase im Pfeffer liegt und den Code ergänzen kann bitte melden!

Gruss Uli
Hier der code:

<style type="text/css">
a:link {
font-family:Verdana,Arial,Helvetica;
font-size:9pt;
font-weight:500;
text-decoration:underline;
color:#808080;
}

a:visited {
font-family:Verdana,Arial,Helvetica;
font-size:9pt;
font-weight:500;
text-decoration:underline;
color:#808080;
}

a:hover {
font-family:Verdana,Arial,Helvetica;
font-size:9pt;
font-weight:500;
text-decoration:underline;
color:#FFCC00;
}

a:active {
font-family:Verdana,Arial,Helvetica;
font-size:9pt;
font-weight:500;
text-decoration:underline;
color:#FFCC00;
}

</style> <style type="text/css">
a.impressum:link {
font-family:Verdana,Arial,Helvetica;
font-size:7pt;
font-weight:500;
text-decoration:underline;
color:#000000;
}

a.impressum:visited {
font-family:Verdana,Arial,Helvetica;
font-size:7pt;
font-weight:500;
text-decoration:underline;
color:#000000;
}

a.impressum:hover {
font-family:Verdana,Arial,Helvetica;
font-size:7pt;
font-weight:500;
text-decoration:underline;
color:#000000;
}

a.impressum:active {
font-family:Verdana,Arial,Helvetica;
font-size:7pt;
font-weight:500;
text-decoration:underline;
color:#000000;
}

</style>

  1. Hi,

    bei meiner Seite www.pragtrip.de würde ich gerne eine Navigation haben wie bei autoscout.de links unter Gebrauchtwagen. Also so, dass neben dem hover-Effekt auch der aktuelle Link farbig bleibt,

    Was bezeichnest Du als aktuellen Link?

    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, da hab ich mich wohl etwas falsch ausgedrückt, ich meinte den gerade besuchten Link. Wird deutlich bei autoscout.de links unter Gebrauchtwagen, so was hätt ich auch gerne.

      1. Hi,

        Hallo, da hab ich mich wohl etwas falsch ausgedrückt,

        nein - Du hast die Frage nicht verstanden.

        Denk mal drüber nach, welchen Sinn ein Link (= anklickbarer Verweis) auf die Seite, die gerade angezeigt wird, hat.

        freundliche Grüße
        Ingo

        1. Hi,

          Hallo, da hab ich mich wohl etwas falsch ausgedrückt,
          nein - Du hast die Frage nicht verstanden.

          Denk mal drüber nach, welchen Sinn ein Link (= anklickbarer Verweis) auf die Seite, die gerade angezeigt wird, hat.

          freundliche Grüße
          Ingo

          Hallo Ingo,
          Ich bin von Beruf Tourismusfachwirt und habe nicht diese speziellen Feinheiten in der It-Sprache drauf, gut? Bin eh schon froh dass ich meine Seite so hinbekommen habe...Bei autoscout wird dass klar was ich meine, auch ohne Fachbegriffe...

          1. Hallo Uli,

            Ich bin von Beruf Tourismusfachwirt und habe nicht diese speziellen Feinheiten in der It-Sprache drauf, gut? Bin eh schon froh dass ich meine Seite so hinbekommen habe...Bei autoscout wird dass klar was ich meine, auch ohne Fachbegriffe...

            Der Punkt ist der: Ein Link auf eine Seite, auf der Du Dich eh schon befindest, ist unter Usability-Gesichtspunkten sinnlos.

            Generell mußt Du für das Navigationselement, das hervorgehoben werden soll, auf der aktuellen Seite eine andere Formatierung (z.B. Farbe) wählen. Bei Autoscout wird das durch eine CSS-Klasse gelöst: class="hp_navlit", die dann entsprechend orange ist.

            Da Du also sowieso den einzelnen Punkt pro Seite editieren mußt, empfiehlt es sich, das <a>-Element ganz wegzulassen und den Text einfach ohne Link farbig hervorzuheben.

            Auf größeren Seiten wie beim Autoscout wird der Aufbau der Navigation meist über ein serverseitiges Script erledigt, da die einzelnen Punkte aus einer Datenbank kommen dürften.

            Bei kleineren Seiten sollte es reichen, auf jeder Seite eben schnell die Navileiste zu editieren.

            Gruß aus Köln-Ehrenfeld,

            Elya

            --
            „Mac OS X wird weiterhin nur auf Macs aus dem Hause Apple laufen, egal, ob da nun ein PowerPC, ein Pentium oder Chocolate Chips drinstecken.“ (Tim Tepaße)
            1. Der Punkt ist der: Ein Link auf eine Seite, auf der Du Dich eh schon
              befindest, ist unter Usability-Gesichtspunkten sinnlos.

              Aber die geänderte Anzeige dieses Verweises in einem Menü
              macht schon Sinn (und darum geht es dem Fragesteller).

              Zusätzlich kann natürlich auch dieser Verweis zu einem reinen Text
              umgewandelt werden, damit keiner mehr darauf klicken kann.

              1. Hallo mark,

                Aber die geänderte Anzeige dieses Verweises in einem Menü
                macht schon Sinn (und darum geht es dem Fragesteller).

                Zusätzlich kann natürlich auch dieser Verweis zu einem reinen Text
                umgewandelt werden, damit keiner mehr darauf klicken kann.

                was ich ja in meinen Folgesätzen auch erklärt hatte... oder? Deine Erklärung weiter oben hatte ich erst später gesehen, die ist natürlich etwas "runder" ,-)

                Gruß aus Köln-Ehrenfeld,

                Elya

                --
                „Mac OS X wird weiterhin nur auf Macs aus dem Hause Apple laufen, egal, ob da nun ein PowerPC, ein Pentium oder Chocolate Chips drinstecken.“ (Tim Tepaße)
                1. Hi,

                  was ich ja in meinen Folgesätzen auch erklärt hatte... oder?

                  genau. Obwohl ich ja gehofft hatte, daß Uli die Andeutungen und Anregungen zum eigenen Nachdenken doch noch nutzen würde.

                  Deine Erklärung weiter oben

                  weiter unten (bei mir jedenfalls;-)

                  hatte ich erst später gesehen, die ist natürlich etwas "runder" ,-)

                  nö. das Wesentliche fehlt, nämlich die Hinterfragung:

                  des Verweises der auf die aktuelle Seite linkt

                  freundliche Grüße
                  Ingo

            2. Hallo Elya,

              Der Punkt ist der: Ein Link auf eine Seite, auf der Du Dich eh schon befindest, ist unter Usability-Gesichtspunkten sinnlos.

              Generell mußt Du für das Navigationselement, das hervorgehoben werden soll, auf der aktuellen Seite eine andere Formatierung (z.B. Farbe) wählen.

              wenn es keinen anderen Grund gibt einen Link auszuschliessen,
              etwa Endloschleife bei Google, liesse sich der Link ja entspr.
              per CSS verändern, cursor:default;, und natürlich etwas wie die
              Hintergundfarbe oder Farbe um es als aktuelle Seite hervorzuheben.

              Da Du also sowieso den einzelnen Punkt pro Seite editieren mußt, empfiehlt es sich, das <a>-Element ganz wegzulassen und den Text einfach ohne Link farbig hervorzuheben.

              Hier könnte ich mir alternativ vorstellen alle a-tags mit einer id
              zu versehen,
              <a id="impressum" href="impr...
              und dann per CSS je nach Datei passend anzusprechen z.B.
              #impressum{cursor:default;background-color:yellow;color:black}
              (ein zusätzliches :hover{color:black} ist vmtl. unnötig)

              Der dann einheitliche Code in der Navigation hat m.E. oft Vorteile
              bei der Wartung der Seiten usw., wie auch die erstmal gleiche
              Behandlung der A-Tags.
              Sonst ginge vielleicht auch noch ein Inlinestyle:
              <a style="cursor:default;background-color:yellow;" href="...

              Grüsse

              Cyx23

              1. Hi Cyx23,

                Du hast doch verstanden, worum es geht? Nämlich darum, dass eine Seite keinen Link zu sich selbst haben soll. Denn …

                Der dann einheitliche Code in der Navigation hat m.E. oft Vorteile
                bei der Wartung der Seiten usw.,

                … es geht nicht darum, es dem Webmaster so einfach wie möglich zu machen, sondern dem Nutzer.

                Gruß,
                Gunnar

                --
                “I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)
                1. Hallo Gunnar,

                  Du hast doch verstanden, worum es geht? Nämlich darum, dass eine Seite keinen Link zu sich selbst haben soll. Denn …

                  ebend.

                  Genau diesen Punkt habe ich ja gerade u.a. auch in Frage stellen wollen,

                  … es geht nicht darum, es dem Webmaster so einfach wie möglich zu machen, sondern dem Nutzer.

                  und für den Nutzer wird es dadurch u.U. auch einfacher, so durch
                  eine einheitliche Navigation, und die meisten Nutzer sollte es
                  nicht stören wenn ein solcher versteckter Link per rechter
                  Maustaste ein zweites Mal geladen werden kann oder wenn ein
                  mouseover in der Statuszeile erkennbar wird.

                  Einen Automatismus dass ein solcher "Link" gar nicht aktiv sein darf kann
                  ich gerade nicht nachvollziehen, solange er vernünftig gekennzeichent ist.

                  Bleiben aus meiner Sicht zwei Fragen, nämlich ob Google es übelnehmen
                  könnte (was m.E. nicht der Fall ist) und das vielleicht Wichtigste:

                  Ob nämlich die Vorteile der einheitlichen Navigation bei barrierefreien
                  Seiten die möglichen Nachteile überwiegen, welche Auszeichnungen in solch
                  einem Fall nötig wären, oder vielleicht noch wie es als Alternative
                  um einen A-Tag ohne Link steht.

                  Grüsse

                  Cyx23

                  1. Hi,

                    Seltsam - Du hast den Themenbereich zu Barrierefreiheit gewechselst, aber offensichtlich keine Ahnung davon.

                    und für den Nutzer wird es dadurch u.U. auch einfacher, so durch
                    eine einheitliche Navigation, und die meisten Nutzer sollte es
                    nicht stören wenn ein solcher versteckter Link per rechter
                    Maustaste ein zweites Mal geladen werden kann oder wenn ein
                    mouseover in der Statuszeile erkennbar wird.

                    Barrierefreiheit hat weder etwas mit den "meisten" Nutzern zu tun, noch ausschließlich mit optischen Gesuchtspunkten. Ein Verweis bleibt ein Verweis - im Screenreader bemerkt man Deine Tricks noch nicht einmal. Und welche Vorteile ein nutzloser versteckter Link haben soll - besonders unter dem Gesichtspunkt der Barrierefreiheit - ist mir nun wirklich nicht klar.

                    Einen Automatismus dass ein solcher "Link" gar nicht aktiv sein darf kann
                    ich gerade nicht nachvollziehen, solange er vernünftig gekennzeichent ist.

                    Lies bitte die Richtlinien zur Barrierefreiheit. Dann kannst Du es vielleicht.
                    Eine einheitliche Navigation bedeutet, daß die Menüpunkte stets an derselben Stelle wiederzufinden sind. Wenn nun einer dieser Punkte - nämlich der zur gerade angezeigten Seite - nicht als Link ausgezeichnet ist, dann ist das sehr eindeutig und hilfreich. Für grafische UAs ist darüber hinaus hilfreich, wenn diese Menüpunkte optisch hervorgehoben sind.

                    freundliche Grüße
                    Ingo

        2. Ich glaube hier liegt ein Missverständnis vor:

          Mit CSS können Verweise/Links auf ihr Aussehen hin geändert werden.
          Dazu stehen bestimmte Pseudoklassen zur Verfügung.

          Was aber mit CSS nicht geleistet werden kann, ist das Aussehen des Verweises
          der auf die aktuelle Seite linkt. So etwas wie ein Abgleich des Verweises
          mit der aktuell geladenen URL (in der Art "a:this").

          Dies muss in jeder Seite hart codiert oder mittels einer Skriptsprache
          (Javascript, PHP etc.) programmiert werden.

          Mit Javascript könnte eine herangehensweise sein alle Verweise in
          einer Schleife durchzugehen und mit der aktuellen URL zu Vergleichen
          und dann den Style dynamisch austauschen/setzen.

  2. hi,

    bei meiner Seite www.pragtrip.de würde ich gerne eine Navigation haben wie bei autoscout.de links unter Gebrauchtwagen.

    wozu?
    was haben menüpunkte wie "Neu Inserieren" oder "Mein AutoScout24" mit prag zu tun ...?

    scnr,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }