Leaderboard

Today, we'll be coding this: Or at least, making something very similar. I created this a long time ago for my fantasy site's historical timeline. It is entirely CSS and HTML, and you may need to fiddle with the precise numbers, but for the most part, it should be pretty straightforward. So to get started, we want a container div. You can call this container div whatever you'd like, but mine calls it timeline_container. We want this to have a relative position, and you'll probably want to set a max-width and ensure it margins 0 auto so that it centres. .timeline_container { position: relative; max-width: 1200px; margin: 0 auto; } To create the timeline bar, we create a pseudo selector for .timeline_container::after - or whatever it is you called your timeline container. Set it to position absolute, a width, and then position absolute, top and bottom at 0, and left at 50%. You may need to fiddle with positioning a bit using margining. .timeline_container::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 6px; background-color: #808080; } By the way, #808080 is exactly 50% saturation grey, so you can usually see it okay on both light and dark themes. Now, we have our bar. We need to create a box that we can use to show events on either side of this centre vertical bar. We're going to use basically the same box, and just add a second class to it that alters positioning, so that we have "containerclass positionclass" for classing. Let's call this container class .timeline_box. I gave mine 10px 40px padding, a 50% width, inherited background, and a relative positioning. We won't be creating the appearance styling for the boxes in this part, but in an inner content class in a minute. .timeline_box { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; } There is a pseudo-selector we need to use on timeline_box, this being ::after. This will create the dot on the timeline. We set this to position: absolute, 25px width and height, give it a background colour and, if desired, a border, z-index 1 and top and right positioning to get it where we want. Mine ended up top 15px and right -14px, but this didn't hold up recreating it elsewhere, so you will most likely need to mess with it. .timeline_box::after { content: ''; position: absolute; top: 15px; right: -14px; width: 25px; height: 25px; background: #222; border: 4px solid; border-radius: 50%; z-index: 1; } You might notice here that I have a border but no colouring. This is because I added other classes to colour-code the dots by era and so I set the border-colour elsewhere, so if you're not going to be doing that, you may want to set the border colour here. Next, we need to create the box positioning. We do this with two other classes, called .timeline_left and .timeline_right. These are very simple classes, all they have in the CSS for them is left: 0 and left: 50%. Now, it seems like you would create timeline_right with right: 0; but right: 0 is in a place we aren't expecting, and places the timeline box also on the left side. With the .timeline_left and .timeline_right classes, we'll add ::before pseudo-selectors to create arrows. These will point at the dot on the timeline and make it look a little fancier. You can skip this if you don't feel the need for these. .timeline_left::before { content: ''; position: absolute; height: 0; width: 0; top: 22px; right: 30px; z-index: 1; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #343434; } .timeline_right::before { content: ''; position: absolute; height: 0; width: 0; top: 22px; left: 30px; z-index: 1; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent #343434 transparent transparent; } Again, you will likely have to fiddle with the positioning. Now, the last piece of the puzzle is to create the box itself. We'll call this internal box .timeline_content. Padding, a background colour, position relative, and a 6px border radius ought to do the trick. .timeline_content { padding: 10px 15px; background: #343434; position: relative; border-radius: 6px; } Remember that whatever you make the content box's background will have to be the same colour as on the non-transparent bordering of _left::before and _right::before. Here you'll likely find that you need to fiddle with the positioning finally, if you haven't already, as you find the results are a little out of alignment, but you should eventually have something like this. And there we go. That's all there is to it. c: You can add embellishments and colour code your timeline if you'd like, I colour-coded mine by era and added a pulsating CSS animation effect on the timeline markers, but it's up to you what you do from here! Have fun! (This was a terrible tutorial, I'm half awake, sorry. xD)