Create Facebook Timeline Using HTML and CSS Only

By the end of 2011 Facebook introduced timeline to tell the story of your life. Of course not really the entire of your life, just a life that starting from the day you become the member of Facebook. There are people like or dislike this new feature. Some say that they don’t want people to see his whole life story in Facebook , although there is a feature to hide part of your post. In this post I am going to show you how to create your own Facebook timeline using HTML and CSS only. You can use the timeline to show your activity during a year or to tell the story of your life on your personal web page.

Demo Download

The first step, I create the HTML code that consist of list. I use OL and then detect which one is even or odd. Then I use CSS to float one of them to the right. I also use a small blue images as the background of  OL to create the vertical line. Here is the HTML code.

<ol id="timeline">

  <li> 
    <div class="time">Yesterday</div>
    <span class="corner"></span>
    <p>just had a lunch ...<br/>
</p>
  </li>

  <li>
    <div class="time">about an hour ago</div>
    <span class="corner"></span>
    <p>play football</p>
  </li>

  <li>
    <div class="time">Monday</div>
    <span class="corner"></span>
    <p>Have a nice hot chocolate in the morning</p>
  </li>

  <li>
    <div class="time">Yesterday</div>
    <span class="corner"></span>
    <p> learn css
    </p>
  </li>
</ol>

You can add more list if you want, the above code only have four list to make it easier to follow.

Then I create CSS for the OL and put an image as a background to create a vertical line. I put the background on the center and repeat the images on y-axis.

#timeline{
    width:800px; 
    list-style-type: none; 
    background: url(timeline.png) top center repeat-y; 
    margin: 0 auto; 
    padding:20px; 
    margin-bottom:10px;
}

Left and Right Position

Each post on your timeline is displayed to the right and left of the center line. If it odd list, then I float it to the right and put it on the left if it is even. I use nth-of-type to check the list whether it is odd or even. You can read my previous post on checking the odd or even on the list.

#timeline li{
    width:375px; -moz-border-radius:2px; border-radius:2px; webkit-border-radius:2px; border:1px solid #c3ccdf; padding:5px;background-color:#FFF;
}

#timeline li:nth-of-type(odd){
    clear: both;float:right; 
}

#timeline li:nth-of-type(odd), #timeline li:nth-of-type(even){
    margin:-10px 0 20px 0;
}

The Arrow

Actually I don’t know what it is called, something that face to left and facing the vertical line if your post on the right. Let us call it the arrow. If your post on the left, then the arrow should face to the right to show to the timeline that it is your post. I use two images of arrow and use the same method to check the even or odd. If it is odd, then the post will float to the right so I should use the right arrow.

#timeline li:nth-of-type(even) .corner{
	position:absolute; display:block; margin-left:380px;width:20px;	height:15px;background:url(right.png);
}
#timeline li:nth-of-type(odd) .corner{
	position:absolute;display:block;margin-left:-25px;width:20px;height:15px;background:url(left.png);
}

Final Result

By the end of this post, you should get the result like the image below. Of course I add more code to create the header. You can get the header on the download version.

create Facebook timeline tutorial

 

Incoming search terms:

Be Sociable, Share!

Related Posts:

16 Comments

Add a Comment

Your email address will not be published. Required fields are marked *