Photoshop
Cinema 4d
Fotografie
Weitere Grafiksoftware
HTML / CSS
JavaScript
Flash
PHP
Webserver
Sonstige
Benutzerführung: Bessere Links mit CSS gestalten (CSS Tutorial)
Tutorial erstellt von Chriss_ in 2.1, letzte Änderung am 24.06.2009
Eine an spezielle Link-Arten angepasste Formatierung von Links lässt sich leicht über CSS integrieren und liefert dem Besucher einer Webseite einen tollen Bonus, sofern sein Browser es denn unterstützt. Ich schiele mal ganz ungeniert in Richtung Redmond - der IE 6 spielt noch nicht mit, ab IE 7 geht's dann.
Hinterher sollte das ganze ungefähr so aussehen:
Außerdem gibt das das ganze wieder in Aktion zu sehen.
Ein ganz normaler Link innerhalb unserer Webseite:
Code:
Ein Link zu einer externen Webseite:
Code:
Neben internen und externen Links können auch verschiedene Dateitypen unterschieden werden. Nachfolgend finden sich zwei Beispiele.
PDF-Dokumente:
Code:
andere Dateiformate, z.B. Textdokumente:
Code:
Darüber hinaus können auch E-Mail-Adressen individuell formatiert werden:
Code:
Der findige HTML-Jünger wird jetzt schnell gemerkt haben, dass wir (abgesehen vom externen Link) kein zusätzliches Markup und noch nicht einmal eine Klasse oder ID verwendet haben. Das ist auch richtig so und deswegen ist diese Methode auch so toll, wir regeln nahezu alles im folgenden CSS.
Code:
p a {
color: blue;
}
p a:visited {
color: blue;
}
p a:hover {
color: black;
}
Der erste Abschnitt ist ganz normaler CSS-Unfug, ich möchte, dass die Links in Absätzen blau sind, und auch nach Besuch (die Pseudoklasse :visited) blau bleiben. Bei einem Mousesover soll der Link schwarz bleiben. Getreu der Devise "Don't mess with underline!" bleibt der Strich unter den Links vorhanden. So weiß der Besucher sofort das es sich um Links handelt.
Code:
p a.link-extern span {
position: absolute;
left: -6666px;
width: 6666px;
}
Der erste spannende Teil und die Sonderlösung für externe Links. Zuerst einmal entfernen wir den textlichen Hinweis auf den externen Link mit CSS. Dadurch bekommen Besucher der Seite, die einen CSS-unfähigen Browser haben oder keine Bilder angezeigt bekommen können (z.B. via Screenreader), trotzdem noch den Hinweis, dass es sich um einen externen Link handelt. Wir schaffen dadurch also eine einfache Fallback-Lösung.
Code:
p a.link-extern {
background: url(icons/world_link.png) no-repeat center right;
padding-right: 20px;
}
p a.link-extern:visited {
color: darkgreen;
background: url(icons/world_go.png) no-repeat center right;
padding-right: 20px;
}
Die eigentliche Formatierung des Links ist relativ simpel: Wir setzen ein Icon rechts neben den Text und färben den Text passend zum Icon grün. Dadurch weiß der Besucher: Oha, den Link habe ich schon mal geklickt.
Code:
p a[href^="mailto:"] {
background: url(icons/email.png) no-repeat center left;
padding-left: 20px;
}
Damit formatieren wir alle Links, die eine E-Mail verschicken sollen. Gleiche Formatierung wie bei den externen Links, nur habe ich hier die Grünfärbung weggelassen. Der nicht ganz alltägliche CSS-Befehl, den wir hier sehen, ist wohl der Part: a[href^="mailto:"]. Dieser besagt schlicht, dass alle <a>-Tags die ein href besitzen das mit "mailto:" anfängt (ausgedrückt durch das Zeichen ^=) entsprechend der folgenden Regeln gestyled werden sollen.
Code:
p a[href$='.pdf'] {
background: url(icons/page_white_acrobat.png) no-repeat center left;
padding-left: 20px;
}
p a[href$='.txt'] {
background: url(icons/page_white_text.png) no-repeat center left;
padding-left: 20px;
}
Hier gilt das gleiche wie bei dem E-Mail Link, nur das in diesem Fall nicht der Anfang des hrefs relevant ist sondern das Ende (ausgedrückt durch $=).
Man sieht, das ganze ist eigentlich keine große Sache, erweist sich in der Praxis aber als unheimlich hilfreiche Sache für den Besucher.
Viel Spaß beim Durcharbeiten,
der Chriss
Wieder habe ich die grandiosen Icons von famfamfam.com verwendet, danke erneut an dieser Stelle.
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
Hinterher sollte das ganze ungefähr so aussehen:
Außerdem gibt das das ganze wieder in Aktion zu sehen.
Das Markup in HTML
Ein ganz normaler Link innerhalb unserer Webseite:
Code:
<a href="eineseite.html">Link</a>
Ein Link zu einer externen Webseite:
Code:
<a href="http://www.christianruppelt.de" class="link-extern">externen Link<span> (externer Link)</span></a>
Links für spezielle Dateitypen
Neben internen und externen Links können auch verschiedene Dateitypen unterschieden werden. Nachfolgend finden sich zwei Beispiele.
PDF-Dokumente:
Code:
<a href="beispiel.pdf">PDF Downloads</a>
andere Dateiformate, z.B. Textdokumente:
Code:
<a href="beispiel.txt">Textdokument</a>
Darüber hinaus können auch E-Mail-Adressen individuell formatiert werden:
Code:
<a href="mailto:post@christianruppelt.de">E-Mail-Adressen</a>
Der findige HTML-Jünger wird jetzt schnell gemerkt haben, dass wir (abgesehen vom externen Link) kein zusätzliches Markup und noch nicht einmal eine Klasse oder ID verwendet haben. Das ist auch richtig so und deswegen ist diese Methode auch so toll, wir regeln nahezu alles im folgenden CSS.
Das Stylesheet
Code:
p a {
color: blue;
}
p a:visited {
color: blue;
}
p a:hover {
color: black;
}
Der erste Abschnitt ist ganz normaler CSS-Unfug, ich möchte, dass die Links in Absätzen blau sind, und auch nach Besuch (die Pseudoklasse :visited) blau bleiben. Bei einem Mousesover soll der Link schwarz bleiben. Getreu der Devise "Don't mess with underline!" bleibt der Strich unter den Links vorhanden. So weiß der Besucher sofort das es sich um Links handelt.
Code:
p a.link-extern span {
position: absolute;
left: -6666px;
width: 6666px;
}
Der erste spannende Teil und die Sonderlösung für externe Links. Zuerst einmal entfernen wir den textlichen Hinweis auf den externen Link mit CSS. Dadurch bekommen Besucher der Seite, die einen CSS-unfähigen Browser haben oder keine Bilder angezeigt bekommen können (z.B. via Screenreader), trotzdem noch den Hinweis, dass es sich um einen externen Link handelt. Wir schaffen dadurch also eine einfache Fallback-Lösung.
Code:
p a.link-extern {
background: url(icons/world_link.png) no-repeat center right;
padding-right: 20px;
}
p a.link-extern:visited {
color: darkgreen;
background: url(icons/world_go.png) no-repeat center right;
padding-right: 20px;
}
Die eigentliche Formatierung des Links ist relativ simpel: Wir setzen ein Icon rechts neben den Text und färben den Text passend zum Icon grün. Dadurch weiß der Besucher: Oha, den Link habe ich schon mal geklickt.
Code:
p a[href^="mailto:"] {
background: url(icons/email.png) no-repeat center left;
padding-left: 20px;
}
Damit formatieren wir alle Links, die eine E-Mail verschicken sollen. Gleiche Formatierung wie bei den externen Links, nur habe ich hier die Grünfärbung weggelassen. Der nicht ganz alltägliche CSS-Befehl, den wir hier sehen, ist wohl der Part: a[href^="mailto:"]. Dieser besagt schlicht, dass alle <a>-Tags die ein href besitzen das mit "mailto:" anfängt (ausgedrückt durch das Zeichen ^=) entsprechend der folgenden Regeln gestyled werden sollen.
Code:
p a[href$='.pdf'] {
background: url(icons/page_white_acrobat.png) no-repeat center left;
padding-left: 20px;
}
p a[href$='.txt'] {
background: url(icons/page_white_text.png) no-repeat center left;
padding-left: 20px;
}
Hier gilt das gleiche wie bei dem E-Mail Link, nur das in diesem Fall nicht der Anfang des hrefs relevant ist sondern das Ende (ausgedrückt durch $=).
Man sieht, das ganze ist eigentlich keine große Sache, erweist sich in der Praxis aber als unheimlich hilfreiche Sache für den Besucher.
Viel Spaß beim Durcharbeiten,
der Chriss
Danksagung
Wieder habe ich die grandiosen Icons von famfamfam.com verwendet, danke erneut an dieser Stelle.
>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!
