[résolu] Positionnement puce et image

Bonjour le forum,
j'ai un petit problème de positionnement de puce, mais uniquement lorsqu'il y a une image en flottement à coté de ma puce.

-http://www.loterie-loto-keno.com/resultat/resultat-euromillions.php

Comme vous pouvez voir, la puce (ici un petit trèfle) est sur la bannière de gauche, alors que la puce d'après est correctement alignée.

Comment prendre en compte l'image, pour un alignement correct?

Voila le style actuel, j'ai essayé avec des margin et padding, mais sans succès.

.result {
  list-style-image:url(px/note.gif);
}

Merci de votre aide.
Modifié par aieaieaie (04 Nov 2007 - 01:30)

Salut,

je pense qu'il suffit d'affecter list-style-position:inside; à la balise <ul> contenante .

Par contre la hiérarchie des balises n'est pas bonne : il faudrait remplacer

<ul>
	<h2>
		<li>...</li>
	</h2>
</ul>

par

<ul>
	<li>
		<h2>...</h2>
	</li>
</ul>

A+

Bonjour Heyoan,
Effectivement, c'est beaucoup mieux, mais!

Maintenant il y a un décalage, entre l'image de la puce, et le texte de celle ci ...!
As tu une idée?

Merci pour la correction de la hiérarchie de la balise H

Oui car du coup l'élément h2 qui a un rendu par défaut de type bloc se place en dessous.

Tu peux rajouter dans ton css :

li.result h2 { 
	display:inline; 
}

Pour plus d'infos voir les tutos Rendu CSS des balises : bloc et en-ligne et Comment positionner les éléments en CSS ?

A+
Modifié par Heyoan (04 Nov 2007 - 00:34)

bonsoir,

En fait tu peut conserver les puces en externes en ajoutant une marge gauche externe , celle ci va liberer de la place pour la puce.

par exemple :

.result {
  list-style-image:url(px/note.gif);
list-style-position:outside;
margin-left:1em;
}

Mais comme le cafouillage semble provenir de ton titre :
alors tu peut eventuellement passer tes h2 en display:inline; et garder tes puces en dedans , les marges appliqué a h2 par defaut vont aussi disparaitre de ce fait .
ex:

.result h2 {display:inline;}

aux choix

GC

<oups> grillé </>

et ben ... le bonsoir a tous
Modifié par gcyrillus (04 Nov 2007 - 00:46)

Merci pour votre aide, c'est parfait .... ça marche nickel,
sympa pour les liens, c'est vrai que c'est un peu complexe tout ça ....

bonne continuation