✔ Darstellung link falsch

Status
Nicht offen für weitere Antworten.
B

buddha

Erfahrenes Mitglied
Hi,
Habe ein kleines Menü gebaselt klappt fast alles allerdings wenn man einen Link anklickt werden alle Links als besucht gekennzeichnet, und noch eine Frage kann man die Geschwindigkeit des Ausklappens beeinflußen?
Danke
Code: 
<style type="text/css">
#naviliste
{ 
padding-left: 0px; 
margin:8px 8px 8px 12px;
border: 1px solid  #FFFFFF;
width: 12em;
background-color: #004080;
font: 12px verdana,sans-serif; 
list-style-type:none;
}/*innere box*/
.navi1 { background-color: #6e6d52;}
.navi2 { background-color:#8b8967;}
.navi3 { background-color:#a19f78;}

#active:hover li { display: block; }
#active li { display: none; }

#navi
{ 
list-style-type:none;
width: 170px;
background-color: #5b5a44;
border: 2px  #FFFFFF solid;
}/*äussere box*/

#navi a
{
color: #FFFFFF;
text-decoration: none;
display: block;
border-left: 5px solid #bfbc8e;/*36 - 39 umrandung */
border-bottom: 1px solid #bfbc8e;
border-top: 1px solid  #bfbc8e;
padding: 4px 8px;/*boxabstand*/
}/*navigation 1-4*/

#navi a:visited
{
color: #330000;
}

#navi a:active
{
color: #FFFFFF;
}

#navi a:hover
{
color: #FFFFFF;
border-color: #FFFFFF;
}
body {
	background-color: #CCCCCC;
}
</style>

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Navigation vertikal</title>
</head>
<body>
<div id="navi">
  <ul id="naviliste">
    <li class="navi1" id="active" ><a href="#"   class="navi1" id="current">Navigation 1</a>
      <ul id="subnavlist">
        <!-- -->
        <li class="navi1" id="subactive"><a href="#" id="subcurrent">Untermen&uuml; </a></li>
        <li class="navi1"><a href="#">Untermen&uuml; </a></li>
        <li class="navi1"><a href="#">Untermen&uuml; </a></li>
        <li class="navi1"><a href="#">Untermen&uuml; </a></li>
      </ul>
    </li>
    <li class="navi2" id="active"><a href="#"  class="navi2" id="current">Navigation 2</a>
      <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">Untermen&uuml; </a></li>
        <li class="navi2"><a href="#">Untermen&uuml;</a></li>
        <li class="navi2"><a href="#">Untermen&uuml;</a></li>
        <li class="navi2"><a href="#">Untermen&uuml;</a></li>
      </ul>
    </li>
    <li class="navi3" id="active"><a href="#"  id="current">Navigation 3</a>
      <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">Untermen&uuml; </a></li>
        <li class="navi3"><a href="#">Untermen&uuml;</a></li>
        <li class="navi3" ><a href="#">Untermen&uuml;</a></li>
        <li class="navi3"><a href="#">Untermen&uuml;</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>
 
Hi,

tausch mal die Reihenfolge der Pseudoklassen :active und :hover, denn die ist bei dir verkehrt herum (siehe hierzu auch den Hinweis zur Reihenfolge der Pseudoklassen im Kapitel http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active).

Wenn du dann anschliessend in den href-Attributen ein neues, und vor allem unterschiedliches Ziel angibst, werden die Links wieder weiß angezeigt, und beim Aufruf eines Dokuments nur dieser Link als besucht gekennzeichnet.

Dann solltest du darauf achten, dass IDs in einem Dokument jeweils nur einmal enthalten sein dürfen, ansonsten müssen alle mehrfach aufgerufenen/verwendeten IDs in Klassen umgewandelt werden.

Mit CSS kann die Geschwindigkeit des "Aufklappens" bzw. der Anzeige eines Elements nicht gesteuert werden. Hierfür wäre dann Javascript erforderlich.
 
Hi,
Habe die Links getauscht, jetzt wird der Link gleich als visited angezeigt
Code: 
<style type="text/css">
#naviliste 
{ 
padding-left: 0px; 
margin:8px 8px 8px 12px;
border: 1px solid  #FFFFFF;
width: 12em;
background-color: #004080;
font: 12px verdana,sans-serif; 
list-style-type:none;
}/*innere box*/
.navi1 { background-color: #6e6d52;}
.navi2 { background-color:#8b8967;}
.navi3 { background-color:#a19f78;}

#active:hover li { display: block; }
#active li { display: none; }

#navi
{ 
list-style-type:none;
width: 170px;
background-color: #5b5a44;
border: 2px  #FFFFFF solid;
}/*äussere box*/

#navi a
{
color: #FFFFFF;
text-decoration: none;
display: block;
border-left: 5px solid #bfbc8e;/*36 - 39 umrandung */
border-bottom: 1px solid #bfbc8e;
border-top: 1px solid  #bfbc8e;
padding: 4px 8px;/*boxabstand*/
}/*navigation 1-4*/

#navi a:visited
{
color: #330000;
}
#navi a:hover
{
color: #FFFFFF;
border-color: #FFFFFF; 
background-color: #333300; 
}

#navi a:active
{
color: #FFFFFF;
}

body {
background-color: #CCCCCC;
}
</style>
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Navigation vertikal</title>
</head>
<body>
<div id="navi">
  <ul id="naviliste">
    <li class="navi1" id="active" ><a href="#"   class="navi1" id="current">Navigation 1</a>
      <ul id="subnavlist">
        <!-- -->
        <li class="navi1" id="subactive"><a href="#" id="subcurrent">Untermen&uuml; </a></li>
        <li class="navi1"><a href="#">Untermen&uuml; </a></li>
        <li class="navi1"><a href="#">Untermen&uuml; </a></li>
        <li class="navi1"><a href="impressum.html">Untermen&uuml; </a></li>
      </ul>
    </li>
    <li class="navi2" id="active"><a href="#"  class="navi2" id="current">Navigation 2</a>
      <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">Untermen&uuml; </a></li>
        <li class="navi2"><a href="#">Untermen&uuml;</a></li>
        <li class="navi2"><a href="#">Untermen&uuml;</a></li>
        <li class="navi2"><a href="#">Untermen&uuml;</a></li>
      </ul>
    </li>
    <li class="navi3" id="active"><a href="#"  id="current">Navigation 3</a>
      <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">Untermen&uuml; </a></li>
        <li class="navi3"><a href="#">Untermen&uuml;</a></li>
        <li class="navi3" ><a href="#">Untermen&uuml;</a></li>
        <li class="navi3"><a href="#">Untermen&uuml;</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>
 
Hast du meinen Beitrag nicht vollständig durchgelesen?

michaelsinterface hat gesagt.:
Wenn du dann anschliessend in den href-Attributen ein neues, und vor allem unterschiedliches Ziel angibst, werden die Links wieder weiß angezeigt, und beim Aufruf eines Dokuments nur dieser Link als besucht gekennzeichnet.
Zum Vergrößern anklicken....
Also nochmal: Du musst das hier

Code: 
href="#"
durch neue unterschiedliche Verweisziele ersetzen, denn dieses Ziel hast du ja schon bereits aufgerufen, und da es überall gleich lautet, werden auch alle Links als besucht gekennzeichnet - so gesehen ein völlig normales Verhalten des Browsers.

Und wie ich sehe, hast du die jeweils dreifach verwendeten IDs active, current, subnavlist, subactive, subcurrent auch noch nicht durch Klassen ersetzt.
 
Habe zum Test nur einen Button genommen, jeder Link hat ein unterschiedliches Ziel keine nderung:confused:
HTML: 
</head>
<body>
<div id="navi">
  <ul id="naviliste">
    <li class="navi1" id="active" ><a href="Fotoindex.htm"   class="navi1" id="current">Navigation 1</a>
      <ul id="subnavlist">
        <!-- -->
        <li class="navi1" id="subactive"><a href="impressum.html" id="subcurrent">Untermen&uuml; </a></li>
        <li class="navi1"><a href="index.html">Untermen&uuml; </a></li>
        <li class="navi1"><a href="referenzen.html">Untermen&uuml; </a></li>
        <li class="navi1"><a href="subindex.html">Untermen&uuml; </a></li>
      </ul>
    </li>
</ul></div>
</body>
</html>
 
Bei mir wird da zunächst mal nichts als besucht gekennzeichnet , sondern erst dann, wenn ich eines der Dokumente aufgerufen / besucht habe:
 

Anhänge

  • navigation.png
    navigation.png
    478 Bytes · Aufrufe: 19
  • navigation_visited.png
    navigation_visited.png
    521 Bytes · Aufrufe: 22
Hast du schon mal den Browsercache geleert und anschliessend das Dokument neu aufgerufen?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück