[Résolu] Aligner une puce/image avec les elements d'une liste

Bonjour,

J'ai un petit soucis d'alignement avec ma liste.
Je voudrais aligner l'image en début de chaques éléments avec le texte.

Pour vous eviter de chercher dans les méandres du css, voilà le css qui concerne ma liste:

#information ul {
	margin : 0;
	list-style-image: url(../images/asterisk_orange.png);
	padding : 0px 0px 0px 0px;
}

#information li {
	
}

J'ai essayé plusieurs tests en changeant le padding et margin dans la partie li mais ca ne m'a rien donné...

le site: http://marseille.afev.org/?page_id=3

ca concerne la liste dans le caré gris en haut a droite ( je ferais la meme chose ensuite dans la liste en dessous mais chaques choses en son temps ).

Merci d'avance en tout cas !
Modifié par Mateo_ (16 Mar 2007 - 21:33)

Bonjour,

Le plus simple est de passer ton image de puce en tant qu'arrière-plan de tes éléments de liste et de décaler le texte grâce à un padding-left.

Merci, je vais essayer de tester ca ce soir et je mettrais l'etat d'avancement ici ^^

Rebonjour !

Bon voilà, j'ai essayé de passer tout ca en background mais la puce n'est pas remplacée.

Voilà ce que j'ai mis:

Edit: Vraiment désolé, le voilà dans les balises.

#information ul {
	
	list-style-type: none;
	padding: 0px 0px 0px 0px;
	margin: 0px;
	
}

#information li {

	padding: Xpx Xpx;
	background: url(../images/asterisk_orange.png) no-repeat 0 50%;

}

En fait j'ai essayé avec differents padding mais rien n'y fait...

Quelqu'un pourrait me guider svp ?

Merci d'avance !!
Modifié par Mateo_ (16 Mar 2007 - 21:08)

Salut,

Mateo_, en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne soirée

Désolé pour l'oublie des balises, vraiment.

Bon, j'ai quand meme continué à chercher, et j'ai trouvé une solution.
Je la note ici des fois que quelqu'un face une recherche.
Seulement du coup je ne sais pas pourquoi cette solution là marche. A l'origine j'avais essayé de m'inspirer d'une liste d'un css sur le site csszengarden pour essayer de remplacer la puce.

Au final, je suis allé à la source, sur le site de mammouthland et j'ai remplacé mon css par:

	list-style-type:none;
 	background-image:url(../mon/image.png);
 	background-repeat:no-repeat;
 	background-position:0% 65%;
 	padding-left:20px;

Et ça marche à merveille.

Voilà voilà ^^

Pourquoi ça solutionne le problème?

Mon cas présente une liste à puce qui ne veux pas s'attribuer un padding-left/

Le code html:

<h1>titre</h1>
		<ul id="padding_30">
		<li>liste 1</li>
		<li>liste 2</li>
		</ul>

Le code Css

padding_30 {
padding-left:30px;
margin-left:30px;
}

Effet, ma liste est bloqué à gauche, les puces à l'extrémité et le texte "paddinger" de 10px grace à un div plus haut.

Je ne pije pas !
Modifié par Jay-ko (17 Mar 2007 - 19:20)

Jay-ko a écrit :
Pourquoi ça solutionne le problème?

Mon cas présente une liste à puce qui ne veux pas s'attribuer un padding-left/

Le code html:

<h1>titre</h1>
		<ul id="padding_30">
		<li>liste 1</li>
		<li>liste 2</li>
		</ul>

Le code Css

padding_30 {
padding-left:30px;
margin-left:30px;
}

Effet, ma liste est bloqué à gauche, les puces à l'extrémité et le texte "paddinger" de 10px grace à un div plus haut.

Je ne pije pas !

Et je n'ais pas de puce visible sous IE
Modifié par Jay-ko (17 Mar 2007 - 19:20)

Ca ne changera peut etre rien , mais essaye de mettre le ul dans un div, et d'attribuer l'id au div.

Mais je ne pense pas que ca change quelque chose

bah oui évidement!

merci Mateo.

C'est pas beau ça, deux problèmes résolus en un post
Parcontre je vais pas mettre [Résolu][Résolu]

Super, la réponse à la première question m'a bien servi.