largeur balise <li> dans un div

Version imprimable

Bonjour,

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.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<div id="conteneurZoneMenuNews">
  <div id="zoneMenuNews">
    <ul>
      <li>
          echo "test1";
      </li>
 
      <li>
          test2
      </li>
 
      <li>
          test3
      </li>
 
      <li>
          test4
      </li>
    </ul>
 </div>    
</div>

le code css associé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
#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.

18/03/2010, 19h09
Ethyde

Bonjour,

le comportement que tu décrit est normal pour un élément inline, apres pour pouvoir te donner une solution il faudrait savoir ce que tu veux faire et comment tu veux l'afficher :)

Cordialement.
18/03/2010, 21h14
Erwan31

Bonjour,
si IE applique la largeur d'un élément en display:inline non doté du haslayout (via un zoom:1 le plus souvent) c'est que tu es en mode de rendu Quirks, c-a-d non standard, ce qui signifie très probablement que tu n'as pas déclaré de doctype en haut de ton document ou que tu as déclaré un doctype qui fait basculer ton navigateur dans ce mode (HTML4 transitionnal incomplet par exemple).

Donc déclarer un doctype HTML4 ou XHTML 1.0 complet (strict ou transitionnal selon tes objectifs).
Tu trouveras la liste de doctype sur la FAQ de developpez je crois.

Au passage ton code CSS montre que tu as pas mal de lacunes (beaucoup de code inutile, association de position:absolute avec float...) et sans doute aussi en HTML. Je doute que tu aies besoin de 2 div imbriqués.
19/03/2010, 10h34
brudao

:aie: j'avoue que je ne connait rien du tout sur le css; raison pour laquelle il ya des codes inutiles (que j'ignorai bien sur. re :aie:).

je veux afficher mes éléments sur la même ligne voila pourquoi j'ai utilisé inline. quand je mets display:block; la largeur est appliqué. mais je ne veux pas les afiicher en block.

merci de me comprendre parce que je suis vraiment nul en css

en enlevant le display inline et en mettant un float:left,
ça marche.
Code:

1 2 3 4 5 6 7 8 9 10 #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;*/ }
Erwan31 je te promet de nettoyer mon code en diminuant mes div et autres.

19/03/2010, 13h05
Erwan31

Bonjour, commence par déclarer le bon doctype déjà, ça t'évitera d'avoir trop de mauvaises surprises. Ensuite effectivement dans ce cas il est préférable d'utiliser float:left que display:inline pour éviter cetains décalages horizontaux...