Tipps und Tricks: Hyperlinks als Block-Elemente
Die Hintergrundfarbe von Hyperlinks zu ändern, sobald du die Maus über sie bewegst, ist einfach. Nur ist der Bereich der Hintergrundfarbe von der Textlänge abhängig, da es sich um Inline-Elemente handelt, die im normalen Textfluß eingefügt sind. Verwandelst du sie aber in Block-Elemente, haben sie Eigenschaften wie <div>-Container.
,
,
,
,
<html>
<head>
<title>Hyperlinks als Block-Elemente</title>
<style type="text/css">
a{
font-family:Verdana;
font-size:12px;
color:#000000;
font-weight:normal;
}
a.link {
display:block;
width:150px;
padding:5px;
background-color:#efefef;
border:1px solid #000000;
margin:5px 0px;
text-align:center;
}
a.link:hover {
color:#ffffff;
background-color:#008000;
}
</style>
</head>
<body>
<a class="link" href="#">Hyperlink 1</a>
<a class="link" href="#">Hyperlink 2</a>
<a class="link" href="#">Hyperlink 3</a>
<a class="link" href="#">Hyperlink 4</a>
<a class="link" href="#">Hyperlink 5</a>
<a class="link" href="#">Hyperlink 6</a>
</body>
</html>
Dieses Beispiel legt für den class-Selektor
.link Hintergrundfarbe,
Rahmen, Innen-
und Außenabstände fest und
display:block deklariert alle Elemente mit diesem Selektor als Block-Elemente.
Die haben den Vorteil, dass man für sie auch Breite und Höhe angeben kann, sodass
alle Links gleiche Abmessungen haben, unabhängig, wie lang der Text ist.
Die Zeile a.link:hover{... legt für den Hover-Effekt eine andere
Schrift-
und Hintergrundfarbe fest. Dies ließ sich früher
nur mit Rollover-Images realisieren.
Browser
Alle gängigen Browser unterstützen display. Die älteren Browser unterstützen den Hover-Effekt und Hyperlinks als Block-Elemente nicht. Wenn dich das nicht stört, kannst du diesen Tipp überall einsetzen.