Pour présenter des événements datés, nous pouvons faire appel à une timeline pour afficher les éléments de manière très visuelle. Elle va ajouter un côté professionnel à votre site. Les timelines ont souvent leur place sur des sites corporate par exemple. En effet, généralement, dans une timeline, chaque événement est encadré et inséré dans un fil rouge, qui retracer un historique.

Par exemple, des timelines peuvent être utilisées pour représenter :

  • l’historique d’une entreprise avec ses dates clés (création, agrandissements…),
  • la date des ouvertures de nouvelles boutiques pour une firme,
  • les formations et les expériences dans un CV,
  • les réalisations pour un portfolio,
  • des dates et lieux de passages pour un groupe de musiques,
  • des dates de rencontre pour un club de sport,
  • des publications d’un réseau social.

Vous l’aurez compris, il y a de très nombreuses applications pour une timeline.

Sans plus tarder, voyons comment construire deux types de timeline en HTML et CSS : une timeline verticale puis timeline une horizontale.

Ce tutoriel va vous demander d’avoir une bonne maîtrise du CSS, sous peine d’être trop difficile à prendre en main.

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.

Intégration HTML

Personnalisation de page web

Création d'animations CSS

Ajout de formulaires

Trouver un développeur web

Timeline verticale

Pour notre exemple, nous allons construire une timeline verticale pour des rencontres sportives.

Voici un exemple de résultat final.

Le fil rouge

Dans un premier temps, la zone de la timeline et la barre centrale, qui fera office de fil rouge.

<div class="timeline">
  <!-- Composants ici -->
</div>

Avant de commencer le CSS, nous allons fixer le box-sizing, pour ne pas avoir besoin de faire trop de calculs de pixels.

* { box-sizing: border-box; }

Pour bien voir la timeline, nous allons mettre une couleur de fond. Aussi, pour qu’il n’y ait pas trop de zones vides, nous allons plus indiquer une largeur maximale. Enfin, la zone grise sera centrée grâce aux margins.

.timeline {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 60px;
  background: #d6d6d6;
}

Maintenant, attaquons-nous la barre centrale.

Pour ce faire, nous n’allons pas créer un nouvel élément HTML, c’est tout simplement jouer sur un pseudo-élément:after.

En suite, il faut que cette barre soit centrée et visible. Nous allons donc centrer avec du positionnement absolut. Puis, nous allons lui donner une épaisseur (ici 8 px). Enfin, pour s’assurer qu’elle soit bien centrée, même en cas de changement de largeur, un petit transform et le tour est joué.

Le reste est décoratif.

.timeline:after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 50%;
  width: 8px;
  background: #346abf;
  border-radius: 3px;
  z-index: 1;
}

Les composants / événements

Nous allons créer trois événements. Ces événements vont être représentés sous forme de composants dans la timeline.

Pour rester être sémantique, chaque événement sera dans une balise article. À l’intérieur de celles-ci, nous pouvons mettre tout le code HTML que nous voulons, dans la mesure du raisonnable, pour que ça ne soit pas illisible.

<div class="timeline">
  <article>
    <h2>Match contre Joueur A</h2>
    <ul>
      <li><span>Lieu</span> Paris</li>
      <li><span>Date</span> 01/04/2022, </li>
      <li><span>Places</span> 340</li>
      <li><span>Billeterie</span> <a href="#">Lien</a></li>
    </ul>
  </article>
  <article>
    <h2>Match contre Joueur B</h2>
    <ul>
      <li><span>Lieu</span> Paris</li>
      <li><span>Date</span> 01/04/2022, </li>
      <li><span>Places</span> 340</li>
      <li><span>Billeterie</span> <a href="#">Lien</a></li>
    </ul>
  </article>
  <article>
    <h2>Match contre Joueur C</h2>
    <ul>
      <li><span>Lieu</span> Paris</li>
      <li><span>Date</span> 01/04/2022, </li>
      <li><span>Places</span> 340</li>
      <li><span>Billeterie</span> <a href="#">Lien</a></li>
    </ul>
  </article>
</div>

Passons au CSS.

