Barra de progreso automatizada

[Vendetta]

Buenas~

Estoy haciendo una especie de juego por foro, en el cual ganas experiencia y vas subiendo niveles. Como es lógico, cada nivel tiene un número que debes alcanzar para subir nivel de forma que tienes "exp obtenida" y "exp necesaria"

El caso es que he conseguido hacer -o encontrar- una barra de progreso con CSS, el problema es que no se como automatizarla para que se vaya llenando segun la exp que tienes y la que necesitas. He probado varias cosas y en todas he tenido un problema u otro.

Primero, la barra se alargaba segun la exp necesaria, algo que no quiero porque terminaria deformandome la página...
Ahora, de la forma en que lo tengo no se alarga pero el tamaño de la barra es de 200px, asi que cuando tengo 201 de exp, la barra se ve llena aunque la necesaria para subir nivel sean 400...

Dejo los códigos

Código HTML:

<dd>
    <span>
        <em style="left:<?=$exp?>px">2,5%</em>
    </span>
</dd>
 

Código CSS:

DL, DT, DD { margin:0; padding:0; }
 
DD {
    width:              216px;
    height:             41px;
    background:         url(images/bg_bar.gif) no-repeat 0 0;
    position:           relative;
}
DD SPAN {
    position:           absolute;
    display:            block;
    width:              200px;
    height:             25px;
    background:         url(images/bar.gif) no-repeat 0 0;
    top:                8px;
    left:               8px;
    overflow:           hidden;
    text-indent:        -8000px;
}
DD EM {
    position:           absolute;
    display:            block;
    width:              200px;
    height:             25px;
    background:         url(images/bg_cover.gif) repeat-x;
    top:                0;
}
 

y las variables son $exp y $need_exp...Aunque no creo que sea necesario saber nada de php e__e solo necesito saber el método para que la barra se llene, sin necesidad de alargarla, es decir, con un tamaño fijo.

El valor left del EM, es lo que hace que la barra se vea más o menos llena...

Espero que se haya entendido...Lo he puesto en CSS porque se trata de diseño...imagino que no habra problema con esto.

[Daniel Ulczyk]

Tema movido desde el foro de Posicionamiento SEO