x

Simple CSS Horizontal Bar Graph


I used this technique on my blog to create a simple graph. It can be used as a type of meter or as a bar chart. On the blog I use it to show how my month income is made up. At the moment 75% is from freelancing and 25% from Adsense.

This is very basic and simple to understand. You have a div container of fixed width and height. This is the background to the graph which hasn’t been filled. You then have a div container inside that which expands horizontally as a percentage width. This is great if you want to show 75% bandwidth used or something along those line

XHTML

		<div class="barbg">
<div class="color" style="width: 75%;"></div>
</div>

CSS

  .barbg{
     height:20px;
    border:1px solid #A1CA68;
    width:120px;
    margin-left:20px;
    float:right;
    text-align:left;
    }
    .color{
    height:17px;
    background:url(images/bgraph_03.gif) repeat-x top;
    color:#fff;
    font-weight:bold;
    font-family:verdana;
    text-align:center;
    padding-top:3px;
  }

In this example I am using an image to repeat and show the filled up section but you can just as easily use a solid color.

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • CSS Poker Cards

    September 3, 2010 / No Comments

    Not really a tutorial but I developed some really simple cards. They are perfect for describing a poker hand or anything else involving cards. Check them out at the following link. Let me know if you encounter any problems or what to request anything.

    Read
  • jQuery Enhanced CSS Navigation

    July 4, 2010 / 3 Comments

    In this tutorial we will combine jQuery and CSS to create a nice tab style navigation. The basic effect we are creating is when you hover over a tab it raises up using jQuery.

    Read
  • 13 Awesome CSS and jQuery Navigations for Free

    February 13, 2010 / 17 Comments

    Today I have been experimenting with adding jQuery effects to navigations and links to create some pretty nice interfaces. I have written a brief description for each and include a download.

    Read

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books