Deux spécificités sont à noter sur les composants/événement en eux-mêmes :

  1. Ils doivent être en relative pour accueillir la suite de notre développement.
  2. Il faut gérer la taille : 50% pour ne pas dépasser sa zone, puis on y soustrait la marge souhaitée (sans oublier de considérer la moitié de la largeur de la barre). Pour l’exemple, cette marge est de 40px.
.timeline article {
  position: relative;
  background: #eeeeee;
  width: calc( 50% - 40px );
  padding: 15px;
}

Les composants sont collés, nous allons les séparer un peu.

.timeline article + article {
  margin-top: 20px;
}

Le rond sur la barre

Plaçons à présent le rond sur la barre pour indiquer où se situe l’événement dans la timeline.

Ce rond sera un pseudo-élément :before de notre composant article.

Pour le placer, nous allons tout simplement jouer sur le positionnement. Par exemple, on peut lui indiquer qu’il devra partir la gauche du composant, le traverser intégralement et y ajouter les pixels manquants pour qu’il soit centré. Pour notre exemple : left: calc( 100% + 26px );.

Le reste du code est décoratif.

.timeline article:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: calc( 100% + 26px );
  background: #d6d6d6;
  width: 24px;
  height: 24px;
  border: 6px #346abf solid;
  border-radius: 50%;
  z-index: 2;
}

La flèche

Enfin, il ne manque plus qu’un élément : la flèche qui va pointer vers le rond.

Là aussi, il s’agit d’un pseudo-élément, :right cette fois, et de jeu sur la position.

Pour la forme de la flèche, nous pouvons aller la chercher sur CSS trick : The Shapes of CSS puis les adapter.

Ce qui nous donne finalement :

.timeline article:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 16px solid #eeeeee;
  border-bottom: 20px solid transparent;
}

En rang deux par deux

Mais… ce n’est pas terminé ? Tous mes événements sont à gauche.

En effet ! Il ne nous reste plus qu’une dernière étape : faire en sorte à ce qu’un composant sur deux aille à droite.

Pour ça, nous allons jouer avec le pseudo-élément :nth-child. Celui-ci prend en paramètre un ou des numéro(s) d’éléments, un mot clé ou une formule. C’est parfait, nous allons utiliser le mot clé even, qui signifie « paire ». Cela veut dire que tous mes composants paires pourront être modifiés. Ce qui correspond très à un élément sur deux.

Nous allons pouvoir modifier le composant lui-même pour qu’il passe à droite avec un margin-left qui prend en compte les 50% de gauche auxquels on ajoute la marge calculée plus haut.

.timeline article:nth-child(even) {
  margin-left: calc( 50% + 48px );
}

Sans oublier de replacer également le rond qui va sur la barre. Pour cet élément, nous allons aligner le positionnement venant de gauche et lui indiquer un nouveau positionnement venant cette fois de la droite.

.timeline article:nth-child(even):before {
  left: auto;
  right: calc( 100% + 26px );
}

Enfin, nous pouvons faire pareil avec la flèche, à l’exception seulement qu’il faut inverser son sens en plus de sa position.

.timeline article:nth-child(even):after {
  left: auto;
  right: 100%;
  border-left: none;
  border-right: 16px solid #eeeeee;
}

Notre timeline est terminée ! Félicitations.

Si vous n’avez cependant pas réussi à la reproduire en que vous souhaitez effectuer des modifications hors de portée, nous vous conseillons de demander de l’aide. Par exemple, vous pouvez déposer gratuitement une demande sur Codeur.com afin d’obtenir l’intervention d’un freelance qui nous aidera à résoudre votre problème.

Trouvez le meilleur développeur web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans obligation

Déjà plus de 75 000 clients

Trouver un freelance

 

Timeline horizontale

Cette fois-ci, nous allons prendre comme exemple une timeline horizontale pour présenter les ouvertures des magasins d’une marque.

Voici un exemple de résultat final.

La logique reste un peu la même, mais en voyant le problème différemment.

Tout d’abord, construisons le HTML complet.

