[CSS] List style, image et hover

List style, image et hover [CSS] - HTML/CSS - Programmation

Marsh Posté le 14-03-2007 à 19:06:08    

Bonjour, j'ai créer un menu pour mon site donc tout est OK
 
j'ai donc utilisé UL et LI,  
 

Code :
  1. <div id="contenantmenu">
  2.         <h1>Rubriques</h1>
  3.            <div id="menu">    
  4.      <h2>Transaction</h2> 
  5.                   <ul>
  6.          <li><a href="#">Liste de nos biens</a></li>
  7.                  <li><a href="#">Vendre votre bien</a></li>
  8.                    <li><a href="#">Faire estimer votre bien</a></li>
  9.              </ul>
  10.               <h2>Location</h2>
  11.               <ul>
  12.                    <li><a href="#">Liste de nos locations</a></li>
  13.                   <li><a href="#">Louer votre bien</a></li>
  14.                </ul>
  15.                 <h2>Conseil</h2>
  16.              <ul>  
  17.                        <li><a href="#">Conseils immobilier</a></li>
  18.          <li><a href="#">Calculette financiere</a></li>
  19.          <li><a href="#">Glossaire</a></li>
  20.                     <li><a href="#">Liens utiles</a></li>
  21.               </ul>
  22.                <h2>Nous</h2>
  23.             <ul> 
  24.                       <li><a href="#">Nos supports</a></li>
  25.         <li><a href="#">Notre village</a></li>
  26.                    <li><a href="#">Notre region</a></li>
  27.                   <li><a href="#">Notre Agence</a></li>
  28.                 </ul>
  29.     </div>
  30.     </div>


 
 
comment faire pour que les puces soit concerver avec le hover??,  
j'ai utiliser une methode un peu barbare quie ne me plait pas, sur le a:hover j'ai creer une image de fond avec la puce (a la taille "width" du li), on dirai que sous IE7 c'est pas génial et surtout c'est le préchargement au premier clic qui ne me convient pas...
 
J'aimerai le meme style que sur www.jeuxvideo.com
 
voila ma CSS
 

Code :
  1. #contenantmenu { width: 210px; margin: 0px 0px 20px 0px; padding:0px 0px 20px 0px; border-right:1px solid black; border-bottom:1px solid black; background:#003366; color:white;}
  2. #contenantmenu h1{width:210px; margin:0px 0px 20px 0px; font-size:16px; line-height: 18px; background:url(images/trait_titre.gif); text-align:center;  border-top:1px solid white;  }
  3. #menu {width: 180px; margin: 0px auto; padding:20px 0px 0px 0px; background:orange; border:2px solid black;}
  4. #menu ul{width:150px; margin:0px auto 20px auto; padding:0px;  border-left:1px solid black; border-right:1px solid black;border-bottom:1px solid black;background:white;}
  5. #menu li{width:150px; margin:0px; padding:0px;  list-style:none; border-bottom:1px dotted orange; }
  6. #menu a{width:135px; padding-left: 15px; text-decoration:none; display:block; background:url(images/puce-menu.png);background-repeat: no-repeat; background-position: 5px center; color:#003366; font-size:11px;}
  7. #menu a:hover{background:url(images/puce-menu-hover.png);font-weight:bold; color:white}
  8. #menu h2{width:130px;  margin:0px auto; padding:0px 10px; text-align:center; font-size:12px; line-height: 16px; border:1px solid black; background:url(images/trait_titre.gif); }
  9. </style>

Reply

Marsh Posté le 14-03-2007 à 19:06:08   

Reply

Marsh Posté le 15-03-2007 à 08:44:36    

Plusieurs solutions :
- Soit ta puce ne change pas, auquel cas il s'agit d'une image de fond transparente, et tu ne fais varier que le background-color (c'est le cas pour le site que tu cites)
- Soit ta puce change, auquel cas tu es sur le bonne voix. Pour éviter le préchargement, fait une seule image qui contient les 2 background, et fait varier l'alignement du background (un coup left, un coup right). Tu peux regarder comment est fait le menu de http://www.om.net/ par exemple ( http://www.om.net/image/site/fr/menu/m_saison.gif ).


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 15-03-2007 à 09:45:56    

daccor merci bcp :)...en cerchant jai vu ce dont tu me parle pr les 2 background, ds mon cas elle ne change pas de couleur alor je vai tester la premiere methode et on vera bien  
 
merci

Reply

Marsh Posté le 18-07-2007 à 15:25:22    

bonjour tout le monde,
 
Voila j'ai un probleme avec mon css, j'ai un menu et je veux differencier le lient qui est activer par le a: active selement cette dernier ne fonction pas et je n'est rien compris le link hover et visited fonctione normalement  mais le activate non !!
en voici mon css complet si vous avez compris quelque choses ...:

Code :
  1. ul#mainlevel-nav {
  2. margin:0px;
  3. padding:0;
  4. height:33px;
  5. }
  7. ul#mainlevel-nav li {
  8. list-style: none;
  9. display:inline;
  10. height:33px;
  11. width:124px;
  12. }
  15. ul#mainlevel-nav li
  16. a:link{
  17. font-size:12px;
  18. color:white;
  19. font-weight:normal;
  20. text-align:center;
  21. background:url(../images/buttontop_over.jpg) no-repeat;
  22. line-height:33px;
  23. height:33px;
  24. width:124px;
  25. display: block;
  26. float:left;
  27. }
  28. ul#mainlevel-nav li
  29. a:visited{
  30. font-size:12px;
  31. color:white;
  32. font-weight:normal;
  33. text-align:center;
  34. background:url(../images/buttontop_over.jpg) no-repeat;
  35. line-height:33px;
  36. height:33px;
  37. width:124px;
  38. display: block;
  39. float:left;
  40. }
  41. ul#mainlevel-nav li
  42. a:hover {
  43. color:white;
  44. font-size:12px;
  45. font-weight:bold;
  46. text-align:normal;
  47. background:url(../images/buttontop_normal.jpg) no-repeat;
  48. line-height:33px;
  49. height:33px;
  50. width:124px;
  51. }
  52. ul#mainlevel-nav li
  53. a:active {
  54. color:white;
  55. font-size:12px;
  56. font-weight:bold;
  57. text-align:normal;
  58. background:url(../images/buttontop_normal.jpg) no-repeat;
  59. line-height:33px;
  60. height:33px;
  61. width:124px;
  62. }


 
voila je vous remerci d'avance,j'ai due certainement loupper quequechose tres bete:oops: , si ca se trouve vous la verrais vous !
@+


---------------
informatique
Reply

Sujets relatifs:

Leave a Replay

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