This is going to be a long post, so, if you’re reading it in your RSS reader of choice, star it, mark it, do whatever you have to make sure you can get past it, ‘cause I’d much rather have you read it and enjoy it over time, savouring each morsel, rather than speed through it swearing about someone who doesn’t shut up.
If you’re reading it on the page, then, um, sorry. It is rather long.
One day, in my last job, I was given quite the challenge – a detailed three-year timeline, with little things that had to happen each month. Some people said “Stick it in an image”, other people said “Stick it in a Word document”, but I, being a CSS geek, decided that it should be entirely in lists.
Why? Because that’s what it is:
Why wouldn’t that be in a series of nested lists?
So this is how to do it. It’s been tested in Firefox/IE 6/Opera 9, and a variation of it was reviewed in Safari, but if you find any bugs, be sure to let me know.
For our example, we’ve got Bob Bobson’s Timeline of Work. Bob’s got a bit of a wandering eye when it comes to the workplace, so he’s always looking for something bigger and better. In the past three years, Bob’s worked at three companies, and he’s had six job titles. In-between all of the job title changes, he’s also been applying and interviewing for even more jobs, in hope that he’ll find that dream job he’ll settle down into.
So we start with the very basics. The years are in an <ol>, then nested inside each year <li> is an <ol> with months. Nested inside each month <li> is an <ul>, with each item being a <li>.
Got that?
<ol>
<li>Year
<ol>
<li>Month
<ul>
<li>Event</li>
</ul>
</li>
</ol>
</li>
</ol>Just like that.
This is how it’ll appear to anyone who has CSS turned off. And, as you can see in the first example, it’s fairly readable – not perfect, but it’s nice. (Of course, if you’re starting from scratch, you’ll have your browser default look for this page, but it’s my examples, and they have to look a little nice, y’know?)
But we can make it better.
In the second step, we need to make sure certain tags are picked up, and other tags aren’t. The main <ol> is given an ID of “timeline”, just in case you’ve got other <ol>s on the page (say, menus, or even another timeline). Each month <li> that has a <ul> in it is given a class of “nested”, so that we can apply styles to it that we don’t apply to the other <li>s.
So now we have:
<ol id=”timeline”>
<li>Year
<ol>
<li class=”nested”>Month
<ul>
<li>Event</li>
</ul>
</li>
</ol>
</li>
</ol>That’s all the HTML you need to know for this. The rest is all CSS jiggery-pokery.
And to start with our CSS, we need to lose all the list-styles. No discs, no numbers, just a clean list. And, to make it clearer, we set both <ol>s and the <ul>s to have margin: 0; padding: 0. Which gives us what we see in the second example.
Now this is actually less readable than the original version, so what we need to do is put some space in. <ol id=”timeline”> is left alone, but the <ol> inside <ol id=”timeline”> could be budged over a bit. Display it as block, and add a left margin of 10em, just to push it over.
And, because it works so well there, you can do it for the <ul> too. Display: block it, margin-left: 10em, and you have the third example, which actually looks quite nice.
But it’s not quite nice enough. What would be lovely is if those <ul>s were a little more obviously different than the <ol>s. Give the <ul>s some padding (I went for 0.5em), a background colour, and a border.
To stop them flowing all the way over to the edge, I’ve given the <ul>s a width of 30em, but it’s up to you what you want to do. If you do set a width, it will come up later, so keep an eye on how wide you’re letting things be.
With the background and border, the fourth example is shaping up quite nicely.
I bring in the borders on the fifth example, just so you can see what happens when things move around. You want a border-bottom on the <li>s for <ol id=”timeline”>, a border-left for the month <ol>s, and a border-bottom for the <li class=”nested”>s.
Which can be a bit tricky, but it’s easily sorted. While your ol#timeline li has a border attached to it, the ol#timeline ol li has a border: 0 instead, which takes care of the borders for the <li>s inside of <ol>s and inside the <ul>s. Add in a border-bottom for ol#timeline ol li.nested, and you have your bottom borders organised.
Pop a border-left onto the ol#timeline ol, and it’s almost done. A bit of padding (left and bottoms, I went for 0.5em) and a display: block on the ol#timeline ol li, and that’s it.
But, as you can see, the border for the year is way down at the end, and it’s just sloppy. Which is where the sixth example comes in.
To make the border rest comfortably just under the text, you need to float:left the month <ol>s. Making it position:relative will help down the line as well, so adding both of those in makes for a smooth line.
In the seventh example, we do the same for the <ul>s. So now we have both <ol>s with lovely borders underneath.
But it’s not quite there yet. For one thing, the month <ol>s and the <ul>s all sit underneath the parent <li>. It just takes a quick top: -1.15em to move it up just enough to make a nice effect where your eye smoothly follows from the year, to the month, to the event. The eighth example shows the effect on the month <ol>s, and the ninth example shows the effect on the <ul>s.
We’re in the home stretch now. And you can see one of the big problems — that long border smacking against the months, trailing all the way to the end. But that’s a quick fix. Stick a background: #fff (or whatever your background colour is) onto the months <ol>, and voila, it’s gone.
Except not quite all the way. Sure, it’s not there where the month <ol> and the <ul> are, but the <ul> stops after a certain point, and the ol#timeline <li>s just keep going along.
This is where you refer all the way back to the width you gave the <ul>s. And then the left margins for the <ul>s and the month <ol>s. In my case, adding all that up comes to 50em (30em + 10em + 10em). So give ol#timeline width:50em and boom, the tenth example is a thing of beauty.
The final stage is made of little cosmetic touches. Give the year <li>s a font-weight: bold and a font-size: 120%, which makes them bigger and bolder. Give the other <li>s a font-size: 90%, which makes the months slightly larger than the events, and ol#timeline ol li a lighter colour. Then give li.nested and ul li the original colour (in my case, #003), and there you go.
A timeline to be proud of.
Future developments (above my head, so I bring up the possibilities to y’all):
So, if you got through all this, I’m really quite amazed, and I congratulate you. Have a look at all this, and tell me what you think!
Apr 11, 11:28 PM |
Commenting is closed for this article.
Easily amused 30-something Southern Californian now living in Nottingham.
Read more...
That looks great.
By Colin Newell | Apr 12, 07:19 AM
Fantastic!
By Richard H Hathaway | Apr 13, 03:08 PM
Pretty niffty. I’ve been meaning to get round to creating one of those lifestreams and this might be a pretty good base.
By Gareth Rushgrove | Apr 14, 12:45 PM