nicht angemeldet
Navigation mit Listen - Problem bei a:active
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>
-
Hallo,
wie definierst du, dass der Link "aktiv?" ist?
bydey
--
-- noch immer ein erfolgloser <DIV> Jünger -- -
Hallo Kethryl,
das Pseudoformat a:active wird nur im Moment der Betätigung des Links (Mausclick, Enter) zur Darstellung angewendet.
Die Anzeige der aktuellen Seite lässt sich über Pseudoformate nicht realisieren. Weise dem aktiven <li> eine andere Klasse zu. Der Mehraufwand lohnt sich, da du dann auch gleich den href auf sich selbst entfernen kannst.
Viele Grüße,
Jochen
-
Hallo Maxx
hast Du dazu einen Vorschlag? Hab ich auch schon versucht aver wenn ich <li> einen einegen Stil zuordne und den Link entferne zerhaut es mir jedesmal die komplette Navigation unterhalb des entsprechenden <li>.
Kann natürlich auch sein , dass ich nach zwei Wochen betriebsblind bin.
gruß
kethrylHallo Kethryl,
das Pseudoformat a:active wird nur im Moment der Betätigung des Links (Mausclick, Enter) zur Darstellung angewendet.
Die Anzeige der aktuellen Seite lässt sich über Pseudoformate nicht realisieren. Weise dem aktiven <li> eine andere Klasse zu. Der Mehraufwand lohnt sich, da du dann auch gleich den href auf sich selbst entfernen kannst.
Viele Grüße,
Jochen
-
Hallo,
<li class="active"><a href.......</li>
#active a{
color: #8B993E;
text-decoration: none;
background-image: url(navmarker.gif);
background-repeat: no-repeat;
background-position: 0px 6px;
cursor: default;}bydey
--
-- noch immer ein erfolgloser <DIV> Jünger ---
Hi dey
danke für die Hilfe - aber ich hab ein paar Anmerkungen
steht für ID
. steht für class
also .active a
das a lassen wir mal weg und nehmen nur .active und schon passt das Ganze zu meinem Problem.
Danke vielmals - betriebsblindheit behoben - Problem gelöst.
Gruß
KethrylHallo,
<li class="active"><a href.......</li>
#active a{
color: #8B993E;
text-decoration: none;
background-image: url(navmarker.gif);
background-repeat: no-repeat;
background-position: 0px 6px;
cursor: default;}bydey
-
Hallo,
Danke vielmals - betriebsblindheit behoben - Problem gelöst.
Da stellt sich doch die Frage, wer von uns 2 blind ist, bei den vielen Fehlern, die ich zum Frühstück eingebaut habe?!
bydey
--
-- noch immer ein erfolgloser <DIV> Jünger --
-
-
-
-