Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» Questions générales et questions de débutants
» [Résolu]Largeur balise <li> dans un div
Auteur
brudao
# 19 Mar 2010 - 10:47:14
Citer
5 Posts
 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)
msn yim 
^
Corinne S.
# 19 Mar 2010 - 11:03:52
Citer
Modérateur
2502 Posts
 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;*/     

}

Il n'est pas nécessaire d'espérer pour entreprendre, ni de réussir pour persévérer.
http://www.inseo.fr 
^
Yvan L.
# 19 Mar 2010 - 11:06:00
Citer
428 Posts
 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; 

  float: left;

  padding:0; 

  margin-right:3px;  

  background: rgb(246,207,14) url(img1.jpg) repeat-x;*/   

}


Edit : Pris de vitesse smile
Modifié par Yvan L. (19 Mar 2010 - 11:07)
buy it, use it, break it, fix it, trash it, change it, upgrade it, charge it, pawn it, zoom it, press it, snap it, work it, erase it, write it, get it, paste it, save it, load it
^
Corinne S.
# 19 Mar 2010 - 11:06:58
Citer
Modérateur
2502 Posts
 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)
Il n'est pas nécessaire d'espérer pour entreprendre, ni de réussir pour persévérer.
http://www.inseo.fr 
^
brudao
# 19 Mar 2010 - 11:50:14
Citer
5 Posts
 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
msn yim 
^
Heyoan
# 19 Mar 2010 - 11:52:47
Citer
Modérateur
8101 Posts
 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. cligne
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
Le sujet est clos.
Aller à