Discussion :

[Pierre Fauconnier]

Salut.

J'ai un souci css (je pense). Lorsque les <li> sont trop longues et que le navigateur passe à la ligne, les lignes sont alignées sur la puce et pas sur le texte qui suit celle-ci. Je pensais que par défaut, elles étaient alignées sur le texte de la première ligne de <li> et pas sur la puce...



J'ai regardé divers posts sur le sujet, mais je ne n'ai pas trouvé de solution au problème qui se pose sur FireFox et sur IE.

Merci déjà pour vos idées

[Sodium]

En effet, par défaut ça devrait être bon, tu as peut-être un framework CSS qui écrase la règle ?

Tu dois utiliser la propriété list-style-position.
https://www.w3schools.com/cssref/pr_...e-position.asp

[Pierre Fauconnier]

Merci pour cette réponse.

J'avais essayé list-style-position: outside sur <li> et pas sur <ul>... Ceci dit, même sur <ul>, ça ne fonctionne pas avec outside et j'ai toujours le décalage. Je n'ai pas de framework css et j'ai vérifié les quelques fichiers css utilisés pour m'assurer qu'il n'y a bien qu'une seule entrée ul{...}...

D'autres idées?

[Sodium]

Il faudrait que tu donnes le HTML et CSS de tes listes, sinon ça va être compliqué.

[Pierre Fauconnier]

Voici

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
				<ul id="trainingContent"><li>Qu'est-ce qu'une formule? Qu'est-ce qu'une fonction?</li><li>
Syntaxe des formules et fonctions d'Excel</li><li>
Outils d'aide à la conception, la compréhension et le débogage de formules</li><li>
Rappels sur les tables de données (création, utilité, utilisation, ...)</li><li>
Types de données: textes, nombres, dates/heures, valeurs booléennes (VRAI/FAUX), valeurs d'erreur</li><li>
Opérateurs, fonctions, ordres de résolution des traitement</li><li>
Méthode de réalisation d'une formule Excel dynamique, pérenne et évolutive</li><li>
Manipulations diverses sur une quinzaine de fonctions "phare" d'Excel</li><li>
Traitement des données textuelles (assembler ou désassembler des textes, ...</li><li>
Transformation de données d'un type vers un autre (transtypage)</li><li>
"Drill" et exercices d'entrainement à l'écriture de formules Excel</li><li>
Pièges du traitement des dates en fonction des pays et analyse des contournements possibles</li><li>
Formules et fonctions logiques et conditionnelles
Différences entre fonctions de traitement des nombres et formats d'affichage</li></ul>

Code css :

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

1
2
3
ul{
	list-style-position: outside;
}

[Sodium]

En testant ton code ici cela fonctionne bien, tu dois avoir d'autres règles qui s'appliquent par dessus :
https://htmledit.squarefree.com/

Ca serait bien que tu regardes dans firefox l'ensemble des règles qui s'appliquent aux éléments ul et li.

Je trouve curieux que ta liste affiche des tirets et non des disques par défaut pour commencer.

[Pierre Fauconnier]

Tu m'as mis sur la voie avec ton histoire de tiret. Dans un des css, j'avais un

Code css :

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

1
2
3
4
5
6
li{
	list-style-type: none;
}
li:before{
	content: "- ";
}

Mais, erreur de frappe, il y avait un espace entre li et l'accolade, et donc ma recherche avait zappé cette entrée. En supprimant le li:before et en utilisant list-style-type: "- ", tout est rentré dans l'ordre...

Mille mercis