Couleur différente sur l'onglet de la page active

[koKoTis]

Bonjour, je suis entrain de crée un site avec un menu onglet, donc quand je passe le curseur sur l'onglet celui-ci change de couleur, grâce à "onmouseover".

Ce que je voudrai, c'est que l'onglet garde une couleur après le clique lorsque je suis sur la page ver laquelle pointe le lien de cet onglet.

Pourriez vous m'aider ?


Le site en préparation est ici: http://www.lunnatick.fr/pages/gal_ht...it_4/index.htm

[Bisûnûrs]

- http://www.developpez.net/forums/d78...actif-couleur/
- http://www.developpez.net/forums/d25...lude-menu-inc/
- http://www.developpez.net/forums/d84...en-actif-menu/
- http://www.developpez.net/forums/d80...isitee-colore/
- http://www.developpez.net/forums/d41...mise-evidence/
...

[koKoTis]

Merci beaucoup


J'ai donc ceci:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
.bloc_menu_bouts {
   float: left;
   height:107px;
   width:200px;
   cursor:pointer; 
   background-image:url(imgs/onglet_1a.jpg); 
   layer-background-image:url(imgs/onglet_1a.jpg);
}
 
#bloc_menu_bouts li a:hover, #bloc_menu_bouts li a:active, .active {
   background: url(imgs/onglet_1b.jpg);
}

Ni le hover ni le active ne fonctionne

[Bisûnûrs]

Tu as bien rajouté la classe active à l'onglet que tu veux mettre en évidence ?

[koKoTis]

Donc il faut que je mette les deux classe ? comment faire ?

[Bisûnûrs]

Lire la FAQ :
http://css.developpez.com/faq/?page=...ltiples_styles

[koKoTis]

Encore merci

J'ai donc ma balise:

Code :

     <div class="bloc_menu_bouts bloc_menu_bouts li" onClick="location.href='index.htm'"><a href="../index.htm"><h1>Accueil</h1></a></div>

Mais ca ne fonctionne pas

[12monkeys]

Bonjour

Pourquoi avoir mis 2 fois la même classe dans le div ?

Code :

<div class="bloc_menu_bouts bloc_menu_bouts li"

Et puis il manque le CSS pour te répondre. A quoi correspondent tes classes bloc_menu_bouts et li ?

[koKoTis]

Merci de ta réponse

Envoyé par 12monkeys

A quoi correspondent tes classes bloc_menu_bouts et li ?

Code :

1
2
3
#bloc_menu_bouts li a:hover, #bloc_menu_bouts li a:active, .active {
   background: url(imgs/onglet_1b.jpg);
}

Le css complet:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
.bloc_menu_bouts {
   float: left;
   height:107px;
   width:200px;
   cursor:pointer; 
   background-image:url(imgs/onglet_1a.jpg); 
   layer-background-image:url(imgs/onglet_1a.jpg);
}
 
#bloc_menu_bouts li a:hover, #bloc_menu_bouts li a:active, .active {
   background: url(imgs/onglet_1b.jpg);
}

[Bisûnûrs]

Et elle est où ta classe active dans ton HTML ? Faudrait p'tet la mettre pour avoir un résultat.

[koKoTis]

Merci encore

J'ai donc ceci:

Code :

     <div class="bloc_menu_bouts active" onClick="location.href='index.htm'"><a href="../index.htm"><h1>Accueil</h1></a></div>

Ca fonctionne mais pas parfaitement par ce que la couleur reste sur l'onglet même quand je vais sur une autre page

[12monkeys]

Ça en deviens désespérant !

As tu compris le principe du système ? Si tu as 4 pages, tu prends chaque page et tu mets la classe active sur l'onglet de la page courante :

Page 1 :

Code html :

1
2
3
4
<div class="active">menu page courante</div>
<div>menu page autre</div>
<div>menu page autre</div>
etc...

Page 2 :

Code html :

1
2
3
4
<div>menu page autre</div>
<div class="active">menu page courante</div>
<div>menu page autre</div>
etc...

[koKoTis]

On est vraiment obliger de faire sur chaque page ?

car j'utilise un modelé de page

[12monkeys]

Oui en tout cas en HTML, car c'est un langage statique, qui ne permet pas d'interaction...

Il faudra passer par un langage coté serveur ou peut être JavaScript (mais là je sais pas si c'est possible)...

[Bisûnûrs]

Envoyé par koKoTis

car j'utilise un modelé de page

Mais lis les liens qu'on te met ! Ils sont pas là pour faire joli !
Ca se fait en PHP, avec une condition, la solution est dans chacun des liens que j'ai mis plus haut.