Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/05/2011, 17:50
Vendetta
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 16 años, 1 mes
Puntos: 5
Barra de progreso automatizada

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:
Ver original
  1. <dd>
  2.     <span>
  3.         <em style="left:<?=$exp?>px">2,5%</em>
  4.     </span>
  5. </dd>

Código CSS:
Ver original
  1. DL, DT, DD { margin:0; padding:0; }
  2.  
  3. DD {
  4.     width:              216px;
  5.     height:             41px;
  6.     background:         url(images/bg_bar.gif) no-repeat 0 0;
  7.     position:           relative;
  8. }
  9. DD SPAN {
  10.     position:           absolute;
  11.     display:            block;
  12.     width:              200px;
  13.     height:             25px;
  14.     background:         url(images/bar.gif) no-repeat 0 0;
  15.     top:                8px;
  16.     left:               8px;
  17.     overflow:           hidden;
  18.     text-indent:        -8000px;
  19. }
  20. DD EM {
  21.     position:           absolute;
  22.     display:            block;
  23.     width:              200px;
  24.     height:             25px;
  25.     background:         url(images/bg_cover.gif) repeat-x;
  26.     top:                0;
  27. }


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.