Positionnement du texte par rapport aux puces

Hello

Je n'arrive pas à trouver comment positionner mon texte à coté de mes puces...

http://voilou.fr/test/index_sub3.html (cliquer sur plus d'infos de "pack intense")

J'ai esayé avec un padding top mais sans succès...

Mon code html:

<div class="puce">
<ul>
<li>1 boîte Pachira Relax</li>
<li>1 boîte Pachira Flex</li>
<li>1 boîte Pachira Energy</li>
<li>1 boîte Pachira Slim</li>
<li>1 boîte Pachira Renew</li>
</ul>
</div>

Code CSS:

 /*Puces pour la barre de menu*/
ul {
 padding-left:8px;
 margin-left:0px;
 	background-image:url(/test/barMenuC.png);
	background-repeat:repeat-x;
 }
li {
 float:left; /*pour IE*/
 padding-right:8px;
 list-style-image: url(/test/barMenuF.png);
 margin-left:25px;
 }

 /*Puces pour les descriptifs dans le site*/
.puce ul { background-image:none; }
.puce li {
	float:none;
	list-style-image:url("/test/images/puce.jpg");
	margin-left:20px;
}

Merci pour votre aide !
Modifié par joboy (20 Dec 2009 - 10:47)

Bonjour,

A lire : Des puces en images

Quelques remarques en passant :
- Une Déclaration de Type de Document DTD ou Doctype c'est bien
- Un code conforme et valide, c'est bien aussi (penser à la validation de vos pages)
- Une mise en page en tableau, uniquement si c'est nécessaire (Tutoriels et Gabarits (section Apprendre -Outils) pourront aider à réaliser un site sans tableau)

Vous trouverez de précieuses informations dans la section Apprendre du site (Tutoriels, Articles, et sur les liens associés)

Cdt,
Sylvain

Bonjour,
tu peux mettre tes images en background :

.puce ul{
list-style-type:none;
}
.puce li {
float:none;
height:20px;
line-height:12px;
margin-left:20px;
background:url(/test/images/puce.jpg) center left no-repeat;
}

et ensuite jouer éventuellement sur le height et line-height de tes li