nicht angemeldet
Hallo
ich habe eine CSS / Listen basierte Navigation, bei der ein rotes Quadrat markieren soll auf welchem Link die Maus gerade steht (ok das sieht man auch so) und welcher Link gerade aktiv ist.
Heisst: Im Normalzustand ist vor den Links kein rotes Quadrat zu sehen, bei Mouse Over taucht das Qaudrat auf, bei Mouse out verschwindet es wieder - soweithab ich das hinbekommen, dann aber. Wenn ich einen Link klicke und die entsprechende Seite aufrufe, soll das Quadrat davor als Markierung stehen bleiben - und genau das passiert nicht. Ich sitze da jetzt seit 2 Wochen vor, habe unzählige Webseiten durchsucht und diverse CSS Bücher gelesen aber egal was ich mache es klappt nicht.
Ich bin für jede Lösung dankbar.
Hier ist der aktuelle Stand zu sehen:
http://www.citysites.de/navtest/
Hier der aktuelle Quellcode mit CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body
{
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 130%;
font-weight: normal;
font-variant: normal;
color: #879449;
margin: 20px;
padding: 0px;
background-color: #FFFFFF;
}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
font-size: 12px;
}
#navcontainer li {
margin: 0 0 1px;
}
#navcontainer a
{
display: block;
padding: 2px 10px 1px 15px;
width: 145px;
color: #8B993E;
text-decoration: none;
height: 16px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #8B993E;
}
#navcontainer a:hover
{
color: #8B993E;
text-decoration: none;
background-image: url(navmarker.gif);
background-repeat: no-repeat;
background-position: 0px 6px;
}
#navcontainer ul ul li { margin: 0 0 1px 0; }
#navcontainer ul ul a
{
display: block;
padding: 3px 0px 0px 20px;
width: 145px;
color: #8B993E;
text-decoration: none;
height: 16px;
border-bottom-style: none;
font-size: 12px;
}
#navcontainer ul ul a:hover
{
color: #8B993E;
text-decoration: none;
background-image: url(navmarker.gif);
background-repeat: no-repeat;
background-position: 5px 6px;
}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6 mit Sublinks</a></li>
<ul>
<li><a href="#">Sub-Link 6_1</a></li>
<li><a href="#">Sub-Link 6_2</a></li>
<li><a href="#">Sub-Link 6_3</a></li>
<li><a href="#">Sub-Link 6_4</a></li>
</ul>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</div>
</body>
</html>