Eine erfrischend einfache (aber pfiffige) Methode, um eine vertikale Zeitleiste mit einer geradlinigen, semantischen Unordered List (<ul>) von Peter Cooper zu erstellen.
ol {
list-style-type: none;
}
li {
position: relative;
margin: 0;
padding-bottom: 1em;
padding-left: 20px;
}
li:before {
content: '';
background-color: #c00;
position: absolute;
bottom: 0px;
top: 0px;
left: 6px;
width: 3px;
}
li:after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23c00' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
position: absolute;
left: 0;
top: 2px;
height: 12px;
width: 12px;
}Peter kam auf die Idee, nachdem er es auf der Website von BBC News implementiert gesehen hatte. Diese Version verwendete eine Ordered List (<ol>), was sinnvoll ist, wenn es um eine spezifische Reihenfolge von Ereignissen geht. Peters Ansatz verwendet eine Unordered List, was vielleicht genauso gut ist.
Kurz gesagt, es ist eine Standard-HTML-Liste (die BBC verwendet
<ol>, ich habe mich für<ul>entschieden), bei der jedes Listenelement (<li>) ein :before-Pseudo-Element hat, das inhaltlich leer ist, aber eine Breite von 2 Pixeln und eine rote Hintergrundfarbe hat. Dadurch entsteht die "Linie" vor jedem<li>. Weitere Styling-Maßnahmen positionieren dieses Pseudo-Element/diese Linie.
Die clevere, Markup-sparende Ergänzung von SVG in das :after-Pseudo-Element ist Saadat zu verdanken. Die ursprüngliche Version enthielt zusätzliche Hintergrund-Eigenschaften, um die Größe des SVG zu begrenzen und ein Wiederholen zu verhindern, aber ich fand sie nicht ganz notwendig, zumindest in diesem Kontext. Beachten Sie jedoch, dass die SVG-Markup ordnungsgemäß das focusable-Attribut verwendet, um zu verhindern, dass sie beim Tastatur-Tab berücksichtigt wird. Schöne Leistung! 👏
Hier ist das Ergebnis
Siehe den Pen
Unordered List als kontinuierliche vertikale Zeitleiste von Geoff Graham (@geoffgraham)
auf CodePen.
Ich habe Schwierigkeiten, mir eine Zeitleiste vorzustellen, bei der die Reihenfolge nicht wichtig ist, daher halte ich eine
<ol>für semantisch sinnvoller.Ich habe vor einiger Zeit eine Zeitleiste für einen Jahresbericht in ähnlicher Weise erstellt: https://codepen.io/bemdesign/pen/wMmZYo
Dem stimme ich zu. Eine Ordered List macht für eine Zeitleiste mehr Sinn. Die Idee ist aber gut.
Das war auch mein Bauchgefühl. Habe es geändert.
Ich bevorzuge immer noch die Verwendung einer Unordered List in meinem experimentellen Wochenkalender
http://www.netools.it/web/calendar/week/
Ich weiß, es ist albern, aber vielleicht etwas wie 16x16px für den roten Kreis und links 7px für die vertikale Linie, nur um es zu zentrieren, denn es scheint nicht zentriert zu sein, das stört mich auf eine seltsame Weise, haha.
Ha! Ich verstehe dich. Habe es ein wenig angepasst, um alles auszugleichen.
Und wie wäre es mit der Verwendung von
list-type-imageundborder-left?Interessant! Ich wette, es könnte auch mit dem Standard-Aufzählungspunkt-Stil gemacht werden, was die Notwendigkeit eines Pseudo-Elements spart.
Wenn man die 'after' und 'before' Anweisungen vertauscht, erhält man eine Lösung für mehrzeilige Inhalte.
Warum lädst du ein SVG für den Punkt?! Wäre es nicht besser, nur CSS zu verwenden?
li:after {
background-color: red;
border-radius: 50%;
content: ”;
height: 8px;
left: 3px;
position: absolute;
top: 5px;
width: 8px;
}
Wie kann ich die Farbe des Punktes in einer Zeitleiste ändern?
Tolle Zusammenfassung