Dies ist der 300. Trick aus der Praxis von Dr. Code, den wir Ihnen auf dieser Website vorstellen können. Uns freut dieses Jubiläum. Und darum bauen wir heute eine Timeline – ganz ohne Plugins und Hilfsmittel. Bloss mit ein wenig HTML- und CSS-Code. Trotzdem ganz leicht und hübsch.
Konkret: Eine Timeline wie jene nebenan wollen wir heute erstellen:
Das geht ganz einfach mit ein wenig HTML und CSS.
Zunächst gehen Sie an die geeignete Stelle Ihrer Website und fügen da im Texteditor folgenden Code ein. Tun Sie dies in der HTML-Ansicht:
<div class="timeline-list">
<ol>
<li><span class="date">2025</span>At vero eos et accusam et justo duo dolores et ea rebum.</li>
<li><span class="date">2024</span>Sed diam voluptua.</li>
<li><span class="date">2023</span>Ono sea takimata sanctus est.</li>
<li><span class="date">2019-2022</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
<li><span class="date">2015-2018</span>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.<br /><br />Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</li>
<li><span class="date">2014</span>Sed diam voluptua.</li>
<li><span class="date">2013</span>Ono sea takimata sanctus est.</li>
<li><span class="date">2011-2012</span>At vero eos et accusam et justo duo dolores et ea rebum.</li>
<li><span class="date">2010</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li>
</ol>
</div>Selbstverständlich werden Sie die darzustellenden Jahre und Inhalte nach Ihren Bedürfnissen anpassen müssen,
- 2025At vero eos et accusam et justo duo dolores et ea rebum.
- 2024Sed diam voluptua.
- 2023Ono sea takimata sanctus est.
- 2019-2022Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
- 2015-2018At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
- 2014Sed diam voluptua.
- 2013Ono sea takimata sanctus est.
- 2011-2012At vero eos et accusam et justo duo dolores et ea rebum.
- 2010Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Als nächstes folgt ein Block CSS-Code. Kopieren Sie diesen und fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein. Im Backend unter Design/Customizer/Zusätzliches CSS:
.timeline-list {
width: 100%;
}
.timeline-list ol {
padding-left: 200px; /* Je nach Grösse der von Ihnen verwendeten Schriftart kann hier ein anderer Wert sinnvoll sein. */
position: relative;
margin-bottom: 20px;
list-style: none !important;
}
.timeline-list ol li {
position: relative;
margin-top: 0em;
margin-bottom: 20px;
}
.timeline-list ol li .date {
position: absolute;
left: -165px; /* Je nach Grösse der von Ihnen verwendeten Schriftart kann hier ein anderer Wert sinnvoll sein. */
font-weight: bold;
font-size: 1em;
top: -2px;
}
.timeline-list ol li:before {
content: "";
background: #293280; /* Farbe der Timeline-Linie */
position: absolute;
width: 2px;
top: 5px;
bottom: -25px;
left: -24px;
}
.timeline-list ol li:after {
content: "";
background: #59B14B; /* Farbe der Kreisinhalte */
position: absolute;
width: 13px;
height: 13px;
border-radius: 100%;
border:2px solid #293280; /* Farbe der Kreisumrandungen */
top: 5px;
left: -31px;
}
.timeline-list ol li:last-child:before {
content: "";
background: rgba(0, 0, 0, 0);
} Das war’s auch schon mit dem ganzen Spuk. Ihre Timeline steht.
Werbung
Werbung
