What is a good technique for poll result bars?

I am creating some polling software and am currently researching techniques for doing poll result graph bars. Nothing complicated, just some simple results bars.

I was wondering if there are any tried and true best methods for this. The best that comes to my mind is having a div container for each bar, and then an image or some other element where you set the size (width) equal to the options result percentage (inline css).

Example of this

strong text

// Option 1 Results
<div>
   <span style="background-color: #ff0000; width: 33%"></span>
</div>

// Option 2 Results
<div>
   <span style="background-color: #ff0000; width: 16%"></span>
</div>

etc…

Any know of any better techniques, or is this pretty much how most do it?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Yes, that’s a good way to do it.

Here’s the same idea with more refinement:

Live Demo

HTML:

<div class="pollBars">
    <span class="t1" style="width: 10%">69</span>
    <span class="t1" style="width: 20%">100</span>
    <span class="t1" style="width: 70%">200</span>
    <span class="t2" style="width: 90%">666</span>
    <span class="t2" style="width: 120%">Over 9000!!</span>
</div>

CSS:

.pollBars {
    width: 300px;
    background: #ccc
}
.pollBars span {
    display: block;

    padding: 3px;
    margin: 7px 0;

    font: bold 14px/1 sans-serif;

    -moz-border-radius: 4px;
    border-radius: 4px;

    text-shadow: 1px 1px 1px #444;
}

.t1 {
    color: #fff;

    border: 1px solid red;

    background: #f85032; /* old browsers */
    background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* ie */
}

.t2 {
    color: #fff;

    border: 1px solid blue;

    background: #6db3f2; /* old browsers */
    background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* ie */
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0