CSS Link hover & active anpassen

[SidEwigk]

Hallo,
nach einem recht guten Start mit Redaxo CMS bin ich doch jetzt auf ein kleines Problem gestoßen.
Ich konnte ohne Schwierigkeiten ein zusätzliches Template installieren. Doch beim anpassen kriege ich es nicht hin, das im Navigationsmenü die besuchten Menüpunkte die von mir gewünschte Farbe behalten.
Das hover funktioniert, nur leider das active nicht, ich hoffe ihr könnt mir helfen.

Hier der quelltext der CSS: (der erste Navigationspart beinhaltet die Horizontale Navigation, der 2te die vertikale)

/* --- Navigation --- */
#meta {
background-color: #fbba00;
margin:0 0 0 0;

}
#metanav{
margin:12px auto 12px auto;
text-align:center;
}
#metanav ul {
margin:0;
padding:0;
}
#metanav li {
/* background-color: #EFF2F5;
border: 1px solid #FBBA00;
padding: 10px 5px 10px 5px;*/
display: inline;
text-align: center;
margin:4px 4px 4px 0;
font-size: 14px;


}
#metanav li:hover, #metanav li:active {
/* background: url(yellowline/metanav.jpg);*/
color: #FFF;
}
#metanav li a, #metanav li a:visited {
/* display:block;
float:left;*/
background-color: #FBBA00;
border: 1px solid #FBBA00;
padding: 10px 5px 10px 5px;
margin-bottom:0px;
margin-right: 2px;
color: #000;
}
#metanav li a:hover {
/*background: url(yellowline/metanav.jpg);*/
color: #FFF;
}
#metanav li a:active {
color: #FFF;
}
#metanav hr{
/*clear:both;
height:0px;
width:1px;
margin:0;
padding:0;*/
display:none;
}

#header_bottom {
clear:both;
background:url(yellowline/yellowline_header.jpg) no-repeat bottom center ;
/*background: url(yellowline/yellowline_header_bottom.jpg) no-repeat;*/
height: 15px;
margin:0 0 0 0;
border-bottom: 1px solid #FBBA00;
border-top: 1px solid #FBBA00;
}

#mainnav {
float: left;
width: 180px;
margin-top:50px;
}
#mainnav li {
list-style-type: none;
border: 1px solid #FBBA00;
background-color: #FBBA00;
margin: 0px 0px 5px -35px;
font-size: 14px;
}
#mainnav li:hover, #mainnav li:active {
color: #000;
}
#mainnav li a, #mainnav li a:visited {
display:block;
width:153px;
padding: 5px 10px 5px 10px;
color: #000;
}
#mainnav li a:hover {
/* background: url(yellowline/mainnav.jpg);*/
color: #FFF;
}
#mainnav li a:active {
/* background: url(yellowline/mainnav.jpg);*/
color: #FFF;
}

Danke schonmal im vorraus!

[Bartlinux]

Also ich bin da noch nicht so sehr fit aber ich habe das so geloest und es funktioniert.
Vielleicht musst du das nur noch anpassen.

Code: Alles auswählen

div#navibereich a:active {  /** active heisst wenn etwas aktiv wird, durch klicken der Maus **/
color: black;           /** wird die Schrift schwarz und der Hintergrund weiss **/
background-color: white;
border-bottom-color: white; /** der unterstrich soll weiss sein beim klicken **/
 }                   
 

Vielleicht konnte ich Dir ja helfen, schoenen Tag!

[Angie]

Hier mal zwei Denkanstöße:
1. die Reihenfolge der link-Pseudo-Klassen noch mal überprüfen.
Die überschreiben sich sonst gegenseitig wieder. Richtig hier:
a:link
a:visited
a:hover
a:active
2. bei der Ausgabe wird z.B. in der factory-Navigation der aktive Link mit <strong> markiert und ist so auch explizit formatierbar.

[Schragi]

Ich greife das Thema nochmal auf, da ich gerade nicht weiter komme.
Was trage ich ins Modul wie ein, damit der aktive Link in der Navigation nicht wieder schwarz wird, sondern die Farbe vom hover behält?

Mein Navimodul sieht so aus:

Code: Alles auswählen

<?php
$nav = rex_navigation::factory();

echo '<div id="navi">';
echo $nav->get(0,-1,FALSE,TRUE);
echo '</div>';
?>

Mein css so:

Code: Alles auswählen

#navi {
  display: inline; 
  position: relative;
  font-size: 16px;
  font-weight: bold;
}

#navi ul {
  margin-top: 20px; margin-bottom: 20px; padding: 5px;
  background-color:#FFD;
  border: 1px solid #999;
  border-radius:5px;
  float: left;
  list-style-type: none;
}
#navi ul li {
  display: inline;
  padding-right: 20px;
}
#navi ul li a {
  text-decoration: none;
  color: #1a171b;
}
#navi ul li.current a {
  color: #ff7e23;
}
#navi ul li a:hover { 
  text-decoration:none;
  color: #ff7e23;
}

@poster: Für code bitte das code markup benutzen.. sonst wird das unlesbar. Die Forenputze..

[Angie]

Hast du den Firebug installiert?
Dann kannst du gut nachschauen welche Klasse ein Tag hat.

Bei der normalen factory sollte es so gehen:

Code: Alles auswählen

#navi a.rex-current {
color: #ff7e23;
}

Greetz,
Angie

[Schragi]

Hat geklappt, danke!