Problem mit Pseudoklasse
Uli
- css
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>
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
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.
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
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...
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
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.
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
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
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
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
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
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
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.
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