Foros del Web » Creando para Internet » CSS »

Barra de progreso automatizada

Estas en el tema de Barra de progreso automatizada en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/05/2011, 18:50
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
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.
  #2 (permalink)  
Antiguo 01/05/2011, 19:28
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Respuesta: Barra de progreso automatizada

Tema movido desde el foro de Posicionamiento SEO
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)

Etiquetas: automatizada, barra, posicionamiento-seo, progreso
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:49.