Discussion :

[The Molo]

Bonjour,

j'ai un petit souci pour les menus de mon site...

voila le bout de css que j'ai créé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
/* Menu Gauche et Droit : lien */
a.mainlevel{
text-align:right;
padding-left:8px;
border-left:2px solid #001166;
font-weight:bold;
color:#001166;
line-height:175%;
}
 
/* Menu Gauche et Droit : lorsque l'on survol le lien*/
a.mainlevel:hover{
padding-left:8px;
font-weight:bold;
border-left:2px solid #669900;
color:#669900;
line-height:175%;
}

J'aimerais bien pouvoir mettre le lien d'une autre couleur lorsque l'on est sur la page. (Juste le lien qui pointe sur la page active) mais je n'y arrives pas !

Merci de votre aide !!!

[Bisûnûrs]

Créé une classe spéciale genre "active". Ensuite avec un langage serveur compare la page sur laquelle tu es et mets cette classe à ton lien qui y correspond.

[The Molo]

Merci de répondre !

Comment puis-je comparer la page sur laquelle je suis? (en Php)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

et mets cette classe à ton lien qui y correspond.

Je ne comprends pas ce que tu veux dire...

Je ne veux pas une couleur différente de lien pour chaque page, je voudrais juste que le lien "actif" soit d'une autre couleur que les autres du menu...
Ce sera tjs la même couleur pour le lien "actif"

[Bisûnûrs]

C'est bien ce que je dis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.active{
   color:red;
}

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="lien1.html" <?php echo ($_SERVER['REQUEST_URI'] == 'lien1.html') ? 'class="active"' : ''>Lien1</a>
<a href="lien2.html" <?php echo ($_SERVER['REQUEST_URI'] == 'lien2.html') ? 'class="active"' : ''>Lien2</a>

Si tu ne fais pas de PHP mais ASP, JSP ou autres, regarde la syntaxe pour ces langages, mais le principe est là.

[The Molo]

Oki, je comprends bien mais comment je fais si j'ai déjà une class pour le lien ?

La 2ème prend le dessus si on est sur la page ???


Merci !

[Bisûnûrs]

Tu peux mettre plusieurs classes dans la même balise, séparées d'un espace :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class="class1 class2">

[The Molo]

J'ai réalisé ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<a href="/site/index.php?option=com_wrapper&Itemid=29" 
<?php if ($_SERVER['REQUEST_URI']== 'accueil.htm')
{
$class="active";
}
else
{
$class="menuhaut";
}
echo $class;
?>> Accueil</a>

Mais ca ne marche pas...

Tu sais me dire si c'est correcte ?

[Bisûnûrs]

Regarde ton code généré, tu dois avoir un truc du style :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="/site/index.php?option=com_wrapper&Itemid=29" active> Accueil</a>

Corrige en conséquence ton code PHP.

[The Molo]

Merci , ca marche !

voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<a href="accueil.htm" <?php 
if ($_SERVER['REQUEST_URI'] == 'accueil.htm')
{
        $class="class='active'";
}
else
{
     $class="class='menuhaut'";
}						
echo $class;
?>> Accueil</a>

J'ai encore un problème seulement :

Voici le code ma CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Menu Haut */
a.menuhaut{
font-family:Tahoma,Arial, Helvetica, sans-serif;
padding-left:6px;
border-left:2px solid #001166;
font-size:11px;
color:#001166;
text-align:left;
}
 
a.menuhaut:hover{
font-family:Tahoma,Arial, Helvetica, sans-serif;
padding-left:6px;
border-left:2px solid #669900;
font-size:11px;
color:#669900;
text-align:left;
}
 
a.active{
font-family:Tahoma,Arial, Helvetica, sans-serif;
padding-left:6px;
border-left:2px solid #669900;
font-size:11px;
color:#669900;
text-align:left;
}

Il me met la petite barre dans la bonne couleur lorsque je suis sur la page active MAIS pas le texte qui est dans mon lien (ici acceuil)

As-tu une idée ?

Merci beaucoup !

[Bisûnûrs]

Vérifie ton code généré, est-il bon ?

De quelle couleur est le texte de ton lien quand il est actif ? (ton résultat pas ce que tu souhaites avoir)

[The Molo]

Voici le code généré :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<td width="75">
<a href="acceuil.htm" class='active'>Accueil</a>
</td>
 
<td width="78">
<a href="equipe.htm" class="menuhaut">L'équipe</a>
</td>

Lorsque je suis sur la page, le lien est de couleur bleu (#001166) càd celui que j'applique a mes liens lorsque l'on est pas sur la page ou lorsque l'on ne survole pas le lien.

J'applique cette couleur pour le texte qui est dans les tables aussi et la les liens sont dans une table.

[Bisûnûrs]

Ta déclaration "active" se situe bien après la déclaration pour tes liens de table ? Sinon essaie en précisant link et visited.

[The Molo]

Oui après comme l'ordre que je t'ai montré.

je viens de remarquer ceci :

dans le code généré, il va a la ligne pour affichier la class :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="accueil.htm" 
                  class="active">Accueil</a>

Ca a p-e quelque chose à voir ?

Que veut-tu dire pas essayer avec link et visited ???

Merci pour ta patience

[Bisûnûrs]

Non, il n'y a pas de problème concernant le retour à la ligne.

Quand je parle de renseigner link et visited c'est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
a.active:link, a.active:visited{
font-family:Tahoma,Arial, Helvetica, sans-serif;
padding-left:6px;
border-left:2px solid #669900;
font-size:11px;
color:#669900;
text-align:left;
}

Je pense qu'étant donné que ton lien est déjà visité et que tu ne lui as pas sépcifié, il prend le style par défaut défini plus haut pour tes liens visités des tables.

[The Molo]

T'es une bête !!!

Ca fonctionne nickel !!!

Merci beaucoup !!!