Bonjour à tous,
Je cherche à faire une timeline vertical et responsive, voici comment je procède :
<div class="timeline-container">
<div class="date"><span>1976</span></div>
<div class="timeline-block">
<div class="marker"></div>
<div class="timeline-content">
<h3>Iphigénie</h3>
<span>Théâtre Essaïon</span>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="timeline-block">
<div class="marker"></div>
<div class="timeline-content">
<h3>l'imitation</h3>
<span>Théâtre Essaïon</span>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
<div class="timeline-block">
<div class="marker"></div>
<div class="timeline-content">
<h3>Third Year</h3>
<span>Théâtre Essaïon</span>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
et mon css :
.timeline-container {
width: 80%;
padding: 50px 0;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.timeline-container:before {
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
width: 1px;
height: 100%;
background: #CCD1D9;
z-index: 1
}
.date {
display: flex;
margin-left: 1px;
justify-content: center;
clear: both;
}
.date span {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
font-weight: bolder;
padding-right: 3px;
width: 50px;
height: 50px;
background: #000;
border-radius: 50%;
color:#fff;
}
.timeline-block {
margin-top: 1.5rem;
width: calc(50% + 8px);
display: flex;
justify-content: space-between;
margin-bottom: 20px;
transition: all 1.3 ease-in-out;
}
.timeline-container .timeline-block:nth-of-type(odd) {
float: right;
border: 1px solid #000;
}
.timeline-container .timeline-block:nth-of-type(even) {
float: left;
direction: rtl;
border: 1px solid #33ad14;
}
.marker {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #c0c0c0;
background: #d6d6d6;
margin-top: 10px;
z-index: 9999;
transition: all 1.3 ease-in-out;
}
.timeline-content {
width: 95%;
padding: 0 15px;
color: #666
}
.timeline-content h3 {
font-family: 'Crimson Text', serif!important;
margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 500
}
.timeline-content span {
position: relative;
top: -10px;
font-size: 13px;
font-style: italic;
color: #a4a4a4;
}
.timeline-content p {
font-size: 14px;
line-height: 1.5em;
word-spacing: 1px;
color: #888;
}
Ce que je veux
Je souhaite donc afficher la date et ensuite les évenements en quinconce le premier à gauche le deuxième à droite etc
Ce que j'obtiens
J'obtiens bien le résultat voulu, mais quand je rajoute une année le comportement odd/even recommence à zero c'est à dire que le premier élement de ma nouvelle date commence forcement à gauche malgré le ciblage par .timeline-block:nth-of-type().
Y a t'il un moyen d'éviter ce comportement ?
Merci à tous