[Résolu] Menu_active me rend dingue...

Bonjour, à tous...

Je pose ma première question aprés des mois passer à naviguer sur ce forum formidable...

Donc pour faire cour j'ai un menu en css et tout va bien sauf pour active, c'est à dire quand un menu est cliqué, il reste cliquer afin qu'on se retrouve bien...bref je pense que vous savez de quoi je parle...
Donc ce "active_menu" ne fonctionne pas et je n'en peux plus il me rend dingue...

Si vous pouviez m'aider avec ce css afin que mon menu reste cliqué (surbrillance) aprés click...
Je ne sais pas si c'est important mais c'est un template joomla donc voici un extrait du css :

A savoir aussi que hover fonctionne comme je le veux impeccable mais pas active...

/* NAVIGATION
--------------------------------------------------------- */

#navwrap {
float:left;
margin-left:201px;
margin-right:auto;
max-width:748px;
height: 51px;
position: relative;
z-index: 999;
}

#nav {
width:100%;
display: block;
font-size: 100%;
height: 51px;
}

#nav li a {
display: block;
float: left;
padding: 0 25px;
line-height: 51px;
background: url(../images/vline.gif) no-repeat center left;
color:#999;
}

#nav li a:hover,
#nav li a:active {
display: block;
height: 51px;
background-color:#00ff00;
color:#000000;
}

#active_menu-nav {
font-weight: bold;
background-color:#00FF00;
}

Un grand merci d'avance à tous ceux qui vont me donner la main...
Merci et merci..
Benjamin
Modifié par benenuts (28 Apr 2008 - 12:13)

Je rajoute une illustration pour mieux comprendre...

Hello benenuts et bienvenue ,

je suis un peu surpris par ta déclaration #active_menu-nav : est-ce que tu affectes un nouvel id au li actif plutôt qu'une class ?

Le plus simple est de jeter un oeil à la FAQ : Comment marquer la page en cours comme active dans le menu ?.

A+

Bonjour,

C'est à priori une question de priorité des sélecteurs: #nav li a {} a une priorité de 0102, tandis que #active_menu-nav {} a une priorité de 0100 (donc inférieure).

À lire:
http://openweb.eu.org/articles/cascade_css/

Bonjour et merci de vos réponses rapide...

J'ai donc lu les liens que vous m'avez passer et je vais tenter de suite..
Mais avant je voulais vous direune chose :

J'ai ce menu sur un template pour joomla 1x et le même template pour joomla 1.5.. (que j'ai converti)

Mon soucis est seulement sur le template 1x , sur le template 1.5 (le même) cla fonctionne...

Donc pour tenter j'ai caremment copier / coller le code css de la nav du template 1.5...et tjrs rien...

Pour résumer j'ai 2 menu avec le même css, 1 fonctionne, l'autre pas (disons l'active menu)

C'est quand même fou...

Donc je remet mon code présent dans mes 2 design :

/* NAVIGATION
--------------------------------------------------------- */

#navwrap {
float:left;
margin-left:201px;
margin-right:auto;
max-width:748px;
height: 51px;
position: relative;
z-index: 999;
}

#nav {
width:100%;
height: 51px;
}

#nav {
display: block;
font-size: 100%;
height: 51px;
}

#nav ul {
margin: 0;
padding: 0;
}

#nav li {
background: none;
display: inline;
margin: 0;
padding: 0;
}

#nav li a {
display: block;
float: left;
padding: 0 25px;
line-height: 51px;
background: url(../images/vline.gif) no-repeat center left;
color:#999;
}

#nav li a:hover {
display: block;
height: 51px;
background-color:#333333;
}

#nav li.active a,
#nav li.active a:hover,
#nav li.active a:active,
#nav li.active a:focus {
font-weight: bold;
background-color:#00FF00;
color: #000000;
}

#nav li a.first-item {
background: none;
}

Je continue et merci

Donc youpiiiiiiiiiii j'y suis arriver...

Donc je vous communique mes 2 codes css (différents 1 pour mon template joomla1x et l'autre pour le template joomla 1.5)

C'est l'élément !important qui a fait le boulo...

Pour mon template 1x :

/* NAVIGATION
--------------------------------------------------------- */

#navwrap {
float:left;
margin-left:201px;
margin-right:auto;
max-width:748px;
height: 51px;
position: relative;
z-index: 999;
}

#nav {
width:100%;
height: 51px;
display: block;
font-size: 100%;
}

#nav ul {
margin: 0;
padding: 0;
}

#nav li {
background: none;
display: inline;
margin: 0;
padding: 0;
}

#nav li a {
display: block;
float: left;
padding: 0 25px;
line-height: 51px;
background: url(../images/vline.gif) no-repeat center left;
color:#999;
}

#nav li a:hover {
display: block;
height: 51px;
background-color:#333333;
}

#nav li.active a,
#nav li.active a:hover,
#nav li.active a:active,
#nav li.active a:focus {
font-weight: bold;
background-color:#00FF00;
color: #000000;
}

#active_menu-nav {
color:#000000!important;
font-weight: bold;
background-color:#00FF00!important;
}

#nav li a.first-item {
background: none;
}

Pour le template 1.5 (même résultat lol) :

/* NAVIGATION
--------------------------------------------------------- */

#navwrap {
float:left;
margin-left:201px;
margin-right:auto;
max-width:748px;
height: 51px;
position: relative;
z-index: 999;
}

#nav {
width:100%;
height: 51px;
}

#nav {
display: block;
font-size: 100%;
height: 51px;
}

#nav ul {
margin: 0;
padding: 0;
}

#nav li {
background: none;
display: inline;
margin: 0;
padding: 0;
}

#nav li a {
display: block;
float: left;
padding: 0 25px;
line-height: 51px;
background: url(../images/vline.gif) no-repeat center left;
color:#999;
}

#nav li a:hover {
display: block;
height: 51px;
background-color:#333333;
}

#nav li.active a,
#nav li.active a:hover,
#nav li.active a:active {
font-weight: bold;
background-color:#00FF00;
color: #000000;
}

#nav li a.first-item {
background: none;
}

Donc voila va comprendre charles...
Avec des css différents, j'arrive au même résultat, bon ok...

Et merci beaucoup...
Longue vie à ALSA les meill