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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] List style, image et hover

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] List style, image et hover

n°1528607
lilougirl8
Posté le 14-03-2007 à 19:06:08  profilanswer
 

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>

mood
Publicité
Posté le 14-03-2007 à 19:06:08  profilanswer
 

n°1528726
cgo2
Dum spiro spero
Posté le 15-03-2007 à 08:44:36  profilanswer
 

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
n°1528757
lilougirl8
Posté le 15-03-2007 à 09:45:56  profilanswer
 

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

n°1588284
nadjia
nadjia
Posté le 18-07-2007 à 15:25:22  profilanswer
 

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

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

  [CSS] List style, image et hover

 

Sujets relatifs
[C++] STL - list : doit contenir uniquement des objets dynamiques ??[CSS] Changer de background image sur un div
nombre max d'image par ligneAfficher une image pendant l'exécution d'un script
[HTML] Probleme avec Border & Image[Access] Pilotage scanner et stockage d'image dans Access ?
[CSS] problème de bloc - ajout d'imagesApplet de capture d'image d'une webcam
Lien d'une image erroné 
Plus de sujets relatifs à : [CSS] List style, image et hover

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.082 secondes

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