<div class="timeline">
  <article>
    <h2>Boutique A</h2>
    <strong>75000</strong>, en <em>janvier 2001</em>
  </article>
  <article>
    <h2>Boutique B</h2>
    <strong>60000</strong>, en <em>mars 2012</em>
  </article>
  <article>
    <h2>Boutique C</h2>
    <strong>15000</strong>, en <em>décembre 2012</em>
  </article>
  <article>
    <h2>Boutique D</h2>
    <strong>06000</strong>, en <em>février 2021</em>
  </article>
  <article>
    <h2>Boutique E</h2>
    <strong>01000</strong>, en <em>2023</em>
  </article>
</div>

Comment pour la timeline précédente, un code de base :

* { box-sizing: border-box; }

En suite, la zone de la timeline.

.timeline {
  position: relative;
  margin: 0 auto;
  padding: 40px 60px;
  background: #d6d6d6;
  overflow: auto;
}

En maintenant, le fil rouge.

Cette fois-ci, nous sommes en horizontal. Il faut donc reprendre la même logique que la timeline précédente, mais en inversant la hauteur et la largeur.

.timeline:after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  height: 8px;
  background: #346abf;
  border-radius: 3px;
  z-index: 1;
  transform: translateY(-50%);
}

C’est pour les articles que le mécanisme devient différent.

En effet, les événements vont se chevaucher, mais sur la verticalité. C’est-à-dire qu’un sur deux sera en haut et l’autre sera en bas. Ce n’est pas très compliqué, nous allons jouer sur les margin-top et sur la verticalité avec vertical-align. Par défaut, ce dernier a pour valeur baseline. Ce qui veut dire que si un élément sur deux a un margin-top, les autres éléments vont descendre aussi partiellement. En fixant vertical-align à top, les éléments seront alignés en haut et seuls ceux qui ont un margin-top vont descendre.

.timeline article {
  display: inline-block;
  position: relative;
  background: #eeeeee;
  width: auto;
  height: 70px;
  padding: 10px;
  margin: 0 0 50px 0;
  vertical-align: top;
}

Pour réduire l’espace utilisé de la timeline, nous allons faire en sorte à ce que les éléments se survolent les uns des autres. Pour ce faire, sur tous les composants sauf le premier, nous mettrons un margin-left négatif et un margin-right négatif pour tous sauf le dernier.

.timeline article:not(:first-child) {
  margin-left: -20px;
}
.timeline article:not(:last-child) {
  margin-right: -20px;
}

Après cela, c’est au tour des ronds et des flèches. Là encore, la logique est la même que la timeline verticale, seule les valeurs des éléments changent pour s’adapter.

.timeline article:before {
  content: "";
  display: block;
  position: absolute;
  top: calc( 100% + 26px );
  left: 50%;
  background: #346abf;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.timeline article:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid #eeeeee;
  transform: translateX(-50%);
}

Il ne nous reste plus qu’à gérer un élément sur deux qui passe en bas.

Étant donné que le fil rouge est placé au milieu de la zone de la timeline et que nous avons aligné les éléments pour qu’ils ne buguent pas lors du déplacement ; il ne nous reste plus qu’à faire en sorte à ce que ces éléments prennent la même hauteur totale que les éléments du haut. Sans oublier de déplacer le rond et la flèche.

.timeline article:nth-child(even) {
  margin-top: 140px;
  margin-bottom: 0;
}
.timeline article:nth-child(even):before {
  top: auto;
  bottom: calc( 100% + 26px );
}
.timeline article:nth-child(even):after {
  top: auto;
  bottom: 100%;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 20px solid #eeeeee;
  border-top: none;
}

Et voilà, le tour est joué ! Vous avez aussi une timeline horizontale.

 

Notre astuce faire une timeline en HTML et CSS

Dès à présent, vous avez en main les clés pour construire des belles timelines pour professionnaliser votre site internet.

Bien entendu, il existe des tas de façon de les embellir. Par exemple, s’il n’y a qu’un événement par an, vous pouvez afficher l’année directement dans les ronds du fil rouge pour donner un peu de plus style.

Il existe autant que possibilité que seul l’imagination est capable de poser des limites.

Et si par malchance l’imaginaire va trop loin que les compétences en code, il est toujours possible de faire appelle à des freelances. Pour cela, vous déposer gratuitement une annonce sur Codeur.com pour trouver rapidement un développeur web freelance disponible.