[HTML/CSS] problème d'organisation

Marsh Posté le 19-11-2008 à 16:49:58

Bonjour,

j'ai crée une liste en html dans le but d'en faire une barre de navigation : 7 icônes. Chaque icône est une image représentée dans deux états : actif et non actif. Le CSS sert à décaler l'image au survol pour passer de l'inactif à l'actif, comme suit :

Code :

<div id="menu_calculateur">
<ul id="onglets">
<li id="onglet1" <?= $actif1 ?>><a href="#" onclick="page(1); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
<li id="onglet2"><a href="#" onclick="page(2); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
<li id="onglet3"><a href="#" onclick="page(3); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
<li id="onglet4"><a href="#" onclick="page(4); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
<li id="onglet5"><a href="#" onclick="page(5); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
<li id="onglet6"><a href="#" onclick="page(6); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
<li id="onglet7" <?= $actif_r ?>><a href="#" onclick="champ_obligatoire(); return false;"><img src="/climat_images/conference/fond_transparent.png" border="0"/></a></li>
</ul>
</div>

et un fichier CSS qui permet de faire changer l'image de fond de chaque icone au survol :

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;
}

ca marche très bien sous IE et Firefox. Seulement, j'ai envie que ces icones soient cliquables. J'ai donc ajouté un fichier transparent png : La encore ca marche sous IE et firefox, sauf sous IE6 qui ne sait pas interpréter le png, et qui me grise du coup ma barre de navigation.

En gros : Comment je peux faire pour rendre ma liste cliquable sans rien y mettre dedans ? Merci bcp

Message édité par endozen le 19-11-2008 à 18:53:03

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

Reply

Marsh Posté le 19-11-2008 à 16:49:58

Reply

Marsh Posté le 19-11-2008 à 18:50:42

t'es vraiment nul, tu pourrais mettre un gif à la place d'un png...Autosuicide [:azylum] .

Message édité par endozen le 19-11-2008 à 18:53:25

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

Reply

[HTML/CSS] problème d'organisation - Résolu.

Sujets relatifs:

Leave a Replay