Reprise du message précédent :
Le "conteneur-list" comme tu l'as indiqué est le conteneur, ce qui est doit être flexible c'est son contenu et donc les "li". Il faut donc appliquer le "display: flex" sur les "li" et non sur le "ul".
 
Sinon pour les messages je ne sais pas comment tu te démerdes mais tu places tout systématiquement entre balises [quote][/­quote] ce qui rend tes posts illisibles. La réponse rapide c'est pareil que la réponse classique, simplement qu'elle est directement sur la page de lecture et donc allégée des boutons de mise en forme.

  Ben, on me dit de mettre ces balises, je les mets ... Depuis le temps que je poste, personne ne m'a dit que mes post sont illisibles, mais bon, j'accepte la remarque.
On m'a reproché de trop utiliser la réponse rapide ..... à quoi sert-elle ?    
 
Je suis les directives de deux bouquins, je ne fais que copier ce qui est écrit; l'auteur se définit comme étant, je cite ce qui est écrit au dos des bouquins :
- Responsable pédagogique dans un centre de formation, et formateur sur les technologies Web et les arts graphiques pendant plus de quinze ans.
Dirigeant de la société (que je ne nommerai pas ...) spécialisée dans la rédaction et la création de sites Internet ...........
59 € les deux bouquins ..... Un conseil, ne les achetez pas ...
 
Cet auteur, crée un conteneur, une liste ... il n'efface pas les puces, et elles s'affichent en dehors du conteneur .... que veux-tu que j'y fasse ? D'où la question que j'ai posée.
Si ça n'était que la seule erreur, je veux bien être indulgent, mais, c'est loin d'être la seule, il suffit de relire certains de mes post, pour s'en apercevoir.
De mon temps, j'aurais fait autant de conneries, j'étais bon pour faire un stage à l'ANPE   Mais bon, les temps changent ...  
Si moi, simple débutant, je dois rectifier les erreurs dudit auteur, alors, il me rembourse les bouquins, et je touche sa paie        
 
Je te remercie pour ta réponse, et ne prends pas pour toi tout ce que je viens d'écrire; je ne tire pas sur le pianiste    
 
 

Gatsu t'avais déjà fait la remarque, je pense que j'avais fait une remarque au début mais sans comprendre que tu voulais mettre tous tes messages en citations. Es-tu certain que c'est de la balise "citation" dont il avait été sujet ? N'est-ce pas plutôt la balise "code" qui pour le coup aurait plus de sens pour mettre ton code dans les messages ?

Illisible le mot est peut-être fort.
Mais oui je suis obligé de m'y reprendre à plusieurs fois pour comprendre tes messages, non pas à cause du contenu mais de la forme.
Quand tu as ton code ainsi que ton message qui sont réunis dans un même conteneur (la citation) il est difficile de voir où chacun commence et où chacun s'arrête.

Je ne vois pas ce qu'on peut reprocher à la réponse rapide, ça ne diffère en rien de la réponse "classique", simplement que la zone de message ne possède pas de prévisualisation et des boutons de mise en forme.

Pour finir sur ce sujet, et faire une transition avec le vrai sujet, les balises sur le forum c'est comme le HTML/CSS, elles servent à définir la sémantique et la mise en forme.
Ainsi une citation c'est ... une citation. Donc écrire ta réponse en citation ben ça n'a pas de sens puisque tu ne peux citer quelque chose que tu n'avais jamais écrit auparavant.

Et donc pour en revenir au HTML, je ne connais pas le livre (en même temps je n'en connais aucun), sorti de but en blanc ça parait en effet assez erroné. Mais sans le contexte c'est difficile de juger, tes pages mélangent souvent plusieurs exercices, est-ce vraiment comme ça que c'est demandé de procéder ?
Tu remarqueras qu'en appliquant ma solution, les puces disparaissent. Ce qui est logique puisque les "li" ne sont plus affichées en tant que "list-item" mais en tant que "flex".

 
Oui je t'avais averti il y a quelques pages, des dev il y en a beaucoup, des bons dev il y en a moins
Surtout sur des technos web faciles d'accès comme celles-ci (HTML / CSS / Javascript / PHP / ...).
C'est pour ça qu'il ne faut pas hésiter à diversifier tes sources d'apprentissage.
Et ceux qui vendent des cours / formations / livres en tant que responsable xxx / dirigeant de la société yyy ça sent pas bon en général  

Oui faut quand même que tu te rendes compte que tu as fait de sacrés progrès. C'est l'avantage d'un bouquin, tu suis une progression logique et plus ou moins exhaustive.
Après que le livre ne soit pas parfait, c'est sûr que c'est plus gênant pour un débutant que pour quelqu'un qui a déjà des bases, ce n'est pas le même regard.

Exemple bête, quelqu'un qui a les bases ne remarquera même pas certaines fautes de syntaxe et ne les reproduira pas comme oublier un point-virgule en fin de ligne. La personne va plutôt parcourir le livre en prêtant plus d'attention à la logique et à l'existence de certaines méthodes.

Pour revenir sur tes messages, encore une fois ton dernier message j'ai dû chercher ta réponse. Tu as cité mes messages, donc tout ce qui est dans les bloques de citation à mon nom je ne lis pas vraiment puisque je sais ce que j'ai écrit. Et en fin de compte, ta réponse est dans une citation à l'intérieure d'une citation à mon nom. Cela n'a pas de sens, surtout qu'en plus si on suit l'ordre de lecture ta réponse apparaît au milieu de mes messages et devrait avoir un lien logique avec ce qui la précède.

 
[quotemsg]Je ne comprends plus rien à la rédaction des post   Quel programmeur !
Je clic sur "répondre à ce message", ça devrait être bon, sauf si le message était en réponse rapide ?
Si j'utilise l'icône "citation", c'est bien pour reprendre une partie de ton message, entre les balises [quote][/quote ) ? Je ne l'ai pas encore utilisée, donc ça n'est pas là le problème.
 
Pour les progrès, oui, c'est certain; au fur et à mesure les éléments et les attributs augmentent, mais la capacité de ma mémoire, elle, n'augmente pas ... il y a des éléments et des attributs
qui sont bien ancrés, pour d'autres je suis obligé de revenir en arrière. Je ne prétends pas pouvoir tout mémoriser, il faut admettre que la mémoire diminue avec l'âge. Pas de souci.
 
Pour les listes dans un conteneur, en référence au bouquin, je laisse tomber.
Dans un autre exercice, j'ai fait la même chose avec des "div", dans une page éditée en colonnes, avec bordures. Les puces sont bien à l'intérieur de la bordure, et suivent bien  
le changement de colonne. Quoi de mieux ? C'est ce que je voulais comme résultat. Peut-on dire qu'une "div" est aussi un conteneur ?[/quotemsg  

Le conteneur c'est simplement un élément HTML qui va servir à contenir d'autres éléments. Donc oui les "div" sont des conteneurs, c'est d'ailleurs leur fonction principale.

Pour les messages tu as 3 moyens pour répondre :
- La réponse rapide,
- Le bouton "répondre" en bas de page,
- Le bouton "répondre à ce message" au-dessus de chaque message (leur positionnement doit pouvoir varier en fonction du thème choisi pour le forum).

La réponse rapide, tu as juste l'encart en bas de page pour écrire, pour ajouter la mise en forme il faut l'écrire textuellement.
Le bouton "répondre" t’emmène vers la page de réponse dans laquelle tu as l'encart pour écrire mais aussi les boutons de mise en forme, la liste des smileys ainsi que l'encart de prévisualisation du message rédigé.
Le bouton "répondre à ce message" c'est pareil que le bouton "répondre" sauf qu'il intègre automatiquement dans l'encart de rédaction du message la citation du message sélectionné.

Mais dans tous les cas, quand tu cites un message, tu ne dois pas écrire ta réponse à l'intérieur de la citation :

Dans cet exercice, il y a le code du bouquin; l'auteur demande de télécharger un fichier correspondant à cet exercice, le code est différent ... il code un changement de taille de police, qu'il met entre des balises de commentaire!) et dans <li> il ne met pas la "classe", donc, aucune chance que le cht de police puisse s'effectuer. Directeur de boîte, ce type ... de qui se moque-t'il ? Comment peut-on apprendre dans de bonnes conditions, avec de tels livres ??? Je ne suis même pas au 1/3 de ce bouquin ....
<style>
 /*Code bouquin*/
#conteneur-liste {
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 width: 200px;
 height: 300px;
 border: 1px solid #000;
 background-color: #eee;
 padding: 10px;
}
 
 /*Code fichier exemple joint par téléchargement*/
#conteneur-liste {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    background-color: #eee;
    padding: 10px;
   }
   #conteneur-liste li {
    list-style: none; /*si supprimé, les puces sont à l'extérieur du conteneur*/
    border: 1px solid #000;
    padding: 5px;
    background-color: white;
   }
/*
   .quatre {
    font-size: 1.5em;
   }
   .cinq {
    font-size: 0.6em;
   }
*/
 
</style>
 
 
 
</head>
 
 
 
 
 
<body>
<p>Résultat bouquin</p<
<ul id="conteneur-liste">
 <li>Un</li>
 <li>Deux</li>
 <li>Trois</li>
 <li>Quatre</LI>
 <li>Cinq</li>
</ul>
 
 
<p>Résultat fichier joint par téléchargement</p>
<ul id="conteneur-liste">
   <li>Un</li>
   <li>Deux</li>
   <li>Trois</li>
   <li class="quatre">Quatre</li> <!--j'ai du ajouter class="quatre" qui n'était présent dans le code ! le cht de police ne peut pas se faire (entre balises com.-->
   <li class="cinq">Cinq</li> <!--Ajouté class="cinq" pas sérieux ce bouquin !!!-->
</ul>

C'est quel bouquin ?

  Flexbox et grid pour un, et HTML5 et CSS3, du même auteur. Je les trouve déroutants, pour un débutant.
Certains exercices s'affichent bien, d'autres il faut chercher et corriger les erreurs. Çà finit par te dérouter, et te faire douter de toi.
Dans des domaines pointus comme les maths, l'électricité, l'électronique, les automatismes, avec de tels livres, tu laisses tomber ... ou tu pètes un câble.

Après modif, voilà ce que j'obtiens, et qui est conforme à ce qui est demandé.
 
<style>
 /*Code fichier exemple joint par téléchargement*/
#conteneur-liste {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    width: 200px;
    height: 300px;
    border: 1px solid #000;
    background-color: #eee;
    padding: 10px;
   }
   #conteneur-liste li {
    list-style: none; /*si supprimé, les puces sont à l'extérieur du conteneur*/
    border: 1px solid #000;
    padding: 5px;
    background-color: white;
   }
 
   .quatre {
    font-size: 1.5em;
   }
   .cinq {
    font-size: 0.6em;
   }
</style>
 
<body>
<p>Résultat fichier joint par téléchargement</p>
<ul id="conteneur-liste">
   <li>Un. Après modification de certains paramètres, ça fonctionne.</li>
   <li>Deux. Autodidacte, c'est parfois la galère.</li>
   <li>Trois. Mais on s'en sortira.</li>
   <li class="quatre">Quatre. Grâce au forum, et à certains sites.</li> <!--j'ai du ajouter class="quatre" qui n'était présent dans le code ! le cht de police ne peut pas se faire (entre balises com.-->
   <li class="cinq">Cinq. Putain de bouquin. MDR !</li> <!--Ajouté class="cinq" pas sérieux ce bouquin !!!-->
</ul>
<p>FIN EXERCICE 1</p>
 
</body>

Plutôt que de mettre :

Tu peux mettre pour faire disparaitre les puces :

Ou alors si tu veux les garder à l'intérieur :

Voilà tes messages sont plus clairs maintenant ! Enfin tu peux essayer d'utiliser les balises [code][/­code] pour mettre ton code et uniquement ton code (le reste de ton message en dehors des balises) ça va permettre de bien délimiter ce que tu dis et ce qui est le code.

 
Merci pour les indications; pour  
[code]display: block;  
je l'avais vu sur un site, mais pas testé ...
OK pour

 
j'aurais du y penser ... mais, ça ne m'est pas venu à l'idée.
 
Je rame déjà, sur l'exercice suivant   encore des indications erronées ... c'est ch .... uuut  
   

Les puces sont toujours à l'extérieur du conteneur, de plus comme il y a dans les <li> une différence de taille de police(codées, donc normal), les puces ont également des tailles différentes, ce qui ne donne pas un affichage harmonieux.
Pas grave, j'utiliserai des "div" qui fonctionnent bien, sans problème. Je n'ai toutefois pas testé dans les div le changement de taille de police pour voir si les puces changent aussi de taille.

C'est bizarre sur mon Firefox, mettre la marge en pixels (plutôt qu'en relatif) permettait de justement aligner les puces. Si les 15 pixels ne sont pas suffisant, tu peux les augmenter.
Tu utilises quel navigateur ?

Firefox. Même à 50px, les puces ne changent pas de place; elles restent à leur position initiale. Ça n'a aucun effet ??? je ne vois pas pourquoi.  

Tu dois avoir un problème ailleurs car ceci fonctionne sur Firefox :

C'est toi qui a ajouté ? :

 
Je vais vérifier, mais je n'ai pas le souvenir d'avoir utilisé ce code "text/javascript". Je ne connais pas le javascript.
En tout cas, sous cette forme, ça fonctionne; j'ai recopié le code dans un nouveau fichier, c'est bon.
Merci en tout cas.
Je viens d'ajouter cette ligne dans mon fichier d'origine, ça fonctionne aussi ...
Dans l'exemple du bouquin, cette ligne ne figurait pas .... 15 ans de pratique (bon j'arrête de refaire le monde   ).
C'est peut-être pour cette même raison, que d'autres exemples ne fonctionnent pas bien ???
Est-ce que je peux insérer cette ligne dans tous les exemples, sans que ça provoque une perturbation ?
Y a-t'il dans ce code du javascript ? Pour moi, non, mais ..... aucune certitude.

Non cette ligne ne sert à rien, c'est juste que je suis parti d'un modèle de page vide dans lequel il y a déjà les balises pour pouvoir ajouter du JavaScript.

Ben ..... je ne comprends pas ... je n'ai rien modifié d'autre ....
Je me demande si, parfois, Notepad ne bug pas; lorsque je mets des balises de commentaire, en lecture le slash et l'étoile de fin sont inversés.
Convaincu que l'erreur vient de moi, je vérifie. Les balises sont correctes ... j'efface la ligne, je retape le code, je retape le commentaire et c'est bon.
C'est tout de même rare, et comme c'est un éditeur en langue française, je continue à travailler avec.

Je réédite ... autant pour moi, je me suis planté lors de l'exécution, je n'ai pas sélectionné mon fichier, mais le tien ... forcément c'était OK.
En exécutant mon fichier, toujours pas de puces. Par contre, après l'insertion du code "text/script", dans l'exercice suivant(sur la même page), les colonnes qui sont
sur l'axe vertical, passent en horizontal. Là, c'est moi qui bug .... je croyais que le problème était résolu, hé ben non !
Je vais comparer ton code avec le mien, il y a surement une différence quelque part. Hou bobo la tête !

C'est list-style-position qui défini à quel endroit se positionnera la puce :  
https://developer.mozilla.org/fr/do [...] e-position
 
la valeur par défaut est "outside".
 

  Problème résolu, j'ai effacé le code existant, et je l'ai retapé, bien que je n'ai trouvé aucune erreur. Ô miracle, ç'est bon; j'ai bien les puces à l'intérieur du conteneur,
