Horizontale Beispiel-Rollover-Navigation

Anweisung in der ausgelagerten CSS-Datei "navi.css"

.navi a:link, .navi a:active, .navi a:visited
{
display: block;
width: 132px;
line-height: 32px;
height: 65px;
text-align: center;
text-decoration: none;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
letter-spacing: 1pt;
font-weight: bold;
color: #fff;
background-image: url('../images/spiegel-button-black.gif')
}
.navi a:hover
{
color: #66CCFF;
background-image: url('../images/spiegel-button-black-hover.gif')
}
.navi
{
margin: 5px 0 20px 0
}

Anweisung im Html-Dokument

<html>
<head>
<title>horizontale Rollover-Navigation</title>
<link rel="stylesheet" type="text/css" href="css/navi.css">
</head>
<body>
<table class="navi" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="#">Home</a></td>
    <td><a href="#">Link 1</a></td>
    <td><a href="#">Link 2</a></td>
    <td><a href="#">Link 3</a></td>
    <td><a href="#">Link 4</a></td>
  </tr>
</table>
</body>
</html>

Beispiel incl. CSS-Datei und Grafiken downloaden!

© www.homepage-vorlagen-webdesign.de