T.T.T. T.T.T. - 25 days ago 5
CSS Question

Progress bar in HTML/CSS

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

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).