mike70: navigation mit css

Beitrag lesen

hallo, ich möchte nun endlich mal von meinen java navigationen weg und das mit css machen. bin schon etwas vorangekommen (dank der selfhtml-vorlagen:)nun gefällt mir nur eins noch nicht: der neu angewählte button hat das gleiche erscheinungsbild wie der aktuelle. das finde ich verwirrend für den user. gibt es eine möglichkeit, das der neu angewählte button ein anderes erscheinungsbild wir der aktuell angewählte hat? danke für eure hilfe und hier ist mein quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizontale Navigationsleiste mit gleichen Breiten</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

* {margin: 0; padding: 0;}

body {
color: #333;
background-color: #FFF;
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-align: center;
  }
#wrap {
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
}
#header {
height: 150px;
width: 800px;
background-image: url(../images/013_florida_2005.jpg);
}

ul#Navigation {
margin: 0;
padding: 0em;
text-align: center;
background-color: #FFF;
list-style-image: none;
list-style-type: none;
  }

ul#Navigation a, ul#Navigation span {
float: left;
margin: 0.4em;
text-decoration: none;
font-weight: bold;
color: #333;
background-color: #FFF;
padding-top: 0.2em;
padding-right: 1em;
padding-bottom: 0.2em;
padding-left: 1em;
width: 6em;
border: 1px solid #333;
  }
  * html ul#Navigation a, * html ul#Navigation span {  /* Korrektur fuer IE 5.x */
width: 8em;
w\idth: 6em;
background-color: #0F0;
  }
  ul#Navigation a:hover, ul#Navigation span {
color: #FFF;
background-color: #3CF;
border: 1px solid #333;
  }
  ul#Navigation div {
     clear: left;
  }

</style>

</head>
<body>

<div id="wrap">
  <div id="navigation"><ul id="Navigation">

<li><a href="sandra.html">Sandra</a></li>
    <li><a href="jim.html">Jim</a></li>
    <li><li><span>Micha</span></li></li>

</ul></div>
</div>

</body>
</html>