Progress bar in HTML/CSS

Question

 dd { 
    /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: url("white3.gif"); 
 }

 dd div.blue { 
    /*position: relative; */
    background: url("blue.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
 }

HTML:

<dd>
    <div class="blue" style="width:35%;"> 
</dd>

This creates a white bar and fills it with blue 35%.

Now I would like to fill the SAME progress bar with two different values. For example, if value A was 30% and value B was 40%, 70% of the bar would be filled, but the percentage of each could be seen by a difference in colors. Value A and B can come in any order on the bar, as long as I can tell there are two different things and "see" how much each one is taking up.

Any suggestions?

Thanks.

Answer 1

I suggest layering another bar over it and shifting it left/right as needed.

If the bars aren't supposed to stretch the length of the viewport, you could put them in a div with overflow:hidden to keep the illusion intact.

Edit:

I just figured out why I wanted to do it that way and not follow what you'd started. When I did something similar before, it was using images, where changing the width of course have mangled the overlaying image.

With just plain colors, I'm sure you could get away with just using the size. But I'd still use CSS to layer one over the other.

Answer 2

Are you looking for something like this?

CSS:

div.dd { 
   /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: #fff; 
}

div.dd div.blue { 
    /*position: relative; */
    background: #00f; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}
div.dd div.red { 
    /*position: relative; */
    background: #f00; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block;
    float: left;
}

HTML:

<div class="dd">
    <div class="blue" style="width:35%;"></div>
    <div class="red" style="width:10%;"></div>
</div>

I'm not sure why you're using the dd tag (for me, this tag causes the divs to render beneath the dd tag, rather than inside).