2

I'm trying to make a simple progress bar using the width property of an HR representing percent complete. I did these years ago but for some reason I can't seem to make this one look right. The website uses tables so I am placing the bar within a table cell. I'm open to doing it with pure css but I would like this to be light as in a few lines of code as there is a lot of other stuff on this page that has to load quickly.

I can get the rule to display a nice solid bar. 

<td width=200 style="border: 2px solid silver;padding:none"><hr style="color:#c00;background-color:#c00;height:15px; border:none;" align="left" width=50% /></td>

where the percentage complete is set on the server side with php. This is not a dynamic bar where polling is required. Just one that represents percentage of a profile that is complete.

Ideally, I'd like the bar to fill a percentage of the cell equal to that completed so that the solid bar shows what percent is done and the white space to the right what part remains. However, I can't get a nice looking rule around the whole cell for the bar to fill a portion of. Instead there is a lot of space around the bar. I've tried setting the padding to none but that doesn't seem to work.

Here is a jsfiddle.

http://jsfiddle.net/GqrnC/

Thanks for any suggestions.

4

2 に答える 2

5

You have to remove the margins from the <hr> (add margin: 0 to its styles) to get rid of the extra space: http://jsfiddle.net/GqrnC/1/

<table>
  <tr>
    <td width=200 style="border: 2px solid silver;padding:none">
      <hr style="color:#c00;background-color:#c00;height:15px; border:none;
                 margin:0;" align="left" width=50% />
    </td>
  </tr>
</table>

However, I agree with the comments above, I don't see any reason to use an <hr> instead of a <div> for this. The <hr> has the semantics of a "separator", which is not the case here. A div has neutral meaning.

于 2012-06-30T22:00:59.990 に答える
4

Does this fit your needs better: http://jsfiddle.net/GqrnC/16/

You should really use <div> instead of a <hr> since a <div> is a structural element.

HTML

<div class='outer'>
    <div class='inner'>

    </div>
</div>

CSS

.outer{
    border: 2px solid silver;
    width: 200px;
}
.inner{
    background-color: #c00;
    width: 50%;
    height: 5px;
}

Alternatively, I would recommend looking into the jQuery UI progress bar. It is built exactly for this case and looks really great (plus if you want to later, you can update it using AJAX). ​</p>

于 2012-06-30T22:05:53.980 に答える