✔ Verweise mit CSS

[Arndtinho]

Hallo zusammen,

ich habe, für euch wahrscheinlich simples, Problem beim "Gestalten" von Verweisen mit CSS.
Im Grunde soll es eine horizontale Liste aus drei Links sein. Diese bekommen eine hover-Eigenschaft.
Beim Starten der Seite soll "Link 1" rot sein und auch solange so bleiben bis ein anderer Link geklickt wurde.
Der nun aktive Link soll wiederum so lange rot bleiben, bis wieder ein anderer Link geklickt wurde.
Leider bekomme ich das nicht hin. Hier ist der entsprechende Code:

<div id="haupt_navi">
    <ul id="hauptnavi">
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 2</a></li>    
    </ul>
</div>

CSS

#haupt_navi {
clear:both;
font: 80%/1.2 verdana, arial;
width: 964px;
height: 32px;
margin:0;
padding:0;
}

ul#hauptnavi {
position:absolute;
top:192px;
left:25px;
height:27px;
margin:0;
padding:0;

}

ul#hauptnavi li {
float:left; 
list-style-type:none;
background-image:url(../picture/back_hauptnavi.jpg);
}

ul#hauptnavi li a {
display:block;
text-decoration:none;
}
ul#hauptnavi li a:link, li a:visited { 
text-decoration:none;
}

ul#hauptnavi li a:hover {
text-decoration:none;
color: green;
padding:0;
}

ul#hauptnavi li a:active { 
text-decoration:underline;
color: red;
}

Ist dies per CSS überhaupt möglich oder nur in Verbindung mit JavaSvcript oder dergleichen?

Viele Grüße
Arndtinho

 

[Maik]

Hi,

die Pseudoklasse :active ist nicht dafür vorgesehen, den Menüpunkt der aktuell geöffneten Seite "hervorzuheben", da sie ihre Gültigkeit nur so lange besitzt, wie der Nutzer die Maustaste gedrückt hält (:active-Definition: "für gerade angeklickte Elemente").

Dennoch lässt sich dein Vorhaben mit CSS umsetzen, vorausgesetzt, beim Anklicken eines Verweises wird eine neue Seite aufgerufen.

Siehe hierzu beispielsweise Highlighting current page with CSS.

mfg Maik

 

[Arndtinho]

Hallo,

danke für die schnelle Antwort.
Werde ich mir gleich mal anschauen.

>> klappt sehr gut.

Viele Grüße
Arndtinho