Dimensions d'une liste

Bonjour, débutant en CSS je me pose une question :
Peux t-on donner directement une largeur à un élément <ul> ou faut-il englober la liste dans une autre boîte sur laquelle on peut donner des dimensions ?
Car je viens de faire l'essai avec une liste toute simple et si je mets une largeur sur l'élément <ul> les puces disparaissent.
A +

Salut,
Oui bien sûr les <ul> sont des éléments de type block donc il acceptent
les propriétés de taille comme les marges verticales aux contraire
des élément en-ligne.
Pour qu'on repère ton problème, tu devrais toujours donner le code correspondant.
Modifié par Hermann (20 Feb 2007 - 09:29)

renato a écrit :
si je mets une largeur sur l'élément <ul> les puces disparaissent.

Bonjour,

Il s'agit d'un problème propre à Internet Explorer, tu pourras trouver un exemple et des explications sur ces pages :

* http://www.test.blog-and-blues.org/haslayout/tests/list1.html
* http://www.test.blog-and-blues.org/haslayout/trad_temp.html#list

Donc, la solution pour un compatibilité maximum, c'est quoi ?
Moi je penche pour enfermer la liste dans un conteneur qui lui accepte des dimensions sans problèmes.
Ou alors ne pas mettre de dimensions du tout.
J'aimerai avoir votre avis sur la question.
Merci.

renato a écrit :
Moi je penche pour enfermer la liste dans un conteneur qui lui accepte des dimensions sans problèmes.

C'est une possibilité, oui.

Toujours un problème avec les listes.
Je fais une liste avec une image à la place des puces :
- dans Firefox, Opéra, Netscape, pas de problème la puce est bien en place.
- Alors que dans I.E. la même puce se décale fortement vers le haut.
Une solution ou pas ?

Et autre problème (toujours avec les listes), car j'essaie de comprendre comment réagit I.E. par rapport aux autres navigateurs. Lorsque je mets une couleur d'arrière-plan à l'élément <ul> :
- Sur I.E. la couleur commence uniqueùent au début du texte.
- Sur les autres navigateurs la couleur commence bien au début des puces.
Donc, quoi faire si on veut là aussi que la liste elle la même apparence partout ?
Merci pour vos conseils.


Le code HTML :

<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

Le code CSS :

ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: normal;
	font-weight: normal;
	color: #000000;
	list-style-image: url(puce.gif);
	background-color: #FFEFAE;	
	width: 300px;
}

Je me demande si lorsqu'on souhaite un alignement précis (un peu comme dans mon exemple de liste avec une puce) et que l'on veut que ce soit quasi identique partout, si la solution n'est pas de faire un tableau ?
Car j'ai fait un essai et tester sur 5 navigateurs différents et je n'ai aucun écart.
Ne soyons pas intégriste : Qu'il disait !!!!!!

Le code HTML :

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="image"></td>
    <td class="texte">Item 1</td>
  </tr>
  <tr>
     <td class="image"></td>
    <td class="texte">Item 2</td>
  </tr>
  <tr>
     <td class="image"></td>
    <td class="texte">Item 3</td>
  </tr>
  <tr>
     <td class="image"></td>
    <td class="texte">Item 4</td>
  </tr>
  <tr>
    <td class="image"></td>
    <td class="texte">Item 4</td>
  </tr>
</table>

Le code CSS :

table {
	width: 150px;
}
.image {
	width: 15px;
	height: 20px;
	background-image: url(puce.gif);
	background-repeat: no-repeat;
	background-position: left;
}
.texte {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000099;
}

Qu'en pensez-vous ?