Making the Progress Bars

Vixen on a Budget was asking about making progress bars Beachgirl's blog.

You have to calculate manually and edit the amounts under <div style="WIDTH: 37%" class="progress"> and <span style="COLOR: rgb(255,255,255)">37%</span>.


<style type="text/css">

div.goal {
BORDER-RIGHT: rgb(85,85,85) 1px solid;
BORDER-TOP: rgb(85,85,85) 1px solid;
BACKGROUND: rgb(188,188,188) 0% 50%;
BORDER-LEFT: rgb(85,85,85) 1px solid;
WIDTH: 175px;
BORDER-BOTTOM: rgb(85,85,85) 1px solid;
HEIGHT: 17px;
moz-background-clip: -moz-initial;
moz-background-origin: -moz-initial;
moz-background-inline-policy: -moz-initial

}

div.progress {
BACKGROUND: rgb(68,85,102) 0% 50%;
HEIGHT: 17px;
moz-background-clip: -moz-initial;
moz-background-origin: -moz-initial;
moz-background-inline-policy: -moz-initial


}

</style>


<h2 class="title">Finanical</h2>
<b>Emergency Fund</b><br/>
<div class="goal">
<div style="WIDTH: 37%" class="progress">
<b>
<span style="COLOR: rgb(255,255,255)">37%</span>
</b><br/>
</div></div>
<div style="WIDTH: 175px; TEXT-ALIGN: right">$10,000</div>


You should end up with something similar to what is on the left of this page. To make another bar just recopy this portion of the code.


<b>Emergency Fund</b><br/>
<div class="goal">
<div style="WIDTH: 37%" class="progress">
<b>
<span style="COLOR: rgb(255,255,255)">37%</span>
</b><br/>
</div></div>
<div style="WIDTH: 175px; TEXT-ALIGN: right">$10,000</div>