Pure CSS Timeline

Comment: 0 Comment | Hit: 2584 | Date: 20 Jul 2010 04:07 | Category: CSS

First and foremost, is the solution I’m about to share with you the best solution? Probably not. I may revisit this at a later time when I have more than fifteen minutes to spend thinking about it, but for now it works and is accessible. If you don’t care to read the entire article, you can take a look at the demo or grab the source below and be on your merry way.

What are we building?

Let's take a look at a screenshot of the timeline that we're building in this tutorial.

pure css timeline

We have a nice looking timeline styled completely with CSS, but what happens if the visitor doesn't have CSS enabled? Since we used unordered lists, we still have a nicely accessible list of events. What makes this even more useful is that I put the dates in parenthesis after the label for the timeline block. I would suggest doing this as it will help with accessibility, you can always hide the dates if you don't want them with CSS later using the display: none; property.

The Markup

I chose to use a unordered list implementation. It's very straight forward, however what I would like to explain are the inline styles being used on the list elements. I normally do not advocate using inline styles, in fact you should avoid using them if at all possible. However, for this solution, I couldn't see any other way around it. Basically what you would do is have a PHP loop or some other server side loop echoing these list elements out. In the process you would calculate the correct width and position of each timeline block and set the width and left values as inline styles.

 
    
        
  • Design & Typography (2007 - 2009)
    • 
        
  • Photography (2006 - 2009)
    • 
        
  • Object Oriented Programming (2005 - 2009)
    • 
        
  • Web Development (2004 - 2009)
    • 
        
  • 3D Modeling and Rendering (2003 - 2006)
    • 
        
  • Drawing & Illustration (2003 - 2009)
    • 
    
 

    
    
        
  • 2003
    • 
        
  • 2004
    • 
        
  • 2005
    • 
        
  • 2006
    • 
        
  • 2007
    • 
        
  • 2008
    • 
        
  • 2009
    • 
    
 

The CSS

The CSS is as simple as the markup. You will notice that I'm using the border-radius property (as well as the mozilla and webkit specific versions as border-radius isn't implemented in any browsers yet, use border-radius to plan for the future). You should note that this is a CSS3 property and is not supported by all browsers. In fact, all versions of Internet Explorer don't support this property at all (surprise, surprise). Other than that, take a look at what's going on and if you have questions feel free to post a comment.

ul.events {
    list-style-type: none;
    margin: 0;
    padding: 0 0 20px 0;
}

ul.events li {
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    background: #eee;
    border: 1px solid #ddd;
    color: #707070;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 6px;
    padding: 3px 0;
    position: relative;
    text-align: center;
}

ul.events li em {
    color: #aaa;
    font-weight: normal;
    font-size: 0.9em;
}

ul.intervals {
    list-style-type: none;
    padding: 0;
    display: block;
}

/* The width depends on the number of intervals. For example 100 / 7 = 14.29% -- then subtract a little bit for room for the borders */
ul.intervals li {
    background: #fff url(/images/1x1_eee.gif) repeat-x left 10%;
    border-right: 1px solid #ccc;
    color: #999;
    float: left;
    font-size: 1.2em;
    margin: 0;
    padding: 15px 0;
    text-align: center;
    width: 14.17%;
}

ul.intervals li.first {
    border-left: 1px solid #ccc;
}

Summary

As you can see, we've put together an aesthetically pleasing timeline using only CSS and unordered lists. Like I said before, this may not be the perfect solution markup wise and CSS wise, but it gets the job done and is still quite accessible for all users. This may be a topic to be revisited in the future to improve the markup if need be.

Take the timeline a step further. You could add some Javascript interactions, tooltips, animations, etc. How does this work for mobile browsers? Does it still look nice, is it still accessible? Experiment, play with it, have fun!

Download:

http://mattbango.com/sources/pure-css-timeline.txt

Demo:

http://mattbango.com/demos/pure-css-timeline/

Origional:

http://mattbango.com/notebook/web-development/pure-css-timeline/

http://digg.com/submit?phase=2&url=http://www.nvitou.com/en/article/pure-css-timeline/&title=Pure CSS Timelinehttp://delicious.com/post?url=http://www.nvitou.com/en/article/pure-css-timeline/&title=Pure CSS Timelinehttp://www.facebook.com/sharer.php?u=http://www.nvitou.com/en/article/pure-css-timeline/&t=Pure CSS Timelinehttp://twitter.com/home?status=Pure CSS Timeline via @nvitou http://bit.ly/98iEUOhttp://www.google.com/bookmarks/mark?op=edit&bkmk=http://www.nvitou.com/en/article/pure-css-timeline/&title=Pure CSS Timelinehttp://www.stumbleupon.com/submit?url=http://www.nvitou.com/en/article/pure-css-timeline/&title=Pure CSS Timelinehttp://www.myspace.com/Modules/PostTo/Pages/?u=http://www.nvitou.com/en/article/pure-css-timeline/&t=Pure CSS Timelinehttp://www.squidoo.com/lensmaster/bookmark?http://www.nvitou.com/en/article/pure-css-timeline/&title=Pure CSS Timeline

Comments

Name:

Email/Website:

Your comment:

nVitou.com in brief

nVitou.com was founded in July 2010 by a Cambodian, NOUV Vithou, located in Phnom Penh. The mission is to exchange knowledge and experiences on code and design.