Homepage-Tipps & -tricks für Webmaster mit CSS

Hyperlinks ohne Unterstrich anzeigen (Formatierung mit text-decoration: none)

Bleiben Hyperlinks (Verweise) unformatiert, so werden diese standardgemäß von den Browsern unterstrichen dargestellt! In manchen Navigations-Menüs kann sich der Unterstrich eher als lästig erweisen. Wie Sie diesen loswerden können, erfahren Sie in nachfolgendem Beispiel (Unter- und Überstrich wird in diesem Beispiel nur beim Hovern angezeigt).

Pseudoklassen: Anweisungen in der extern ausgelagerten CSS-Datei:

/* noch nicht besuchter Link */
.navi a:link
{
text-decoration: none;
color: #000
}
/* besuchter Link */
.navi a:visited
{
text-decoration: none;
color: #FF3333
}
/* für Links, die mit der Tabulator-Taste bedient werden */
.navi a:focus
{
text-decoration: none;
color: #FF9933
}
/* Link beim Überfahren mit der Maus */
.navi a:hover
{
text-decoration: underline overline;
color: #669999
}
/* aktiver Link */
.navi a:active
{
text-decoration: none;
color: #C0C0C0
}

Anweisungen im Html-Dokument:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Hyperlinks ohne Unterstrich</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="navi">
<a href="link1.htm">Link 1</a> |
<a href="link2.htm">Link 2</a> |
<a href="link3.htm">Link 3</a> |
<a href="link4.htm">Link 4</a>
</div>
</body>
</html>

Beispiel ansehen

Logischerweise können in der CSS-Datei auch noch weitere Werte zu Schriftgröße, -familie, -stil oder Hintergrundfarbe, Rahmen etc. zugewiesen werden. Um in einer oder mehreren Klassen den Unterstrich zu aktivieren, ist in der CSS-Datei an entsprechender Stelle der Wert "underline" anzugeben - bei einem Überstrich verwenden Sie "overline".

Übrigens: Besuchte (visited) Links können beispielsweise auch durchgestrichen dargestellt werden; dazu weisen Sie dem a-Tag in der CSS-Datei der Pseudoklasse ":visited" unter der Eigenschaft "text-decoration" den Wert "line-through" zu.

[ veröffentlicht am 29.02.2008 ] __________________________

zurück | weiter

Diese Seite wurde zuletzt am 31.08.2010 11:55 aktualisiert.

Anzeigen

News

Jetzt brandaktuell - trendige Rollover-Buttons mit Spezial-Effekten wie Neon, Glanz, Glossy, Glas, Metall ... auch im Psd-Format mit Beispiel-Navigation zum kostenlosen Download [ ... ]

Tools

Webmaster finden hier außerdem nützliche Homepagetools wie Counter, Gästebuch, Forum etc., die alle kostenlos bereitstehen! [ ... ]

Marktplatz

E-Shops von Host Europe: Professionell & zuverlässig online verkaufen! Schon ab EUR 9,99* im Monat!
[ mehr Infos ]

Zeigen Sie Ihre Fotos als Video kostenlos mit der AquaSoft DiaShow für YouTube ...
[ mehr Infos ]

Jetzt gratis testen:
CHIP FOTO-VIDEO digital mit DVD!
[ mehr Infos ]

Eigene Homepage mit Jimdo - schnell & einfach selbst erstellt incl. eigener Domain für nur EUR 5 / Monat [ mehr Infos ]

Billiger geht's nicht - Webspace & Domain ab 1 EUR mtl.
[ mehr Infos ]

Mit klarmobil.de ab 9 Cent/Min. in alle Netze ohne Grundgebühr keine Vertragsbindung incl. 10 EUR Startguthaben für nur 4,95 EUR - [ jetzt wechseln und sparen! ]