[RÉGLÉ] Créer une liste à puces, l'image ne s'affiche pas

[jérémie14]

Bonjour à tous,
Cela fait longtemps que je n'étais pas venu et pour cause, j'étais avec Drupal mais je reviens pour recommencer mon site avec mon ancien CMS, Joomla!.

J'ai pris la version 3 de Joomla! et j'ai cherché des templates et j'ai trouvé jsn_escape_free. Le problème est que lorsque j'affiche une liste à puces, il n'y avait aucune puce et aucun espacement. J'ai cherché sur internet et je suis tombé sur un topic de ce forum et j'ai rajouté dans template.ccs :

ul li {
    padding-left: 30px;
    background : url(../templates/jsn_escape_free/images/icons/bullet.gif) no-repeat 18px 8px;
    line-height: 180%;
}

Où l'adresse mène à l'image de la puce.

Le problème est que l'espacement se crée mais pas l'image. J'ai essayé avec d'autres images et même des adresses fictives, cela ne change rien, il ne s'affiche pas le point.

Comment faire pour qu'il s'affiche ?
Merci d'avance.
jérémie 14

[SimonG]

Re : Créer une liste à puces, l'image ne s'affiche pas

Bonjour,

as tu essayé d'afficher ton site avec un template natif de Joomla! afin de voir si tu avais le même problème ?

[lomart]

Re : Créer une liste à puces, l'image ne s'affiche pas

Bonsoir,
Il faut regarder avec Firebug (ou un autre inspecteur de code) si une règle n'écrase pas la règle par défaut que tu as indiqué.
Tu peux aussi essayer d'ajouter !important à la fin de la propriété background
background : url(../templates/jsn_escape_free/images/icons/bullet.gif) no-repeat 18px 8px !important;

[Flagadouille]

Re : Créer une liste à puces, l'image ne s'affiche pas

Regarde au cas ou si tu as bien entré le chemin de l'image ... je suis déjà resté coincé des jours a cause d'un truc aussi con

[jérémie14]

Re : Créer une liste à puces, l'image ne s'affiche pas

Bonjour et merci de vos réponses très rapide et nombreuses (ha Drupal, c'est une autre histoire).

SimonG -> Oui, tout a fait (il y a 5 minutes) et sur Beez3, les listes s'affichent parfaitement.
lomart -> Je regarderai l'inspecteur demain car il commence à se faire tard. Autrement, le !important ne change strictement rien.
Flagadouille -> Oh, une erreur d'extension, c'est bullet.png mais ça marche toujours pas à moins que le css n'accepte que le gif.

---petite pause Gimp---

Ba en faites non, même en gif ça passe pas.

Merci encore, je vais me renseigner pour les inspection de code.
jérémie 14

[jérémie14]

Re : Créer une liste à puces, l'image ne s'affiche pas

Bonjour

Merci, j'ai résolu mon problème, ul li était déjà dans le fichier (j'vais pourtant fait une recherche pour voir s'il y était . Un dernier problème :



L'image est dans le menu ! Je précise que j'ai ôté padding-left: 30px; car sinon, il y a l'espace entre le point et le texte.



Comment faire pour que l'espace soit avant le point ?

Merci d'avance
jérémie 14

[lomart]

Re : Créer une liste à puces, l'image ne s'affiche pas

Comment faire pour que l'espace soit avant le point ?

Il faut augmenter la valeur 18px de la règle indiqué dans votre premier post.
Sinon les fichiers sont corrompus. Il faut utiliser insérer image, la fonction insérer fichier marche de temps en temps

[jérémie14]

Re : Créer une liste à puces, l'image ne s'affiche pas

Bonjour

Sa ne change rien dans firbug quand je modifie les valeurs 18 ou 8. Mais j'ai compris comment sa marche car quand je modifie la ligne d'en dessous, l'espacement des lignes est bien modifié. A moins que Firbug ne prend pas en charge le background.
Ce qu est le plus bizare, c'est que le point est avant hors du champ du texte, sur le menu. Il devrait être aligné sur le texte non ?

jérémie 14

ps : désolé si je pose des questions stupide, je n'ai jamais fait de html/css.
ps : j'ai bien envoyé des images et lors de la prévisualisation, ça m'affichait bien une image.

[jérémie14]

Re : Créer une liste à puces, l'image ne s'affiche pas

Bonjour

Si quelqu'un tomberai sur mon sujet, sachez que j'ai résolu mon problème avec margin-left.

jérémie 14

[SimonG]

Re : Créer une liste à puces, l'image ne s'affiche pas

Je viens de passer ton post en Réglé. Pour la prochaine fois, voici comment faire :

http://forum.joomla.fr/announcement.php?f=176