Discussion :

[parfait radin]

Bonjour,

J'ai crée une liste à puces sur un site Wordpress. A la place des carrés je veux une flèche rouge. J'ai donc uploader l'image puis on m'a aidé pour le code, mais ça ne fonctionne pas.

Voici l'url de la page :

http://www.sommeil-infos.com/comment-mieux-dormir/

Le code html de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="puce-rouge" >
<ul >
 <li >Ce que vous devez absolument faire avant de vous coucher, pour être
 sûr à 90% de <strong>passer une bonne nuit</strong> sans vous réveiller -
Page 24.</li><br />
 <li>Vous avez sans doute cette mauvaise habitude qui rend votre sommeil
 médiocre. Découvrez laquelle page 10, et voyez pourquoi il est <b>capital
pour
 vous</b> de vous en débarrasser.</li><br />
 <li>Certains objets - présents dans plus de 3 chambres sur 4 - sont de
 véritables <strong>"tueurs" de sommeil</strong>. Voyez lesquels page
17.</li><br />
 <li>Les <strong>aliments "miracles"</strong> qui favorisent
l'endormissement et qui vous
 feront économiser des milliers d'euros par an de somnifères - Page
15.</li><br />
 <li>La première cause d'insomnie, et comment vous pouvez lutter contre,
<b>
 sans débourser le moindre centime</b> - Page 12.
</li>
</ul></div>

Le code css de ma liste à puces :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.pucerouge ul li {
    display: block;
    background: url(images/puce-rouge.jpg) no-
 
repeat;
    background-position: left 6px;
    border-bottom: 1px dotted #111;
    padding-bottom: 3px;
    margin-bottom: 3px;
    padding-left: 17px;
    color: #999;
    line-height: 1.4em;
}

J'espère qu'avec tout ça vous allez pouvoir m'aider
car je commence vraiment à saturer. Je n'ai pas de grosses
connaissances en codage de sites.

Merci,

Christian

[H.Pascal]

Bonjour, essaye plutôt ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#puce-rouge ul
{
	list-style-image: url('images/puce-rouge.jpg');
{

[parfait radin]

Bonjour,

Non, ça ne fonctionne pas du tout. Ca annule toute la mise en page du site.
Comme si il y avait juste le html et qu'on avait pas encore mis le css.

Au secours !!!

Evidemment j'y ai remis comme avant.

Christian

PS : C'est un Wordpress et ça me parait un peu plus compliqué de comprendre le code.

[ornitho13]

salut,

alors déjà, il y a des incohérence dans le code HTML: Il ne faut pas mettre de <br /> entre les <li></li>

Voici ce que donnerait ton code HTML une fois corrigé:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div id="puce-rouge" >
	<ul >
 		<li >Ce que vous devez absolument faire avant de vous coucher, pour être sûr à 90% de <strong>passer une bonne nuit</strong> sans vous réveiller - Page 24.</li>
		<li>Vous avez sans doute cette mauvaise habitude qui rend votre sommeil médiocre. Découvrez laquelle page 10, et voyez pourquoi il est <b>capital pour vous</b> de vous en débarrasser.</li>
		<li>Certains objets - présents dans plus de 3 chambres sur 4 - sont de véritables <strong>"tueurs" de sommeil</strong>. Voyez lesquels page 17.</li>
		<li>Les <strong>aliments "miracles"</strong> qui favorisent 	l'endormissement et qui vous feront économiser des milliers d'euros par an de somnifères - Page 15.</li>
		<li>La première cause d'insomnie, et comment vous pouvez lutter contre, <b>sans débourser le moindre centime</b> - Page 12. </li>
	</ul>
</div>

Enfin ton code CSS ne peut pas s'appliquer car tu appliques tes propriétés à une classe (.pucerouge) alors que celle ci n'existe pas. Il faut utiliser comme le dit H.Pascal, l'ID (#puce-rouge).

Pour terminer, l'image de ta puce n'existe pas à l'adresse suivante (erreur 404):
http://www.sommeil-infos.com/wp-cont...puce-rouge.jpg

Il faut donc corriger ces points et réessayer le code de H.Pascal qui, c'est certain, fonctionne

[parfait radin]

Salut ornitho13,

Je vais faire ça en fin d'AM ou ce soir.
Je te remercie beaucoup !

Christian

[parfait radin]

Voila. J'ai mis le code comme vous m'avez dit.
J'ai désactivé temporairement car ça met tout
le design du site sens dessus dessous.

Il reste un problème et c'est peut être pour ça
que ça ne va pas :

Le chemin de l'image.

Cette puce rouge je l'ai téléchargé depuis l'admin
de mon site, comme les autres images.

Pourquoi ça ne marche pas et comment faire ?
Car pour les autres images, ça va !

Dans mon admin, ils me donnent ça comme adresse
de ma puce rouge :
http://www.sommeil-infos.com/wp-cont...puce-rouge.jpg

Voila et merci de votre aide.

Christian

[ornitho13]

voici la CSS que tu dois appliquer:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
#puce-rouge li {
   	border-bottom: 1px dotted #111;
    padding-bottom: 3px;
    margin-bottom: 3px;
    color: #999;
    line-height: 1.4em;
}
#puce-rouge ul{
	list-style-image:url("http://www.sommeil-infos.com/wp-content/uploads/puce-rouge.jpg");
}

le problème vient également du "display:block" qui empêche l'apparition de la flèche et qui n'est pas utile, il faut donc le supprimer

[parfait radin]

Merci Ornitho13, t'es un boss !

Ca marche super

Bonne soirée,

Christian

PS : Oups, merci à H.Pascal aussi