Horizontale Rollover-Navigation mit Neon-Glas-Buttons rund
Beispiel-Navigation 1:
Beispiel-Navigation 2:
Anweisung in der ausgelagerten CSS-Datei "navi.css" (Beispiel 1)
.navi a:link, .navi a:active, .navi a:visited
{
font-family: Verdana, Arial, Tahoma;
font-size: 14px;
letter-spacing: 1pt;
font-weight: bold;
color: #ccc;
text-align: center;
display: block;
width: 80px;
line-height: 80px;
margin: 0 10px;
text-decoration: none;
background-image: url('../images/button-blau-2.jpg')
}
.navi a:hover
{
color: #fff;
background-image: url('../images/button-blau.jpg')
}
Anweisung im Html-Dokument (Beispiel 1)
<html>
<head>
<title>horizontale Rollover-Navigation Beispiel 1</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>
Anweisung in der ausgelagerten CSS-Datei "navi.css" (Beispiel 2)
.navi_2 a:link, .navi_2 a:active, .navi_2 a:visited
{
font-family: Verdana, Arial, Tahoma;
font-size: 14px;
letter-spacing: 1pt;
font-weight: bold;
color: #ccc;
text-align: center;
display: block;
width: 80px;
line-height: 80px;
margin: 0 10px;
text-decoration: none;
background-image: url('../images/button-blau-3.jpg')
}
.navi_2 a:hover
{
color: #fff;
background-image: url('../images/button-blau.jpg')
}
Anweisung im Html-Dokument (Beispiel 2)
<html>
<head>
<title>horizontale Rollover-Navigation Beispiel 2</title>
<link rel="stylesheet" type="text/css" href="css/navi.css">
</head>
<body>
<table class="navi_2" 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!