WebDesign by mts

Links und ihre Möglichkeiten der Darstellung

in CSS Webdesign Tutorial, von mts

Links verweisen auf etwas. Ein Link kann auf ein anderes Dokument weisen. Ein anderer Link zeigt auf ein Bild. Ein dritter Link zeigt auf eine bestimmte Stelle im selben Dokument. Für SEOs sind Links Alltag. Links und ihre Gestaltungsmöglichkeiten.

Links, Verweise im Internet. Ohne die Möglichkeit der Links gäbe es vermutlich das Internet nicht in dieser Form.

Ein Klick und man ist auf einem Dokument im fernen China. Ein weiterer Klick auf einen Link und man sitzt in den Bahamas. Der dritte Link öffnet ein wunderbares Bild und der vierte Link ist dann leider ein sogenannter toter Link.

Links werden seit den ewigen Zeiten des Internets getauscht, manchmal auch gehandelt. War die anklickbare Stelle eines Links früher oft ein Bild, setzt sich derzeit eher der Text durch.

Da Links seit eher das Internet prägten, weil sie es ja auch zu dem machen was es ist, haben sich Webstandards für die Gestaltung dieser Links als hilfreich erwiesen.

Nichts vergrault einen Kunden mehr auf einer Website als wenn er einen Link nicht als solchen erkennt.

Jeder Internetneuling lernt:

Fahre ich mit der Maus über einen Text und eine Hand erscheint,
dann kann ich da klicken. Das ist ein Link.
Sehe ich wo einen unterstrichenen Text, dann ist da ein Link.

Nimmt man dieses Erkennungsmerkmale weg, löst dies Verwirrung aus.

Gestaltung eines Links per CSS

Man kann Links sehr gut mit CSS gestalten. Jeder Zustand eines Links ist einzeln ansprechbar.

Wichtig dabei ist die Reihenfolge der einzelnen Angaben und die Reihenfolge im CSS.

Diese verschiedenen Zustände eines Links sind als Pseudoklassen definiert. Werden daher mit einem Doppelpunkt und ohne Zwischenraum angegeben und damit soviele Browser² wie möglich dies auch verstehen sind manchmal Doppelangaben nötig.

• a /*gilt für alle Links */
• a:link/*gilt für alle Links*/
• a:visited /* für alle besuchten Links */
• a:link:focus /*für Links, die den Eingabefocus haben*/
• a:link:hover /* für Links, über denen der Mauszeiger ist */
• a:link:active /*für Links während des Klickens*/
• a:visited:hover/*für besuchte Links, über denen der Mauszeiger ist*/
• a:visited:active /*für besuchte Links während des Klickens*/

/*---------ein Beispiel wo manche  Pseudoklassen gleich formatiert sind--------*/
a {padding:0px 2px;color:#fff; background-color:inherit;text-decoration:underline;}
a:link { color: #fff; background-color: inherit;text-decoration:underline;}
a:visited { color: #f0f0f0; background-color:inherit;text-decoration:none;}
a:link:focus{ color:#F5C052;background-color:inherit;text-decoration:none;}
a:link:hover, 
a:visited:hover { color:#A9711C; background-color: inherit; text-decoration:none;}
a:link:active, 
a:visited:active { color:#a53121;background-color:inherit;}

Tipps und Tricks

Gibt man in einem Dokument zuerst für alle Links generelle Angaben erleichtert man sich die Ausnahmen.

==> Denn Links sollten in einer Website (=die Summe aller Seiten ) erkennbar bleiben und Ausnahmen sollten wirklich nur Ausnahmen bleiben.

Macht man eine Ausnahme, muss man in dieser dieselbe Reihenfolge und die Angaben der generellen Angaben beachten:

Beispiel:

a {padding:0px 2px;color:#fff; background-color:inherit;text-decoration:underline;}

Dies gibt allen Links, egal ob mit oder ohne Pseudoklasse einen Paddingwert von 2px Links und Rechts.

==> Mag ich jetzt irgendwo Links ohne diesen Paddingwert, dann muss ich diesen dort auf 0 setzen.

a.anders {padding:0px 0px;color:#fff; background-color:inherit;text-decoration:underline;}

Die Überschriften hier auf webdesign-in.de haben derzeit eine andere Farbe und andere Größe und andere Schrift als alle anderen Links.

Daher gab ich den jeweiligen Links die class ueber.

a.ueber {padding:0px 2px;color:#CE9A2D; background-color:inherit;text-decoration:underline;}
a.ueber:link { color: #CE9A2D; background-color:inherit;text-decoration:underline;}
a.ueber:visited { color: #f0f0f0; background-color:inherit;text-decoration:none;}
a.ueber:link:focus{ color:#F5C052;background-color:inherit;text-decoration:none;}
a.ueber:link:hover, 
a.ueber:visited:hover { color:#A9711C; background-color: inherit; text-decoration:none;}
a.ueber:link:active, 
a.ueber:visited:active { color:#a53121;background-color:inherit;}

==> Die class wird ohne Abstand mit einem Punkt an das a gestellt, die Pseudoclass ohne Abstand mit einem Doppelpunkt.

Wenn Links springen

Mag man nur bei hover einen Rahmen in einer anderen Farbe oder wechselt man die Padding Werte nur bei hover, dann führt dies zum “Springen”, wenn man mit der Maus drüberfährt.

Dieser Effekt kann gewünscht sein, doch oft treibt er Webmaster zur Verzweiflung, weil sie dies nicht wollen.

Da hilft nur auch dem a allgemein diesen Padding Wert oder einen Rahmen in einer neutralen Farbe zu geben.

Oder den Rahmen einen anderen Element wie dem li einer Liste zuzuordnen.

Breite Anklickfläche

Oft kann man schon Klicken und ist noch gar nicht beim Text.

Dies erleichtert vielen Menschen, die nicht so punktgenau mit der Maus navigieren können das Anklicken.

Dies erreicht man indem man a ein display block und eine gewisse Weite zuweist.

a{display:block; width:8em;}

Die Angabe in em macht die Breite der anklickbaren Fläche von der Schriftgröße abhängig und verhindert unschöne Effekte.

Im Fließtext wäre so ein display block störend, da es einen Zeilenumbruch erzwingt. Diesen Effekt kann man sich ausgesuchte Effekte zunutze machen.

Beispiel:

Hier auf webdesign-in.de sehen Sie auf der Startseite zumeist nur einen Ausschnitt eines Artikels und dann einen Link zum ganzen Artikel.

Mag man nun diesen einen Link immer in einer neuen Zeile, gibt man ihm eine bestimmte class und weist dieser das display block zu.

Bilder als Link

Prinzipiell ist jeder Link, egal ob die anklickbare Sache ein Text oder ein Bild ist, unterstrichen.

Prinzipiell hat ein Bild einen Rahmen. Mag man beides nicht, muss man es eindeutig bestimmen.

/* --Bilder als Link----*/
:link img { border:none;text-decoration:none; }
:visited img { border:none;text-decoration:none; }
:link:active img, :visited:active img { border:none; text-decoration:none;}

==>Die Pseudoclass mit einem Doppelpunkt angeben, dann einen Abstand dann erst das img.

²
Vor allem bei Ankern, also Sprungmarken, kann dies sonst zu Fehlformatierungen führen.

Basis Know-how CSS
Internetmarketing

• Barrierefrei.

Top

10 zu : Links und ihre Möglichkeiten der Darstellung