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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1053502
zapan666
Tout est relatif
Posté le 20-04-2005 à 13:51:31  profilanswer
 

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
mood
Publicité
Posté le 20-04-2005 à 13:51:31  profilanswer
 

n°1053662
FlorentG
Posté le 20-04-2005 à 15:17:45  profilanswer
 

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;

n°1053676
zapan666
Tout est relatif
Posté le 20-04-2005 à 15:25:37  profilanswer
 

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.


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

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

 

Sujets relatifs
Problème avec clone !!![C#]Probleme de données entre Form
probleme avec frame[PHP] problème pour faire un require
[CSS] Comment définir plusieurs a:hover ?Probleme xml firefox
[Struts] problème à l'envoi d'un formulaireproblème par rapport aux cellules
Résolu [CSS] Problème de list - display inline 
Plus de sujets relatifs à : [CSS]Problème sur des <li> en inline.


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