probleme barres d'energie

[Anthor]

Bonsoir,
je vous propose ma solution.



Le résultat de l'exemple est visible ici : http://snippets.anthor.net/progressbar.htm

Le code ( 100% compatible tous navigateurs )

Code PHP :

<?php 

<style type="text/css">

.progressbar{

    border: 1px solid #000000;

    width: 190px;

    height: 18px;

    position: relative;

    color: #000000;

    font-weight: bold;

}

.progressbar div.progress{

    position: absolute;

    width: 0;

    height: 100%;

    overflow: hidden;

    background-color: #B00000;

}

.progressbar div.progress .text{

    position: absolute;

    text-align: center;

    color: #FFFFFF;

}

.progressbar div.text{

    position: absolute;

    width: 100%;

    height: 100%;

    text-align: center;

}

.progressbar span.text{

    width: 190px;

}



/* Couleur spécifique */

.green{

    border: 1px solid #FF0000;

    color: #000000; 

}

.green div.progress{

    background-color: #00FF00;

}

.green div.progress .text{

    color: #FF0000;

}



/* Image */

.image{

    border: 1px solid #000000;

    color: #000000; 

}

.image div.progress{

    background-color: #00FF00;

    background-image: url(_img/barre3d.jpg);

}

.image div.progress .text{

    color: #FF0000;

}

</style>



<!-- Version Normale -->

<div class="progressbar">

    <div class="text">Parle : 80/200</div>

    <div class="progress" style="width: 40%;">

        <span class="text">Parle : 80/200</span>

    </div>

</div>



<br />



<!-- Version Couleur Spécifique -->

<div class="progressbar green">

    <div class="text">Parle : 80/200</div>

    <div class="progress" style="width: 40%;">

        <span class="text">Parle : 80/200</span>

    </div>

</div>



<br />



<!-- Version Image -->

<div class="progressbar image">

    <div class="text">Parle : 80/200</div>

    <div class="progress" style="width: 40%;">

        <span class="text">Parle : 80/200</span>

    </div>

</div>