Um den Leser darüber zu informieren, ob er mit dem nächsten Klick die aktuelle Webseite verlassen wird oder nicht, kann man externe Links gesondert kennzeichnen. Eingebürgert hat sich eine kleine Grafik hinter dem Link, was dann beispielsweise so aussehen kann:
Der “Trick” dahinter ist, dass dem Link eine rechts platzierte Hintergrundgrafik zugewiesen wird. Damit der Linktext aber neben und nicht auf dem Bild steht, wird dieser mit padding-right eingerückt.
den Link ansprechen
Da natürlich nicht sämtliche Links einer Webseite als extern gekennzeichnet werden sollen, reicht es nicht, die obige Formatierung im Stylesheet einfach dem a-Element zuzuweisen. Sonst würden ja alle, also auch die seiteninternen Links, gekennzeichnet werden.
Es gibt zwei verschiedene Möglichkeiten, lediglich externe Links anzusprechen:
1. über eine Klasse
Man weist allen externen Links die Klasse “extern” zu:
<a title="die allwissende Müllhalde" href="http://allwissende.muellhal.de" class="extern" >allwissende.muellhal.de</a>
Im CSS wird .extern dann formatiert:
a.extern { background: url(img/externalURL.png) right center no-repeat; margin-right: 3px; padding-right: 13px; }
Der Nachteil dieser Methode ist natürlich, dass man jeden zu kennzeichnenden Link um diese Klasse erweitern muss, was bei umfangreicheren Projekten mit viel Arbeit verbunden ist.
2. über den absoluten Pfad
Die zweite Technik erfordert keinerlei Änderungen im HTML. Sie besteht darin, im Stylesheet sämtliche Links anzusprechen, deren href-Attribut mit “http:” beginnt:
a[href^="http:"] { background: url(img/externalURL.png) right center no-repeat; margin-right: 3px;padding-right: 13px;}
Hier kommt es allerdings zu Problemen, wenn man auch interne Verlinkungen absolut statt relativ angegeben hat – diese werden dann ebenfalls als extern gekennzeichnet. Danke an Fabian für den Hinweis, dass man dieses Problem umgeht, indem man die eigene Domain für eine gesonderte Formatierung angibt:
a[href^="http://domain.de"] { background: none; margin: 0; padding: 0;}
Hallo,
du kannst das Problem mit den internen absoluten Links einfach lösen:
a[href^="http://neontrauma.de"]:after { content:"";}Quasi ein “Reset”. Bei externen Links sollte man auch
a[href^="https:"]mit einbeziehen.Im Wesentlichen ist diese Variante zu bevorzugen – da man die Klasse mal leicht vergisst. Bin vor ein paar Tagen auf diese Variante umgestiegen, da ich nun einfach bei den Besuchern ausreichenden Browser-Support voraussetze;)
Hallo Fabian,
danke für diese Anmerkung, habe ich gerade im Tutorial ergänzt! :)
Sehr schöne Webseite.
Als CSS und html-Anfänger (Little Boxes 1+2 gelesen), finde ich hier einiges, was mir weiterhalfen kann!
Werde hier öfter draufschauen…
Danke schön! :-)
hihi voll gut, wusste garnich das geht..
bzw. ist mir auch nicht aufgefallen irgendwo, aber sehr sehr brauchbar.
*bookmark
guck hier jetz öfter vorbei
Lg
Ich wusste auch garnich dass es so geht. Allerdings, Frage…Der Internet Explorer und Opera können damit noch nichts anfangen, oder? Apples Safari kann es, soweit bin ich sicher.
Finde solche Hinweise sehr nervend, weil man dann immer doppelt was wegklicken muß – und weiß auch gar nicht wozu das überhaupt gut sein soll? Klar führt der Link auf ne andre Seite… wohin denn sonst?!
Pingback: Externe Links ohne WordPress Plugin kennzeichnen // hombertho.de
Vielen Dank für die tolle Anleitung. Die habe ich auch gleich mal in meinem Blog umgesetzt und hat geholfen ein zusätzliches Plugin einzusparen. Ob es nun was bringt teste ich gerade. Habe nämlich das Problem, dass viele auf meine Links nicht klicken.
Danke
Thomas