Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1605 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1813915
endozen
Endorsen
Posté le 19-11-2008 à 16:49:58  profilanswer
 

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


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

Code :
  1. }
  2. div#menu_calculateur ul#onglets li#onglet1:hover {
  3. background-position: 0px -55px;}
  4. ...
  5. div#menu_calculateur ul#onglets li#onglet7:hover {
  6. background-position: 0px -55px;
  7. }
  8. div#menu_calculateur ul#onglets li#onglet1.actif {
  9. background-position: 0px -55px;
  10. }
  11. ...
  12. div#menu_calculateur ul#onglets li#onglet7.actif {
  13. background-position: 0px -55px;
  14. }


 
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
mood
Publicité
Posté le 19-11-2008 à 16:49:58  profilanswer
 

n°1813977
endozen
Endorsen
Posté le 19-11-2008 à 18:50:42  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[SQL] Problème Order By[RESOLU]jointure d'extraction de données
Probleme de compilation avec les template[Resolu][Mysql] Utiliser un IF ... THEN ... ELSE ... END IF ?
[Résolu] XML+XSL vers XHTML[scriptaculous]Problème Drag n Drop
Problème : Envoi de mailProblème avec LoadVars!!!
[RESOLU] tdatamodule, tclientdataset et ttableprobleme avec la commande make
Plus de sujets relatifs à : [HTML/CSS] problème d'organisation - Résolu.


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR