Percentage bars - A simplified technique
Tuesday, June 5, 2007 by SirMeili
Percentage bars, as I call them, can be quite useful when giving your visitors many different types of data. I have struggled with these objects for many uses, and for the longest time the code was unreadable and just plain ugly.
Here is the newest version of my progress bar:
Its not overly obtrusive. Its simple, clean, to the point, and best of all, extremely customizable!
For some reason in IE, this example does not show the text overlay. Using the same exact code on other sites produces the proper results, so I think it may have to do with my site and perhaps a conflict somewhere in my existing CSS. I am tracking it down as we speak trying to figure out why that text disappears even though when searching for it IE does find it, even if it doesn't highlight it.
(click 'More...' to read how I make them)
Here is the newest version of my progress bar:
39% (39Mb of 100MB Used)
For some reason in IE, this example does not show the text overlay. Using the same exact code on other sites produces the proper results, so I think it may have to do with my site and perhaps a conflict somewhere in my existing CSS. I am tracking it down as we speak trying to figure out why that text disappears even though when searching for it IE does find it, even if it doesn't highlight it. Ok, so how do I make them? Is it a bunch of sloppy code that would drive any person bonkers trying to read what you have done? the answer is a quick and easy, 'No.'
Now, before I start, I want to preface this by saying that I dont' think I am the first person to discover doing these items in this specific way. I will say that I did discover this on my own, and I did not learn this from any other site. If you discovered this 3 years ago, then let me say this "Great minds think alike!"
Ok, onto the code.
The HTML
<div id="spaceUsage">
<div id="spaceUsed" style="width: 39%;"> </div>
<div id="spaceFree" style="width: 61%;"> </div>
<div id="spaceText">39% (39Mb of 100MB Used)</div>
</div>
<div id="spaceUsed" style="width: 39%;"> </div>
<div id="spaceFree" style="width: 61%;"> </div>
<div id="spaceText">39% (39Mb of 100MB Used)</div>
</div>
As you can see, the code is really simple. 3 divs in a parent div. And really, the third is only necessary if you want to overlay the text. So, now that we have this basic setup, we can move on the the CSS.
Please remember it is up to whatever language you are using to dynamically produce the Percentages. I do mine in Coldfusion, but left out that code sine I feel it is irrelevant to the broader topic at hand.Anyways, next we have the CSS:
The CSS
div#spaceUsage {
border:1px solid #000066;
position:relative;
height:20px;
}
div#spaceUsed {
float:left;
background-color:#B6BFDA;
height:20px;
}
div#spaceFree {
float:right;
background-color:#E4E7F1;
height:20px;
}
div#spaceText {
width:100%;
text-align:center;
position:absolute;
top:0px;
left:0px;
color:#0C2C84;
}
border:1px solid #000066;
position:relative;
height:20px;
}
div#spaceUsed {
float:left;
background-color:#B6BFDA;
height:20px;
}
div#spaceFree {
float:right;
background-color:#E4E7F1;
height:20px;
}
div#spaceText {
width:100%;
text-align:center;
position:absolute;
top:0px;
left:0px;
color:#0C2C84;
}
This code matches up to the example I first gave. As you can see, it is really to the point.
- Make the parent div's position relative (this is needed so that you can use absolute positioning on the the third dive to overlay it)
- Float the div that shows percentage used to the left
- Float the div that shows the percentage left to the right
- Position the third div to overlay them
Not to mention that this will allow you to do almost limitless looks to your bars. Match almost any site you could ever make. Use images as backgrounds, position the inner text above or below the bar instead of inside it (using margins to offset the content around the bar itself so no overlapping occurs).
I think that's pretty much it. I really do think this is a very simplified and easy technique to master, and can easily be added onto and manipulated to fit any situation you may find for percentage bars.
I was talking to my brother about this one day, and he asked why I needed a total of 4 divs, and not just 3? I couldn't really find a good reason to have the right div (in my example with 61%). So if you wanted you could remove that div and put it like the following:New HTML
<div id="spaceUsage">
<div id="spaceUsed" style="width: 39%;"> </div>
<div id="spaceText">39% (39Mb of 100MB Used)</div>
</div>
<div id="spaceUsed" style="width: 39%;"> </div>
<div id="spaceText">39% (39Mb of 100MB Used)</div>
</div>
New CSS
div#spaceUsage {
border:1px solid #000066;
background-color:#E4E7F1;
position:relative;
height:20px;
}
div#spaceUsed {
float:left;
background-color:#B6BFDA;
height:20px;
}
div#spaceText {
width:100%;
text-align:center;
position:absolute;
top:0px;
left:0px;
color:#0C2C84;
}
border:1px solid #000066;
background-color:#E4E7F1;
position:relative;
height:20px;
}
div#spaceUsed {
float:left;
background-color:#B6BFDA;
height:20px;
}
div#spaceText {
width:100%;
text-align:center;
position:absolute;
top:0px;
left:0px;
color:#0C2C84;
}
(0)Comments | < Back
