Un roll over en CSS avec une seule image

Un roll over en CSS avec une seule image - HTML/CSS - Programmation

Marsh Posté le 22-02-2006 à 09:09:42    

Bonjour,
 
Voilà, j'ai terminé mon menu en css avec une seule image :pt1cable:  
 
Mais maintenant un dernier problème s'impose, je voudrais que le bouton du menu soit sur la position  "hover" lorssque je suis sur la page. :heink:  
On m'a parlé qu'îl fallait mettre <li ="active"> et current.... mais ou les placer ces deux? :cry:  
Voici le code pour une meilleure "visualisation"
 

Code :
  1. <div id="menu">
  2.           <div id="tabs10">
  3.             <ul>
  4.               <li>
  5.               <a href="#" title="accueil">
  6.                 <span>
  7.                   ACCUEIL
  8.                 </span></a></li>
  9.               <li>
  10.               <a href="#" title="moniteurs">
  11.                 <span>
  12.                   MONITEURS
  13.                 </span></a></li>
  14.              <li id="active">
  15.                  
  16.               <a id="current" href="#" title="cours">
  17.                 <span>
  18.                   COURS</span></a></li>
  19.               <li>
  20.               <a href="#" title="tarifs">
  21.                 <span>
  22.                   TARIFS
  23.                 </span></a></li>
  24.               <li>
  25.               <a href="#" title="boutique">
  26.                 <span>
  27.                   BOUTIQUE</span></a></li>
  28.               <li>
  29.               <a href="#" title="contact">
  30.                 <span>
  31.                   CONTACT
  32.                 </span></a></li>
  33.               <li>
  34.              
  35.             </ul>
  36.           </div>
  37.         </div>


 

Code :
  1. #menu {
  2. position: absolute;
  3. top: 101px;
  4. left: 13px;
  5. width: 720px;
  6. height: 24px;
  7. margin: 0px;
  8. padding: 0px;
  9. background: url(images/bcmenu.jpg) repeat;
  10. }
  11. #tabs10 {
  12. float: left;
  13. width: 100%;
  14. font-size: 93%;
  15. line-height: normal;
  16. }
  17. #tabs10 ul {
  18. margin: 0;
  19. padding: 0px 10px 0 0px;
  20. list-style: none;
  21. }
  22. #tabs10 li {
  23. display: inline;
  24. margin: 0;
  25. padding: 0;
  26. }
  27. #tabs10 a {
  28. float: left;
  29. background: url(images/tableftAA.gif) no-repeat left top;
  30. margin: 0;
  31. padding: 0 0 0 4px;
  32. text-decoration: none;
  33. font-weight: bold;
  34. border: none;
  35. }
  36. #tabs10 a span {
  37. float: left;
  38. display: block;
  39. background: url(images/tabrigi22.gif) no-repeat right top;
  40. padding: 5px 15px 4px 6px;
  41. color: #333;
  42. }
  43. /* Commented Backslash Hack hides rule from IE5-Mac \*/
  44. #tabs10 a span {
  45. float: none;
  46. }
  47. /* End IE5-Mac hack */
  48. #tabs9 a:hover span{
  49. color: #FFF;
  50. }
  51. #tabs10 a:hover a#current {
  52. background-position: 0% -43px;
  53. }
  54. #tabs10 a:hover span {
  55. background-position: 100% -43px;
  56. }


 
Merci de votre aide...
voici le lien :
http://www.auto-ecole-daniel.ch/menu.html  
 
Bonne journée
 
Vita

Reply

Marsh Posté le 22-02-2006 à 09:09:42   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed