[Résolu] Timeline avec ligne de points

Bonjour,

tout d'abord désolée pour le titre du sujet, je n'ai pas trouvé mieux pour expliquer ce que je souhaite faire : une liste d'éléments (que l'on pourrait apparenter à une timeline) reliés par des points. Ce n'est toujours pas clair ? Voici la maquette :
https://i.postimg.cc/zDcbcDGf/liste-1.png

ainsi qu'une variante horizontale :
https://i.postimg.cc/c4tgyqvB/liste-2.png

J'ai tenté plusieurs choses, tout d'abord en utilisant un border dotted, mais il me parait impossible d'aligner parfaitement les points colorés (reliés à un item de texte) sur les points blancs, en suivant cet exemple : https://codepen.io/anon/pen/YJELyW
J'ai également testé en intégrant la ligne de points blancs via des div à la place du border dotted, mais ça ne fonctionne pas pour la variante horizontale, de plus ça oblige à créer beaucoup de div vides.

Je suis à la recherche d'une idée lumineuse, je suis sûre qu'il y en a une à laquelle je n'ai pas pensé.
Marie.
Modifié par mariecomet (16 Oct 2018 - 13:25)

J'ai fait un Pen pour essayer de montrer ma tentative à base de div : https://codepen.io/anon/pen/rqpjpd

Bonjour,

c'est impossible d'avoir un rendu fluide (prenant en compte un nombre variable de ligne de texte, la variation de la taille des typos et le responsive) avec une ligne de points comme cela. Tes points ne seront jamais alignés proprement surtout que sur ta maquette ils sont relativement gros donc cela se verra forcément.

En précisant des tailles fixes/positionnements absolus c'est faisable mais d'une lourdeur sans nom a intégrer/rendre responsive et à mon avis le résultat sera toujours imparfait a cause des différentes tailles pour les blocs de texte.

Pour moi c'est surtout une erreur de design donc il faut mieux revoir la présentation. Et même si on peut faire beaucoup chose aujourd'hui en présentation web dès fois il vaut éviter certaines choses.

Bonjour un utilisant un background-image qui se répète, tu peux obtenir ta ligne avec une seule div, d'une taille prédictible et même la rendre proportionnelle à la taille du texte ou du layout.

Merci pour vos réponses !
@kustolovic ta solution m'a l'air très bien, je vais tester ça dans mon projet, merci beaucoup

Pour info, on m'a donné une autre solution, cette fois avec du JavaScript pour calculer la hauteur des éléments dynamiquement : https://codepen.io/anon/pen/QZampE