a:focus funktioniert nicht in Google Chrome und Safari

[gina1]

Hallo liebes Forum,

ich muss gleich dazu sagen, dass ich mit HTML und CSS noch eher im Anfängerbereich bin.

Habe im Dreamweaver CC eine Navigation erstellt, die funktioniert auch prima. Aber ich konnte dem angeklickten Link für die aktuelle Seite nur mit a:focus eine eigene Textfarbe zuweisen. Das klappt auch prima im Firefox, aber nicht im Google Chrom oder im Safari. IE habe ich noch nicht probiert, da muss ich auf einen anderen Rechner ausweichen.

Frage: Ist dieses Problem bekannt, dass diese Browser nicht auf a:focus reagieren? Oder habe ich das grundsätzlich falsch gemacht?

Freue mich schon auf Eure Antworten, denn ich stehe wirklich auf dem Schlauch.

Liebe Grüße von Gina

 

[Myhar]

AW: a:focus funktioniert nicht in Google Chrome und Safari

a:focus ist nicht der angeklickte Link für die aktuelle Seite sondern jeder angeklickter Link. Einfach gesagt: :active ist nur so lange zu sehen, wie der Mauszeiger gedrückt wird. Möchtest du, dass in deiner Navigation die aktuelle Seite hervorgehoben wird? Dann musst du deinen Navigationsseiten eine entsprechende Klasse vergeben und diese per CSS stylen.

 

[gina1]

AW: a:focus funktioniert nicht in Google Chrome und Safari

Hallo Myhar, danke für die schnelle Antwort. Tatsache ist, dass im firefox der angeklickte Link in der Farbe, die ich a:focus zugewiesen habe, stehenbleibt. Und ich habe das mit dem vergeben der Klasse schon versucht und es hat nicht funktioniert. Aber ich schmeiße jetzt alles raus und gehe noch mal von vorn ran. Irgendwo ist ein Wurm drin.

 

[cebito]

AW: a:focus funktioniert nicht in Google Chrome und Safari

a:focus ist nicht der angeklickte Link für die aktuelle Seite sondern jeder angeklickter Link.

Nein, :focus greift dann, wenn der Link ausgewählt wird, bspw. per Tabulator. Dieser Zustand bleibt auch nach dem Klick, wenn ich nicht die Seite wechsle, solange, bis ich den Tab betätige oder woanders auf der Seite hinklicke.. :active greift einzig beim Klicken.

Irgendwo ist ein Wurm drin.

Ohne zu zeigen, was genau du gemacht hast, kann man dir nicht helfen. Am besten ist immer ein Link zu einem Testcase.

 

[Myhar]

AW: a:focus funktioniert nicht in Google Chrome und Safari

Nein, :focus greift dann, wenn der Link ausgewählt wird, bspw. per Tabulator. Dieser Zustand bleibt auch nach dem Klick, wenn ich nicht die Seite wechsle, solange, bis ich den Tab betätige oder woanders auf der Seite hinklicke.. :active greift einzig beim Klicken.

Das habe ich ja geschrieben. Eventuell habe ich es nicht deutlich genug formuliert: :active ist jeder aktuell angeklickte Link, nicht jeder Link, der einmal angeklickt wurde.
Aber diese i-Tüpferl-Reiterei bringt einen nicht weiter, viel interessanter ist, wie man das Problem beheben kann.
Gina, du kannst mittels Firebug (ein Add-On für Firefox) nachsehen, welche Stile zu welcher Zeit wirken, damit kannst du zumindest einmal nachvollziehen, warum die Farbe beim Firefox übernommen wird.

 

[gina1]

AW: a:focus funktioniert nicht in Google Chrome und Safari

Nein, :focus greift dann, wenn der Link ausgewählt wird, bspw. per Tabulator. Dieser Zustand bleibt auch nach dem Klick, wenn ich nicht die Seite wechsle, solange, bis ich den Tab betätige oder woanders auf der Seite hinklicke.. :active greift einzig beim Klicken.

Genau so hatte ich das in einer Anleitung gelesen und aus dem Grund so gemacht. Vorher dem a:focus noch die # der Navigation gegeben. Wie gesagt, im Firefox hat das funktioniert, aber nicht in den genannten Browsern.

 

[cythux]

AW: a:focus funktioniert nicht in Google Chrome und Safari

Eventuell wäre es gut wenn du Deinen CODE mal posteten tust, vielleicht sehen wir ja wo der fehler ist

 

[FlashZange]

AW: a:focus funktioniert nicht in Google Chrome und Safari

Ja, so lässt sich nur raten, was das Problem ist.
Ich rate mal:
Du klickst einen Link an, der auf einen Anker derselben Seite verweist. Bei Firefox bleibt der Link in der Farbe, die du a:focus zugewiesen hast.
Das ändert sich aber wieder, wenn du an eine beliebige Stelle klickst, nehme ich an. Und bei den anderen Browsern klappts gar nicht. Das liegt daran, dass a:focus nur für eine Navigation per Tastatur gedacht ist.
Wenn ich dich richtig verstanden habe, kannst du dein Vorhaben nur mit JavaScript umsetzen, indem du dem angeklickten Link dynamisch eine Klasse zuweist, die du entprechend in CSS stylst.

EDIT: Dass es in Firefox funktioniert, liegt wohl nur am Umgang des Browsers mit focus. Er behält das angeklickte Element im Fokus, die anderen Browser nicht.

 

[Myhar]

AW: a:focus funktioniert nicht in Google Chrome und Safari

Gina, nachdem ich denke, dass du dies hier überlesen hast, hier noch einmal. Außer du möchtest nicht, dass man dir bei deinem Problem hilft:

Ohne zu zeigen, was genau du gemacht hast, kann man dir nicht helfen. Am besten ist immer ein Link zu einem Testcase.

 

[afr0kalypse]

AW: a:focus funktioniert nicht in Google Chrome und Safari

Ich gebe mal folgenden Tipp: a:focus, a:hover und a:active müssen in css eine bestimmte reihenfolge einhalten ansonsten kann es zu problemen kommen.

 

[KaisyTom]

AW: a:focus funktioniert nicht in Google Chrome und Safari

wie schon gesagt: Code/Beispielseite wäre nicht schlecht und vielleicht was genau du erreichen willst.
Ich interpretiere aus deiner Aussage auch noch etwas anderes, habe ich das Gefühl. Zur Klarstellung: :focus ist zur Navigation per Tabulator-Taste auf einer Seite (da komme ich schon ins stutzen, da i.d.R. niemand, vor allem keine Anfänger, sowas noch benutzen) so ist es also möglich den Link hervorzuheben, auf dessen Ziel bei Betätigung der Enter-Taste verwiesen wird.
Die :focus-pseudoklasse ist jedoch nicht dafür da, anzuzeigen, auf welcher Seite der Navigation man sich momentan befindet. Firefox hebt diesen jedoch hervor, da bei einem Verweis auf "#" keine andere Seite geladen wird, der (Tabulator-)Fokus also weiterhin bestand haben kann.
Um dieses Ziel zu erreichen gibt es glaube ich keine ganz so triviale Lösung.
Hier ist am einfachsten, ein übergeordnetes Element zu erstellen (muss für jede Seite gemacht werden [siehe selfhtml->CSS-> css basierte layouts -> css basierte navigationsleiste]) oder eben ein Script in php zu schreiben, das diese Funktion für alle Seiten automatisch ausführt.

Weiter kann ich das hier gerade nicht erörtern, da mein Akku in wenigen Sekunden schlapp macht, aber ich hoffe das hilft schonmal weiter.