[CSS]Problème sur des <li> en inline.

Problème sur des <li> en inline. [CSS] - HTML/CSS - Programmation

Marsh Posté le 20-04-2005 à 13:51:31    

Bonjour,  
 
J'ai un petit problème auquel je n'ai pas encore trouvé de solution.
 
J'ai une série de liste que je mets en Inline. Ca marche nickel sous Internet Explorer mais pas sous FireFox. ( :pt1cable: )Ce n'est pas la première fois que j'ai ce problème là.  
 
Sous Internet Explorer, les elements sont bien en ligne mais sous FireFox, un element prend toute la ligne & semble être completement déformé !  
 
Pour moi, la propriété Inline semble être justifié dans ce cas par le fait que je veux que les élements se suivent en ligne & que si il y a trop d'élement sur la ligne, l'élement suivant passe a la ligne suivante.
 
Si je mets en float: left, j'obtiens le bon effet sur les deux, sauf que j'ai un nouveau problème : le conteneur remonte trop haut  
( exemple sur cette page : http://www.ecole.ensicaen.fr/~musique/?p=photos => l'icone du dossier sort du conteneur)
 
Je pense donc avoir oublié une propriété CSS mais je ne vois pas laquelle  :cry:  
 
Merci pour toute aide éventuelle  :jap:  
 
Code CSS : (qui doit pas être génial génial...)

Code :
  1. ul.commande {
  2. margin: 0px;
  3. padding: 0px;
  4. display: block;
  5. }
  6. ul.commande li {
  7. width: 15em;
  8. margin: 3px;
  9. border: 1px solid black;
  10. background-color: white;
  11. list-style-type: none;
  12. display: inline;
  13. }
  14. ul.commande li a:hover { border: 0px; background-color: #CCF0FF; }
  15. ul.commande li a {
  16. padding: 0.5em;
  17. display: block;
  18. background-color: white;
  19. border: 0px;
  20. }


 
Résultat :  
http://pingouinland.free.fr/pb_css.jpg


Message édité par zapan666 le 20-04-2005 à 14:00:01
Reply

Marsh Posté le 20-04-2005 à 13:51:31   

Reply

Marsh Posté le 20-04-2005 à 15:17:45    

T'as mis une width sur tes li. Or, on ne peut pas fixer une width sur des éléments inline, d'où le bug. J'me demande s'il convertit pas le truc en block. Et sinon, les a block dans des inline, c'est pas cool non plus :D
 
Bref la solution serait display: inline-block, mais géré uniquement par opéra, donc repose sur float: left;

Reply

Marsh Posté le 20-04-2005 à 15:25:37    

FlorentG a écrit :

T'as mis une width sur tes li. Or, on ne peut pas fixer une width sur des éléments inline, d'où le bug. J'me demande s'il convertit pas le truc en block. Et sinon, les a block dans des inline, c'est pas cool non plus :D
 
Bref la solution serait display: inline-block, mais géré uniquement par opéra, donc repose sur float: left;


ouais, le a block, je le sentais bien aussi :P
mais normalement, les li sont pas inline : il n'y a que sur cette page.
 
en tout cas, c'est cool, je sais pourquoi je peux pas le faire maintenant  :p  
...bon, bah, ça va soit être du float:left soit je vais pas faire ce type de présentation.
 
Merci bien.

Reply

Sujets relatifs:

Leave a Replay

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