Forum d'entraide PHPFrance

Bonjour,

J'ai fait un code pour que la page en cours sur mon site a une couleur différente pour que l'utilisateur sache ou il est mais cela ne marche pas.

Merci de votre aide

Le code :

<div id="menu"> 
    
    <dl> 
      <dt><a href="Communication.php"  id="active" title="Notre Offre Communication">Communication</a></dt> 
      
    </dl> 
    <dl> 
      <dt><a href="Audiovisuel.php" id="active" title="Notre Offre Audiovisuel">Audiovisuel</a></dt> 
    </dl> 
    <dl> 
      <dt ><a href="Multimedia.php" id="active" title="Notre Offre Internet">Internet</a></dt> 
    </dl> 
    <dl> 
      <dt><a href="Tarifs_Pro.php" id="active" title="Nos Tarifs">Tarifs</a></dt> 
    </dl>
    <dl> 
      <dt ><a href="References.php" id="active" title="Nos Références">Références</a></dt> 
    </dl>  
    
  </div>

Fichier css :

#menu {
position: absolute;
top: 200px;
left: auto;
margin-left: auto;
margin-right: auto;
z-index:100;
width: 760px;
height: 25px;
background-repeat: no-repeat;
background-position: left top;
border-right-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
border-bottom-color: #000000;
}
#menu dl {
float: left;
width: 145px;
line-height: 25px;
vertical-align: middle;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: normal;
margin-left:10px;
}
#menu dd {
display: none;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: gray;
border-bottom-color: gray;
border-left-color: gray;
}

#menu dt a {
color: #990000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu dt a:focus {
background-color:#384B59;
}
#menu dt a:hover {
text-decoration: underline;
}


dt#active{
color: #000000;
}

Bonjour,

Déjà "id" doit être unique...commence par faire cette correction (cf class).

Bonjour,

Pour chaque lien tu applique la class active si le fichier est le bon.

<dt><a href="Communication.php" class="<?=$_SERVER["PHP_SELF"] == "/Communication.php" ? "active" : "";?>" title="Notre Offre Communication">Communication</a></dt>

Linkside

Désolé mais cela ne marche pas

As-tu changé ton:

dt#active{
color: #000000;
}

en :

dt.active{
color: #000000;
}

?

Attention à vérifier également que la page est bien à la racine du site et pas dans un sous dossier :

$_SERVER["PHP_SELF"] == "/Communication.php" 

Oui celle là et celle de exp9

Attention à vérifier également que la page est bien à la racine du site et pas dans un sous dossier :

$_SERVER["PHP_SELF"] == "/Communication.php" 

Comme le précise Ryle, si ton fichier Communication.php se trouve dans un dossier "/dossierx/" modifie le code par:

$_SERVER["PHP_SELF"] == "/dossierx/Communication.php"

Attention aussi au majuscule.

Tu nous remontre ton code pour voir où tu en es ?

Voila :

<!-- Début des menus déroulants --> 
  <div id="menu"> 
    
    <dl> 
      <dt><a href="Communication.php"  class="<?=$_SERVER["PHP_SELF"] == "/Communication.php" ? "active" : "";?>"  title="Notre Offre Communication">Communication</a></dt> 
      
    </dl> 
    <dl> 
      <dt><a href="Audiovisuel.php"  title="Notre Offre Audiovisuel">Audiovisuel</a></dt> 
    </dl> 
    <dl> 
      <dt ><a href="Multimedia.php"  title="Notre Offre Internet">Internet</a></dt> 
    </dl> 
    <dl> 
      <dt><a href="Tarifs_Pro.php"  title="Nos Tarifs">Tarifs</a></dt> 
    </dl>
    <dl> 
      <dt ><a href="References.php" title="Nos Références">Références</a></dt> 
    </dl>  
    
  </div>
  <!-- Fin des menus déroulants --> 

CSS

#menu {
position: absolute;
top: 200px;
left: auto;
margin-left: auto;
margin-right: auto;
z-index:100;
width: 760px;
height: 25px;
background-repeat: no-repeat;
background-position: left top;
border-right-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
border-bottom-color: #000000;
}
#menu dl {
float: left;
width: 145px;
line-height: 25px;
vertical-align: middle;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: normal;
margin-left:10px;
}
#menu dd {
display: none;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: gray;
border-bottom-color: gray;
border-left-color: gray;
}

#menu dt a {
color: #990000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu dt a:focus {
background-color:#384B59;
}
#menu dt a:hover {
text-decoration: underline;
}

dt.active{
color: #000000;
}

Remplace:

dt.active{
color: #ccc;
}

par

dt a.active{
color: #ccc;
}

Marche sur IE et firefox.

Ta classe "active" est définie pour les éléments de type DT, alors que tu utilises celle-ci dans un lien

Essayes peut être quelque chose comme ceci :