et la taille varie en fonction du code. Est-ce que, à force de modifier, effacer, réécrire, l'éditeur "perd la tête" ? J'ai parfois l'impression que oui ... sans toutefois pouvoir l'affirmer avec certitude.
Ça me fait perdre un peu de temps(en retraite, j'en ai   ), mais surtout ça me fait douter. Ce problème existait, dans le temps(qui passe..) avec des processeurs au comportement curieux ...  
Je vais tester  

pour voir si c'est plus "pratique". Merci pour ta réponse.

 
Exemple avec "list-style-position".
 
<style>
/*EXERCICE 3/*
 
.un {
  list-style-position: inside;
  list-style-type: square;
}
 
.deux {
  list-style-position: outside;
  list-style-type: circle;
}
 
.trois {
  list-style-position: inside;
  list-style-image: url("starsolid.gif" );
}
</style>
 
<body>
<p>EXERCICE 3</p>
<ul class="un">Liste 1
  <li>Élément 1-1</li>
  <li>Élément 1-2</li>
  <li>Élément 1-3</li>
  <li>Élément 1-4</li>
</ul>
<ul class="deux">Liste 2
  <li>Élément 2-1</li>
  <li>Élément 2-2</li>
  <li>Élément 2-3</li>
  <li>Élément 2-4</li>
</ul>
<ul class="trois">Liste 3
  <li>Élément 3-1</li>
  <li>Élément 3-2</li>
  <li>Élément 3-3</li>
  <li>Élément 3-4</li>
</ul>
<p>FIN EXERCICE 3</p>
 
</body>
 
Normalement, si je ne me trompe pas, je devrais avoir des puces carrées, et rondes; elles sont toutes rondes.
Et la position "inside" ou "outside" ne semblent pas prises en compte, puisque les puces sont toutes dans le même alignement vertical.
 
Dans  

je devrais afficher une image, mais l'URL ne semble pas correct; je vais mettre une image provenant de mon PC.
Mon raisonnement est correct?

Quel est le code complet de ta page ? (à mettre dans une balise code s'il te plaît)
 
Pour l'url, là tu utilises une url relative, c'est à dire que le dossier racine est définit comme le dossier dans laquelle s’exécute ta page (i.e. le dossier où se trouve ta page). Ce qui veut dire que la navigateur cherche une image "starsolid.gif" dans le dossier où se trouve ta page.
 
Pour Notepad++, non il n'est pas inconstant, il n’exécute rien, il ne fait qu'écrire les fichiers. Je pense qu'à force d'accumuler les exercices tu dois accumuler des petites erreurs ou alors tu te trimballes une erreur depuis un certain temps. (à voir avec le premier point)
Le plus simple c'est de créer un modèle de page vide et d'en repartir pour chaque exercice.
 
Ex :

 
Pour les erreurs, c'est possible, il m'arrive, parce que je veux aller un peu trop vite, d'en commettre. Cela fait partie de mes défauts(hé oui, j'en ai ...).
Par exemple

Je croyais que cela affichait une photo   alors que c'est une image qui sert de puce .... j'aurais du vérifier avant de poster. Ça devrait être  une sorte de caractère spécial, avec un code.
Concernant les exercices différents sur la même page, c'est parfois utile quand ce sont des exercices évolutifs, je vois mieux ainsi l'évolution du code.
Je reconnais que pour vous, c'est moins pratique; vous me consacrez beaucoup de votre temps, si en plus je complique les choses    
Pour ce code, je vais d'abord vérifier; j'ai simplement copié sur le site, mais j'ai l'impression qu'il "manque quelque chose".
Je le ferai ce soir, car j'ai vu passer une quarantaine de cigognes, qui se posent pas loin ... là, le photographe ne peut résister    

Personnellement j'ai de vieille habitude datant de l'époque ou chaque navigateur n'en faisait qu'a sa tête :
- Toutes les urls (html, css, js, img, etc.) en absolute a partir de la racine du serveur (idéalement quand le code est généré via php ou autre la racine du serveur peut être une variable mais dans tout les cas il est plus simple de faire un rechercher / remplacer sur une chaine de caractère que de perdre du temps à débugé des chemins relatifs).

- pour styler les li, je désactives la puce du navigateur et j'affiche une image extraite de la maquette du designer positionné au pixel près vie un pgn transparent de sprite ou comme ci-dessous un carré avec un background (facile de faire un rond avec des border radius).

 
Mais je reconnais que ce sont de vieilles et mauvaises habitudes (comme quand je fait des colonnes en float au lieu de faire un grille flex ^^), sans doute qu'il est bien plus facile d'avoir un rendu homogène avec du css pur de nos jours...

  Il n'est pas toujours facile de changer nos habitudes, soit parce que les nouvelles ne nous plaisent pas(ce sont les plus difficiles à modifier), soit parce qu'on ne les comprend pas, ou soit qu'elles sont inutiles ...
Pour nous, au vu de notre âge, nous avons connu une telle évolution, dans tous les domaines, changer certaines habitudes demandaient un gros effort de notre part, notamment au travail où on ne nous demandait pas notre avis.
Combien de fois ai-je entendu nos supérieurs nous dire :-vous n'êtes pas là pour réfléchir, mais pour exécuter ...    
Lorsqu'il y avait un problème sur une machine, je disais : -Je ne suis pas là pour réfléchir, si vous avez la solution, donnez la moi, j'exécute. Ça ne passait pas toujours bien    
 
Pour le CSS, une partie du bouquin traite des précédentes versions du CSS, et également du HTML; j'ai ignoré cette partie, pour ne pas me mélanger les pinceaux.
Autant débuter avec les versions actuelles, à moins d'être féru d'histoire.
C'est un peu comme si un débutant en informatique commençait son apprentissage avec Windows 3.1 et DOS 6 ... ce serait une réelle perte de temps.
Après, si il a vraiment envie de s'intéresser à ces anciennes versions, libre à lui, bien évidemment.
 
En dernier lieu, chacun a son niveau d'adaptation, plus ou moins développé ... certains sont complétement perdus, lorsqu'on leur demande de changer leurs habitudes ...
C'est ce qui fait la diversité humaine; nous ne sommes pas des automates, et c'est très bien ainsi, en ce qui me concerne.

En tout cas tu t'adaptes bien à ce forum !
 
Félicitation pour tes derniers post particulièrement bien mis en forme...    
 
Le web c'est compliqué car être "rétro-compatible" c'est un peu ne laisser personne au bord de la route, ce n'est pas un vrai combat dans le sens ou personne ne vas en mourir mais c'est aussi essayer de ne pas être focus sur le 16/9em desktop / mobile Ios13.
 
Après toi tu n'en es pas là ! ^^

 
Merci pour le compliment   Je m'adapte bien à ce forum, parce qu'il est sérieux, on y trouve une aide réelle, ça compense avec deux autres sites que j'ai laissés tomber, un de photo, l'autre de modélisme,
dans lesquels j'avais l'impression de vivre une mauvaise série sur la vie courante ...
J'aime bien Internet, pour le côté pratique, la mine de renseignements qu'on peut y trouver; en revanche je ne suis pas très réseaux sociaux. Mon portable n'est pas équipé Internet, je ne passe pas ma vie  
à poster des SMS ... vieux jeu sans doute ... non, mais ça n'est pas mon truc. Nous n'avions pas tout ça dans notre jeunesse, et ça ne nous manquait pas.
Je préfère le contact visuel que le contact virtuel ... c'est irremplaçable. Dans ma vie, j'ai fait deux fois le tour du monde, dans les années 60, le contact avec les gens était formidable; on ne se comprenait pas toujours à cause de la langue,
mais avec les gestes, le regard, il y avait quelque chose de formidable. Essaie un jour de dialoguer avec des aborigènes, en Australie(quoiqu' aujourd'hui, ils parlent anglais), c'était génial.
 
En revanche, j'ai trois PC, dont deux récupérés et dépannés parce que j'aime ça; j'ai toujours aimé la technique de haut niveau, plutôt qu'un travail routinier qui m'ennuie.
J'ai démarré dans la vie, avec un CAP d'ajusteur, métier qui commençait à disparaître(et faire des copeaux à la lime toute la journée, ne me bottait pas), j'ai appris l'électricité, l'électronique, les automatismes,
le soir après le travail, en stages ... une vie de fou, mais j'ai aimé ça.
Bon je m'éloigne du sujet ... Le CSS m'attend    
Merci pour ce petit entracte.

Sur une nouvelle page, c'est OK; il y a donc quelque chose qui "cloche de mon côté" lorsque je cumule certains exercices sur la même page, mais je ne vois pas quoi.
Je ferai donc un exercice par page(ça va en faire un paquet).

Déjà tu ne te vexes pas quand on te dit quelque chose, ce qui est important. Souvent ça se passe mal quand les réponses ne vont dans le sens qu'attendent les gens. En effet cela demande de se remettre en question et ce n'est pas facile pour tout le monde. Mais malheureusement, les machines n'ont jamais tort, elles ne font que ce que l'être humain leur a permis de faire. Alors parfois il y a des erreurs des conceptions, mais la machine reste ce qu'elle est et on doit faire avec. C'est pourquoi la programmation c'est une remise en question permanente, il n'y a que l'homme qui puisse avoir tort dans cette histoire et donc celui qui tape le code.

 
Pourquoi se vexer lorsqu'on reçoit une remarque justifiée ? Il faut accepter de se remettre en question, quand on commet une erreur; c'est ainsi qu'on avance, dans tous les domaines.
Lorsqu'une photo n'est pas au top, il faut critiquer les points faibles, ce que l'on n'a pas vu, ou pas su mettre en valeur.
Savoir reconnaître qu'on n'est pas le meilleur, qu'on trouve toujours au dessus de soi; personnellement je n'ai pas de problème avec mon égo, sauf si on m'attaque injustement, et si le ton  
employé est vraiment déplaisant(là, ça claque   ).
Quant aux machines, j'en ai vu de toutes sortes; si je m'étais contenté de les observer dans leur masse, elle ne m'auraient rien appris, que voir de gros tas de ferraille ...
Par contre, en les observant, élément par élément, en se documentant, en se formant, on arrive mieux à les gérer, les modifier pour les améliorer ... quand c'est possible, et si on a les capacités de le faire.

 
Dans une structure HTML, je dois placer un trait vertical entre deux balises genre un i mais sans le point. Dans quel but, je ne sais pas. Pas encore rencontré ce style.
Ça provient du bouquin HTML. Le but consiste à placer des ancres dans les différentes parties de la page, en colorant le résultat.
J'ai déjà fait différemment des ancres, sans coloration du résultat.
Voici le code CSS :

 
 
Le code HTML :

 
Ce trait vertical, c'est un séparateur ? Au même titre qu'une , ou qu'un ;
Je suppose qu'on ne peut pas intégrer un caractère spécial avec un code, comme dans du texte. Insertion au clavier avec un raccourci ?  

On peut intégrer des caractères spéciaux en CSS.
Maintenant ton trait vertical peut être fait de plusieurs façons.
Tu peux soit utiliser le caractère "|", mais c'est moche, ou déclarer un pseudo élément ::after ou ::before, en lui déclarant un content:"" et un border-right:1px solid #000.

   
 
Merci pour ta réponse; en fait, je me complique bien la tâche ... au clavier alt gr et 6(en fait le trait vertical) et ça fonctionne plus rapidement.
 
Voici le code complet :

Comme souvent, je poste avant d'avoir bien cherché ... Désolé.

et pour les caractères spéciaux en HTML, tu as soit les html entities, soit l'unicode aussi.

 
En unicode, j'ai déjà utilisé dans d'autres exercices; c'est simple et efficace, tout ce dont j'ai besoin.
J'attaque les éléments enfants; cibler un élément enfant(pair, impair, 3e, 4e ...) dans un élément parent ... tout un programme quand les exemples ne fonctionnent pas.
Une fois que j'aurai réussi un exemple, les suivants seront plus faciles.
Je ne sais pas si j'aurai à utiliser ces fonctions, mais ça fait partie de l'évolution.

C'est ce qui fait parti de ce qu'on appelle les sélecteurs CSS (CSS selectors) c'est très important et très puissant. Avec de la logique et de l'imagination tu montes grandement en puissance dans les fonctionnalités du CSS.
Même si tu as commencé à voir les plus simples (sélection par classe, par id, par nom de balise, etc.), apprendre à coupler les différents sélecteurs est très intéressant. Tu vois les sélecteurs d'éléments enfants, tu pourras ensuite généraliser à l'utilisation des autres.
 
Voici une liste des sélecteurs CSS (pas trouvé de liste synthétique en français) : https://www.w3schools.com/cssref/css_selectors.asp

My english is very limited(???) en français : ma connaissance de la langue de Shakespeare est au ras des pâquerettes    
Ma logique est un peu en berne ... l'imagination déborde encore(tellement que je ne sais plus où la mettre).
J'essaierai avec un traducteur ... ça pourra m'aider.
Oui, ça a l'air très puissant, il faut déjà maîtriser les plus simples. J'ai l'impression que ça va être un moment ardu ...

 
Un exemple du livre, qui me laisse pantois .... quoi faire avec ça ??? Je mets juste le code. Les exemples suivants sont du même style, dans l'immédiat pas exploitable pour moi, vu mon niveau.

La liste s'affiche, le conteneur ... y'a pas .... Quant à la sélection du 2e enfant ..... un jour peut être.
 
[url]https://lea.verou.me/demos/nth.html[url]
Signalé dans le bouquin, qui donne accès à un sélecteur de pseudo classe; pour l'instant, je n'y comprends rien ...
Sur un site j'ai trouvé cet exemple, je crois que c'est autre chose, qui va surement m'aider à comprendre. J'ai utilisé un traducteur, pour ne pas être perturbé par la langue.

Il fera jour demain   assez pour aujourd'hui.