rusty kuhnts (![[info]](https://www.insanejournal.com/img/userinfo.gif){kind=small} igpayatinlay) wrote in ![[info]](https://www.insanejournal.com/img/community.gif){kind=small} rp_tutorials,@ 2010-04-28 02:40:00 |
 |
|||
|
|
|
|
|
|
|
| Entry tags: | coding: timelines |
| j a n u a r y | 3.1.2010 An event that happened on 3 January, 2010 goes here. I'm going to talk a bit more about it, just because there will be some description on your timeline, I bet. Let's pretend that I'm saying something interesting, why don't we? | |
| 12.1.2010 An event that happened on 12 January, 2010 goes here. For this one, the less description the better. | ||
| 25.1.2010 An event that happened on 25 January, 2010 goes here. This one deserves some serious Lorem Ipsum, since it's so complicated. Duis ac molestie diam. Etiam hendrerit faucibus augue, nec iaculis augue venenatis in. Phasellus ornare congue justo sit amet dignissim. Nulla nisl leo, luctus a placerat vitae, gravida vitae ligula. Mauris scelerisque porta libero, id posuere libero porta vitae. Aenean in nulla purus. Proin semper quam vel nunc eleifend scelerisque. Fusce placerat est non lacus auctor placerat. Duis eget elit quis massa posuere ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ut egestas magna. | ||
| f e b |
14.1.2010 An event that happened on 14 February, 2010 goes here. For this one, the less description the better. |
So this uses basic table code, and utilizes the rowspan property to define sections. Here's how!
- Start your table:
- Start your first row:
- For the left-hand columns (the division of time), use one of these cells here:
- For the little colored line that goes the whole way down your timeline, you need only do this next step once. Right now it's set to span 1,000 rows. If for some reason your timeline is one hefty BAMF of a timeline, increase the rowspan to suit however many events you have in total.
- Now we're on to the cell that contains each event.
- Close this row!
- Since the first two columns are set to span rows, all subsequent rows in each section only need the event cell (step five).
- This should now look like the "January" section in the example above, which is set for 3 events.
- Once you've hit the number of rows that your first column is set to span, you have to repeat step three to start a new section, and then back at it with the rows-as-events.
- Could I BE more confusing? ... well sure, but if I've been too confusing and you have questions, ask and I'll try to explain better!
- Obviously, you can change up the font-family to suit your style, the font-size to suit your tastes, the hexidecimal colors (#e8e8e8 is the grey, #4D837D is the blue, #000000 is black) to suit your palette, the width of the table and the columns to suit your space, etc.
- For anyone who prefers to edit an example as a whole, here's the exact code for the sample above: