Mettre une image de fond à une balise <li> en css

Mettre une image de fond à une balise <li> en css - HTML/CSS - Programmation

Marsh Posté le 05-03-2005 à 22:06:22    

Voila, à l'aide d'un tuto sur les css j'ai fais un menu vertical déroulant. Pour cela j'ai créé une liste que je modifie avec les css.
Par contre j'arrive à mettre une image de fond à toute la liste et pas à chacuns des boutons du menu. comment faire ?
 
voici le code html pour la liste :
 

Code :
  1. <ul id="menu">
  2. <li><a href="#">Sculptures</a></li>
  3. <li><a href="#">Fabrication</a>   
  4.   <ul>     
  5.    <li class="bouton"><a href="#">Armoires</a></li>
  6.    <li><a href="#">Bibliothèques</a></li>     
  7.    <li><a href="#">Chaises</a></li>     
  8.    <li><a href="#">Bureaux</a></li> 
  9.    <li><a href="#">Tables</a></li>
  10.    <li><a href="#">Divers</a></li>
  11.   </ul> 
  12. </li> 
  13. <li><a href="#">Restauration</a>   
  14.   <ul>     
  15.    <li><a href="#">Armoires</a></li>     
  16.    <li><a href="#">Commodes</a></li>     
  17.    <li><a href="#">Secretaires</a></li>   
  18.    <li><a href="#">Chaises</a></li> 
  19.    <li><a href="#">Bureaux</a></li> 
  20.    <li><a href="#">Tables</a></li> 
  21.    <li><a href="#">Divers</a></li> 
  22.   </ul> 
  23. </li>
  24. </ul>


 
et le code css :

Code :
  1. ul#menu li ul{
  2.   display:none;
  3. }
  4. ul#menu li:hover>ul{
  5.   display:block;
  6. }
  7. ul#menu{
  8.   float:left;
  9. }
  10. ul#menu,ul#menu ul { 
  11. background-image: url('fond.jpg');
  12. border:1px solid #990000; 
  13. list-style:none; 
  14. margin:0px; 
  15. padding:0px; 
  16. width:148px; 
  17. _width:150px;
  18. }
  19. ul#menu ul{ 
  20. position:absolute; 
  21. top:-1px; 
  22. left:148px;
  23. }
  24. ul#menu li { 
  25. position:relative; 
  26. margin:0px; 
  27. padding:0px; 
  28. _display:inline;
  29. }
  30. ul#menu a { 
  31. display:block; 
  32. width:100%; 
  33. color:#000000; 
  34. text-decoration:none
  35. }
  36. ul#menu a:hover { 
  37. background:#000000; 
  38. color:#FFFFFF;
  39. }

Reply

Marsh Posté le 05-03-2005 à 22:06:22   

Reply

Marsh Posté le 05-03-2005 à 22:27:02    

heeuu, tu sais que "ul#menu li:hover>ul" ne fonctionnera pas sous IE, que "_display" n'existe pas et qu'afficher les <li> en inline est une très mauvaise idée?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 06-03-2005 à 00:52:17    

masklinn a écrit :

et qu'afficher les <li> en inline est une très mauvaise idée?


Ah bon, tu préfères les float ?  :??:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 06-03-2005 à 00:58:06    

sibelius a écrit :

Ah bon, tu préfères les float ?  :??:


 [:petrus75]  
 
 http://www.microserfs.net/HFR/petrus/petrusquignol.gif
 
tu parles de mettre des blocs en float plutôt que des inlines seuls?
oui, mettre des images en fond d'éléments inline c'est loin d'être top [:petrus75]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 06-03-2005 à 01:06:23    

masklinn a écrit :

[
tu parles de mettre des blocs en float plutôt que des inlines seuls?
oui, mettre des images en fond d'éléments inline c'est loin d'être top


Bah, l'image doit être en fond du lien (<a> ) pas de la puce (<li> ), non ?
Mais bon, sur le fond, c'est vrai que des images dans un inline, ça le fait pas trop.
Par contre, s'il s'agit de menu simple sans image, je préfère de loin la fluidité du display inline plutôt que du float.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 06-03-2005 à 01:09:39    

sibelius a écrit :

je préfère de loin la fluidité du display inline plutôt que du float.


On est d'accord, mais son problème est qu'il n'arrive pas à mettre ses images en fond des <li> [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 06-03-2005 à 01:14:46    

masklinn a écrit :

On est d'accord, mais son problème est qu'il n'arrive pas à mettre ses images en fond des <li> [:spamafote]


On est d'accord. Je retourne me coucher  :sleep:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 06-03-2005 à 01:21:54    

sibelius a écrit :

On est d'accord. Je retourne me coucher  :sleep:


 :hello:  
neunuit


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 06-03-2005 à 09:56:16    

sibelius a écrit :

Bah, l'image doit être en fond du lien (<a> ) pas de la puce (<li> ), non ?
Mais bon, sur le fond, c'est vrai que des images dans un inline, ça le fait pas trop.
Par contre, s'il s'agit de menu simple sans image, je préfère de loin la fluidité du display inline plutôt que du float.


 
Le display inline ne fonctionne pas avec Opera dans le cas des "li". (en tous cas sous Linux). ET float fonctionne, mais à condition de préciser la longueur de "ul".  


---------------
Expert en expertises
Reply

Marsh Posté le 06-03-2005 à 10:46:40    

@Hermes > OK pour Opera / Linux.
Pour float et le dimensionnement de <ul> je le sais bien.
Ce qui est gênant dans le cas de positionnement flottant, c'est :
- l'alignement difficile à gérer (centrer le menu, aligner à droite = inverse les éléments, etc.)
- le débordement (les float débordent de leur contenuer <ul> sauf définition de la hauteur de <ul> ou utilisation de clear, etc.
 
Rien de méchant, mais en toute théorie (même si tu m'apprends que Opera / Linux l'implémente mal), il est plus propre d'aligner les éléments avec display inline que float qui n'est pas spécifique à cet emploi (même s'il fonctionne en bidouillant un peu)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Sujets relatifs:

Leave a Replay

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