Add text on a specific DIV

Question

So, i have somes progress bars like :

<div id="lifeBar-holder">
    <div id="lifeBar"></div>
</div>

<div id="discretionBar-holder">
    <div id="discretionBar"></div>
</div>

And this CSS :

#lifeBar-holder{width:200px;height:15px;background:grey; position:absolute; top:20px; left:30px;}
#lifeBar{width:0;height:100%;background:green;}

#discretionBar-holder{width:200px;height:15px;background:grey; position:absolute; top:40px; left:30px;}
#discretionBar{width:0;height:100%;background:blue;}

Here you have the demo

I want a way to add a text on each progress bar and a label, i need for example :

I'm not very good using HTML and CSS.... thanks ! :)

Answer 1

Try this (it has both label and a percantage count text):

Add this CSS code:

CSS

.label { 
    position:absolute; 
    top:40px; 
    left:0; 
    height:15px; 
    line-height:15px; 
 }

 #label_one { top:20px; }
 #label_two { top:40px; }

.percentage_txt { 
    position:absolute; 
    left:0; 
    top:0; 
    text-align:center; 
    width:100% 
 }

And change to this HTML-code:

HTML

<div class="label" id="label_one">SOME LABEL</div>  
   <div id="lifeBar-holder">
   <div id="lifeBar" style="width:40%"></div>
   <div class="percentage_txt">59%</div>
</div>


<div class="label" id="label_two">SOME LABEL</div>
<div id="discretionBar-holder">
    <div id="discretionBar" style="width:70%"></div>
    <div class="percentage_txt">1%</div>
</div>

JSBin

Answer 2

The modified HTML

 <div id="lifeBar-holder">
   <div id="lifeBar" style="width:40%"></div>
   <div class="loadNumber">40%</div>
</div>

<div id="discretionBar-holder">
  <div id="discretionBar" style="width:70%"></div>
  <div class="loadNumber">70%</div>
</div>

Modified CSS

#lifeBar-holder{width:200px;height:15px;background:grey; position:absolute; top:20px; left:30px;position:relative;}
#lifeBar{width:0;height:100%;background:green;}
#discretionBar-holder{width:200px;height:15px;background:grey; position:absolute; top:40px; left:30px; position:relative;}
#discretionBar{width:0;height:100%;background:blue;}

.loadNumber {
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    width:100%;
    text-align:center;
}

See

http://jsbin.com/EGAzAZEK/13/ http://jsbin.com/EGAzAZEK/13/edit?html,output

The idea is you add an extra div into the bar, and you position it in the top left of the parent element and set the width to 100% of parent element. you have to set position of parent element to relative for it to work, Set z-index greater than 0 to make it float over top of everything else. Set width to 100% of parent element and align text to center.