Free CSS Templates

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. You can see a demo of the chart on my blog at: Web design and development tips

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.