[Résolu]Largeur balise <li> dans un div

Bonjour,
je suis a première utilisation qui est synonyme de problème.
en effet, j'ai un petit souci avec mes balises <li>,
j'attribue une taille (largeur) aux balises mais ça n'applique pas. les balises prennent la largeur occupé uniquement par le texte et non la largeur fixé. ce problème survient sur firefox mais pas sur ie.

<div id="conteneurZoneMenuNews">
  <div id="zoneMenuNews">
    <ul>
      <li>
          echo "test1";
      </li>
      
      <li>
          test2
      </li>
      
      <li>
          test3
      </li>
      
      <li>
          test4
      </li>
    </ul>
 </div>    
</div>

voici le code css

#conteneurZoneMenuNews
{
 position: absolue;
 float:left;
 width:400px;
 height:23px;
 background-color: rgb(246,207,14);
 text-align:left;
 padding:0;
 margin-top:3px;
 margin-right:12px;	
 border: 1px solid black;
}
 
#zoneMenuNews
{
 position: relative;
 width:400px;
 height:23px;
 text-align:left;
 padding:0;
}
#zoneMenuNews ul{
  list-style-type: none; /* Enlève les puces */    
  padding: 0; 
  margin:0; 
  width:400px;
   height:23px;
  /*border: 1px solid red;*/
}
 
#zoneMenuNews ul li{ 
  width:96px;
  border: 1px solid red;
  height:23px;
  display: inline;
  padding:0;
  margin-right:3px; 
  /*display: block;*/
  background: rgb(246,207,14) url(img1.jpg) repeat-x;*/
    
}

Merci
Modifié par brudao (19 Mar 2010 - 12:03)

Bonjour et bienvenu sur le forum,

Le problème que tu rencontres est simplement dû à la présence du display: inline; qui donne à un élément un affichage de type en-ligne (et qui occupe donc seulement l'espace de son contenu).

Par contre en jetant un oeil à ton code, je dirais qu'on peut faire plus simple :

<ul id="zoneMenuNews"> 
  <li>echo "test1"; </li> 
  <li>echo "test2"; </li>        
  <li>echo "test3"; </li>        
  <li>echo "test4"; </li>
</ul>  

#zoneMenuNews { 
 float:left; 
 width:400px; 
 height:23px; 
 margin-top:3px; 
 margin-right:12px;
 list-style-type: none; /* Enlève les puces */ 
 text-align:left; 
 border: 1px solid black; 
 background-color: rgb(246,207,14); 
} 

#zoneMenuNews li{  
  float: left;
  margin-right:3px;  
  width:96px; 
  height:23px; 
  padding:0; 
  border: 1px solid red; 
  background: rgb(246,207,14) url(img1.jpg) repeat-x;*/     
} 

Salut,

si tu veux spécifier une largeur fixe aux éléments de la liste, tu devrais plutôt utiliser :

#zoneMenuNews ul li{  
  width:96px; 
  border: 1px solid red; 
  height:23px; 
  [b]float: left;[/b]
  padding:0; 
  margin-right:3px;  
  background: rgb(246,207,14) url(img1.jpg) repeat-x;*/   
} 

Edit : Pris de vitesse
Modifié par Yvan L. (19 Mar 2010 - 11:07)

Enfin, il me semble qu'une petite révision des bases ne serait pas superflue.
Voici donc un peu de lecture :
- Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne
- Initiation au positionnement en CSS
- Initiation au positionnement CSS (partie 2)
Modifié par Corinne S. (19 Mar 2010 - 11:12)

waouh que vous êtes formidable. les 2 solutions marche.
et celle de Corinne S. allège en plus mon code.

merci énormément! je me lance dans la lecture pour mieux comprendre et moins vous embeter

Salut,

si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.