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.
