Bonjour,

Comment je fais pour obtenir des listes non ordonnées avec le symbole de mon choix devant les items?

Par exemple, je pourrais vouloir un  *  devant les items de la liste principale et un  +  devant les items de chaque sous-liste.

* premier

* deuxième

  + sous premier

 + sous deuxième

* troisième

Dans <ul

on peut mettre un type mais cela n'est pas un caractère mais un code, genre <ul type="square">

J'aimerais quelque chose du genre <ul type="*"> mais ça ne marche pas.

Merci pour toute aide.

Salut,

sert toi de ::before

Bonjour, pour le coup c'est de l'HTML/CSS, je déplaces donc le sujet dans la bonne section.

L'attribut type est obsolète en HTML5. Si tu veux un affichage visuel tu dois penser feuille de style.

Soit avec la propriété css list-style-type . Exemple : 

            .liste {
                list-style-type: '* ';
            }
            .liste ul {
                list-style-type: '+ ';
            }

avec le html suivant (je n'ai indiqué qu'une class sur le <ul> parent.)

<ul class="liste">
    <li>premier</li>
    <li>deuxième
        <ul>
            <li>sous premier</li>
            <li>sous deuxième</li>
        </ul></li>
    <li>troisième</li>
</ul>

/!\  Attention à la compatibilité, seul Firefox affiche correctement, IE et chrome utiliseront l'affichage par défaut des listes. Pour un affichage visuel sur tout les navigateur, je pense qu'une image serais mieux.(et plus jolie du coup)

Édit

Frogweb a écrit:

sert toi de ::before

Ha oui, pourquoi pas, je n'y avais pas pensé

-
Edité par AbcAbc6 15 juillet 2019 à 8:49:01

C'est une raison de plus pour ne pas aimer IE.

J'ai essayé toutes sortes de combinaisons, voici la dernière et non la moindre ...

ul { list-style: none}
.lev1::before {content: "* "; display: inline-block; margin: 2em }
Et il y a un .lev2 avec "+", rien ne marche ...

Sans le ul désactivé, le caractère est toujours "+" et pas de marge.

ou place tu ta class lev1? Sur un <li>?

Avec le html que j'ai donné plus haut.

ul {
     list-style: none;
}
.liste li::before {
     content: "* "; 
}
.liste li li::before {
     content: "+ "; 
}

-
Edité par AbcAbc6 16 juillet 2019 à 4:33:07

J'espère que le copier/coller ne me jouera pas de tour!

Voici en bref ce que je fais:

ul { list-style: none}

.level li::before {content: "* "; display: inline-block; margin: 2em }

.level li li::before {content: "+ "; display: inline-block; margin: 4em }

Je mets la classe sur le premier <ul>:

<ul class="level">

Comme dans ton premier exemple.

J'avais mis le "lev2" sur le <ul> intérieur.

J'ai testé ton code et ça fonctionne...

Frogweb:

Sur quel système travailles-tu et avec quel navigateur?

Pour moi, ça ne fonctionne pas avec IE sur W8.1

J'ai demandé d'utiliser Google Chrome même si je ne l'ai pas. Il m'a donné un message d'erreur et je ne sais pas ce qu'il a utilisé.

Pour la liste externe, j'obtient:

+ * ceci est une ligne ...

Pour la liste intérieure, j'obtient:

+ + Une autre ligne ...

Sauf que le premier "+" me dit "blanche" juste après ce "+", étrange ...

Je sais que c'est le premier "+" car je peux demander à Jaws de répéter un caractère et si je suis sur le premier, il me donne ce commentaire.

Avec IE, je n'ai qu'un seul "+" ordinaire, pas d'astérisque ou de blanche.

Dans la doc sur margin, on donne un exemple avec un nombre négatif, genre -1em.

Je ne sais pas ce que veut dire le "em" dans ce contexte.

Avec html 2 et 3, il y avait une indentation automatique avec les listes et les sous-listes.

Si une ligne était trop longue, il se plaçait aligné sur le début de la ligne précédente, après la puce.

Exemple:

.* Première ligne ...

.  suite de la ligne ...

Les "." sont là pour empècher d'effacer les espaces.

Bonjour PierrotLeFou,

Essaye avec ce code :

https://codepen.io/Zonecss/pen/KjOooa

IE sur W8.1 => tu peux nous donner la version c'est ie 11?

-
Edité par AliasDmc 16 juillet 2019 à 20:25:48

>> Je ne sais pas ce que veut dire le "em" dans ce contexte.

bonjour, em est une unité relative à la taille de police. Par défaut 1em vaut 16 pixel. Cette valeur, tout utilisateur d'un navigateur peux la modifier dans les paramètres. 

voir : https://www.w3.org/Style/Examples/007/units.fr.html

Bonjour AbcAbc6,

oui,  pour être plus précis si je ne me trompe pas : 1em correspond à la taille de la police héritée au moment où je fais appelle au em

Par exemple si je fais en prenant exemple sur mon codepen:

.liste ul{font-size:12px;}

alors mon width:0.82em; et  margin-left:-0.82em; se baseront sur le 12px dans le deuxième UL et dans le 1er UL, il prendra la valeur par défaut.

si font-size n'est pas précisé alors tous les UL prendront la valeur par défaut 16px, 150px ou 1px, peut importe.
Mon espace et ma taille est donc plus ou moins grand selon la taille de la police.

Je ne vois pas ce qui te choque ou il y a un truc qui m'échappe?

Au pire,  PierrotLeFou adaptera les tailles et marges à sa convenance.

Le but étant pour le moment que les  * et + s'affichent sous ie (je lui demande de tester)

AliasDmc a écrit:

Bonjour PierrotLeFou,

Essaye avec ce code :

https://codepen.io/Zonecss/pen/KjOooa

IE sur W8.1 => tu peux nous donner la version c'est ie 11?

-
Edité par AliasDmc il y a environ 5 heures

Dois-je essayer d'exécuter cela sur place? Je ne suis pas certain d'avoir saisi dans la page (en anglais).

Si je fais un copier/coller, cela ne marche pas.

Comme je l'ai dit à AbcAbc6, je ne trouve pas ma version de IE. Ce doit être IE-11 car il fait les mises à jour

automatiquement.

Pour le "em" dans margin, ma synthèse vocale peut me jouer des tours si un backspace serait requis et qu'elle ne le voit pas. Ce serait la même chose si on doit faire de la surimpression.

J'ai fait des test préliminaires sur W10 avec JAWS 18 et Google Chrome et il y a une différence dans les puces. Cependant, JAWS n'est pas toujours fidèle dans l'affichage.

Maintenant, je suis passé sur W10. Je suis avec IE 11-0-0-183-62-356
Comme le comportement de IE n'a pas changé, je suppose que j'étais sur cette même version sur W8.1
Avec W10, je suis passé par les versions de ma synthèese vocale JAWS 16, 2019 et 2018 (car 2019 ne marchait pas)
Comme je l'ai dit précédemment, je ne peux me fier totalement àa la réaction de JAWS mais je pense que Google chrome fait mieux dans ce cas.