Horizontale & vertikale Beispiel-Rollover-Navigation

Beispiel-Navigation 1: horizontal

Beispiel-Navigation 2: vertikal

Anweisung in der ausgelagerten CSS-Datei "navi.css" (Beispiel 1)

.navi a:link, .navi a:active, .navi a:visited
{
display: block;
width: 170px;
line-height: 50px;
margin: 5px;
text-decoration: none;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
letter-spacing: 1pt;
font-weight: bold;
color: #333;
background-image: url('../images/button.jpg')
}
.navi a:hover
{
color: #3366FF;
background-image: url('../images/button-rollover.jpg')
}
.navi span
{
margin-left: 55px
}

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="#"><span>Home</span></a></td>
    <td><a href="#"><span>Link 1</span></a></td>
    <td><a href="#"><span>Link 2</span></a></td>
    <td><a href="#"><span>Link 3</span></a></td>
    <td><a href="#"><span>Link 4</span></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
{
display: block;
width: 170px;
line-height: 50px;
margin: 7px;
text-decoration: none;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
letter-spacing: 1pt;
font-weight: bold;
color: #333;
background-image: url('../images/button.jpg')
}
.navi_2 a:hover
{
color: #3366FF;
background-image: url('../images/button-rollover.jpg')
}
.navi_2 span
{
margin-left: 55px
}

Anweisung im Html-Dokument (Beispiel 2)

<html>
<head>
<title>vertikale Rollover-Navigation Beispiel 2</title>
<link rel="stylesheet" type="text/css" href="css/navi.css">
</head>
<body>
 <div class="navi_2">
   <a href="#"><span>Home</span></a>
   <a href="#"><span>Link 1</span></a>
   <a href="#"><span>Link 2</span></a>
   <a href="#"><span>Link 3</span></a>
   <a href="#"><span>Link 4</span></a>
 </div>
</body>
</html>

Beispiel incl. CSS-Datei und Grafiken downloaden!

© www.homepage-vorlagen-webdesign.de