28172 sujets

CSS et mise en forme, CSS3

Enlevez le point d'un li

Bonjour
Je voudrai remplacer le point par un astérix ou autre.
J'ai trouvé pour utilsier les entités css mais je ne sais pas enlever le point devant
<ul>
  <li>1er itemp</li>
   <li>2ème itemp</li>
</ul>


li:before {
  content: '\2055 ';
}
Modérateur
Bonjour,

Ça se fait avec la propriété list-style-image qui prendre comme valeur quelque chose du genre url("uneImage.png").

Voir par exemple https://jsfiddle.net/parsimonhi/y25j9v71/ où l'image est un svg, et où l'url est sous forme de data-image (comme ça, pas besoin d'un fichier image externe).

Amicalement,
Bonjour
Super cela fonctionne parfaitement.
Si je comprends cela est encore une méthode différente que celle que j'envisageai ? mais comment trouver d'autres "icones svg" compatibles ? car je n'ai pas trouvé l'élément d'icone affiché dans l'exemple.
Moi j'ai trouvé une liste complète entités css https://www.w3schools.com/cssref/css_entities.asp
Modifié par HDcms (10 Jan 2022 - 15:16)
Modérateur
Bonjour,

Tes "entités" css, ce ne sont que des caractères que tu ajoutes dans un pseudo-élément :before. Pour supprimer les ronds qui s'affichent par défaut, il faut ajouter list-style-type:none à l'ul dans le css.
ul {
  list-style-type: none;
}
li:before {
  content: '\2055 ';
}

Mais ce n'est pas terrible du tout comme solution.

Si tu tiens à tes caractères comme marques devant tes éléments de liste, tu peux simplement utiliser (sans le :before) :
ul {
  list-style-type: '\2055 ';
}

Voir https://jsfiddle.net/parsimonhi/ujqx3ons/

Si tu veux une image au lieu d'un caractère, tu utilises list-style-image  :
ul {
  list-style-image: url('uneImageQuelconque.png');
}

Et là, on peut tout imaginer. Par exemple https://jsfiddle.net/parsimonhi/rtskpvh8/

Amicalement
Modifié par parsimonhi (10 Jan 2022 - 17:22)
Re
Quand tu dis
a écrit :
Mais ce n'est pas terrible du tout comme solution.

je dois comprendre que ce n'est pas bon parce que je l'appliquais au "li" au lieu de "ul" ou alors les entités css ne sont pas standards ? Vont devenir obsolètes…?
Pour les listes , je ne souhaite pas d'images mais quelque chose de simple et standard.
Du coup 
ul {
  list-style-type: '\2055  ';
}


Me convient
Modifié par HDcms (10 Jan 2022 - 16:15)
Modérateur
Bonjour,
HDcms a écrit :
Je dois comprendre que ce n'est pas bon parce que je l'appliquais au "li" au lieu de "ul" ou alors les entités css ne sont pas standards ? Vont devenir obsolètes…?

C'est la combine du :before qui n'était pas terrible, vu qu'on peut afficher un caractère simplement avec list-style-type. Les "entités css", c'est juste un codage des caractères pour éviter les problèmes avec ceux qui sont bizarres. Pour les caractères usuels comme "*", ça marche direct en mettant le caractère. Par exemple :
ul {
    list-style-type: '*';
}


Amicalement,
Modifié par parsimonhi (10 Jan 2022 - 17:22)
Meilleure solution
Modérateur
Bonjour,

HDcms a écrit :
Ok super simplifie, mais du coup pour faire le tour, j'ai été voir toutes les possibilités
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
Je n'ai pas vu '*', cela veut dire qu'avec '', je peux mettre la plupart des "touches du clavier" comme '€' ?

Déjà, tu essaies ! Smiley cligne

Ensuite, il peut éventuellement avec certains caractères y avoir des problèmes d'encodage. C'est pour ça que c'est sans risque quand tu mets des caractères usuels dans ton fichier css, mais que ça peut avoir du sens d'utiliser des "entités css" dans les cas où les caractères ne sont pas usuels.

Il existe une instruction css qui permet de spécifier le charset du fichier css. Par exemple, pour qu'il soit supposé être en utf-8, tu peux ajouter au tout début de ton fichier css :
@charset "utf-8";

Et dans ce cas, si par ailleurs tu enregistres ce fichier css en utf-8, tu devrais pouvoir mettre n'importe quel caractère entre tes ''. Mais ceci n'a d'intérêt que si ton fichier css et ta page html sont dans des charsets différents. Car si la page est par exemple déjà en utf-8 explicitement, tu ne devrais pas avoir à préciser de charset dans ton fichier css qui a par défaut le même charset que la page dans laquelle il va être utilisé.

En résumé :

1) Dans ton fichier html, tu n'oublies pas de mettre dans la partie <head>
<meta charset="utf-8">
Tu enregistres le fichier html en utf-8.

2) Dans ton fichier css, tu utilises n'importe quel caractère, et tu enregistres le fichier css en utf-8.

Ça devrait suffire dans la plupart des cas pour que ça tombe en marche sans avoir besoin de recourir aux entités css.

Amicalement,
Modifié par parsimonhi (10 Jan 2022 - 17:56)
Sujet clos
Aller à