pseudo class active

Marsh Posté le 28-07-2008 à 18:28:56

Bonjour,

petit soucis complètement incompréhensible :

J'ai réalisé un petit menu avec des onglets en gif, qui changent de couleur si l'on survole ou que le contenu est actif.

fichier css :

Code :

div#menu_calculateur ul#onglets li#onglet1 {
height:55px;
width:57px;
background-image:url(fichiers/menu_cal_event_infos.gif);
background-position: 0 0;
background-repeat:no-repeat;
}
div#menu_calculateur ul#onglets li#onglet1:active {
background-position: 0px -55px; }
div#menu_calculateur ul#onglets li#onglet1:hover {
background-position: 0px -55px; }

fichier php :

Code :

<div id="menu_calculateur">
<ul id="onglets">
<li id="onglet1" <?= $actif1 ?>><a href="#" onclick="page(1); verif_somme_pourcentage(); return false;"><img src="fichiers/fond_transparent.png" border="0"/></a></li>
...
<li id="onglet7" <?= $actif_r ?>><a href="#" onclick="envoi(); verif_somme_pourcentage(); return false;"><img src="fichiers/fond_transparent.png" border="0"/></a></li>
</ul>
</div>

la pseudo class hover marche (IE, et firefox) mais la pseudo class active ne marche ni sous IE, ni sous firefox. Une idée ? Je tourne
en rond :fou:

Message édité par endozen le 28-07-2008 à 18:29:58

---------------
EOS 5D mk II | 17-40 f/4 L USM | 50 f/1.4 USM | 135 f/2 L USM

Reply

Marsh Posté le 28-07-2008 à 18:28:56

Reply

Marsh Posté le 28-07-2008 à 19:48:52

Normalement, on déclare active après hover
http://www.echoecho.com/csslinks.htm

Reply

Marsh Posté le 28-07-2008 à 20:14:43

merci, je verrai demain si ca marche, mais je pense que ca n'a pas d'importance : il donne même un exemple sur le site :

Code :

<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
</style>

Message édité par endozen le 28-07-2008 à 21:36:46

---------------
EOS 5D mk II | 17-40 f/4 L USM | 50 f/1.4 USM | 135 f/2 L USM

Reply

Marsh Posté le 28-07-2008 à 23:48:42

Hi,
de mémoire, la classe "active" correspond à l'état au moment du clic, et non l'état lorsque c'est la page en cours (je dis cela ne sachant pas si tu connais ce détail ou pas).

---------------
NewsletTux - outil de mailing list en PHP MySQL

Reply

Marsh Posté le 29-07-2008 à 09:22:58

J'ai trouvé une solution à mon problème, on my own :

Code :

div#menu_calculateur ul#onglets li#onglet1:hover { background-position: 0px -55px; }
...
div#menu_calculateur ul#onglets li#onglet7:hover { background-position: 0px -55px; }
div#menu_calculateur ul#onglets li#onglet1.actif { background-position: 0px -55px; }
...
div#menu_calculateur ul#onglets li#onglet7.actif { background-position: 0px -55px; }
/* lorsque les conteneurs sont actifs, on garde l'onglet actif */
div.actif {
height:100%;
display: block;
}
div.non_actif {display:none;}

Message édité par endozen le 29-07-2008 à 10:49:25

---------------
EOS 5D mk II | 17-40 f/4 L USM | 50 f/1.4 USM | 135 f/2 L USM

Reply

pseudo class active

Sujets relatifs:

Leave a Replay