Beste leden,

Ik ben voor een spel van mij bezig met een Rankbar, dit houdt in dat er een achtergrond moet zijn die lichtgroen is, en over die div komt dan een div die over de lichtgroene div gaat. En over die div moet een text komen met bv: 10% (leven). Ik heb hetvolgende al:

Code:

/**
 * RankBar
 */
#bar_container {
 width: 96px;
 height: 14px;
 border: 1px solid #000000;
 background: #008000;
}
#text {
 position: relative;
 width: 100px;
 height: 14px;
 text-align: center;
 padding: 0;
 margin: 0;
 text-align: center;
 font-weight: bold;
 font-size: 11px;
}
#procent {
 border-right: 1px solid #000000;
 background: #00FF00;
 height: 14px;
 float: left;
}

HTML:

Code:

<div id="text">
test
<div id="bar_container">
 <div id="procent" style="width: 30px;"></div>
</div>
</div>

Hopelijk weet iemand de oplossing hiervoor. De output moet zoiets ongeveer zijn, maar dan bovenaan nog een border:

| |12% |

http://ws1.hostis.nl/lol.gif
zoiets, en dan vult die balk aan naargelang de % stijgt?
ik kan wel eens kijken :)


edit: probeer dit eens

Code:

#text {
 position: relative;
 width: 100px;
 height: 14px;
 text-align: center;
 padding: 0;
 margin: 0;
 text-align: center;
 font-weight: bold;
 font-size: 11px;
}
#bar_container {
 width: 96px;
 height: 14px;
 border: 1px solid #000000;
 background: #008000;
}
#procenttext {
 color:#000000;
 z-index:1;
 position:absolute;
 width:96px;
 text-align:center;
}
#procent {
 border-right: 1px solid #000000;
 background: #00FF00;
 height: 14px;
 float: left;
}

Code:

<div id="text">
test
<div id="bar_container">
 <div id="procenttext">30%</div>
 <div id="procent" style="width: 30px;"></div>
</div>
</div>

jap idd :)
dat stijgen is gewoon met die width: <?=$waarde;?>; word gewoon met php gedaan

hehe, ik heb men vorige post geedit en hem dan ongeveer gelijk geupdate :)
dacht wel dat dat met php ging gebeuren


edit: vergeten IE en opera te checken en IE = slecht

jap idd, ie is slecht :)
Zal zelf nog wat lopen uittesten :)

Code:

#text {
 position: relative;
 width: 100px;
 height: 14px;
 text-align: center;
 padding: 0;
 margin: 0;
 text-align: center;
 font-weight: bold;
 font-size: 11px;
}
#bar_container {
 text-align:left;
 width: 96px;
 height: 14px;
 border: 1px solid #000000;
 background: #008000;
 position:relative;
}
#procenttext {
 color:#000000;
 z-index:1;
 position:absolute;
 left:0px;
 width:96px;
 text-align:center;
}
#procent {
 border-right: 1px solid #000000;
 background: #00FF00;
 height: 14px;
 position:relative;
 left:0px;
 
}

html blijft dezelfde!
zo is het gefixed :)

Bedankt, it works