como solucionar este codigo?

[rompeguesos]

hola amigos estaba buscando por la web para hacer votacion por estrellas pero tengo un problema en el codigo falla el tema del diseño, pueden comprobarlo aqui http://www.coriaweb.es/coriaweb/func...stas/index.php y deberia de ser como el que hay en esta web http://www.plantillaswebgratis.info/recursos/rank.php . El problema es que e reducio la imagen que viene a 25x75 pixeles y ahora no se como ponerlo bien este es el css

Código PHP:

  .rank ul {
    list-style: none;
    margin: 3px;
    padding: 0px;
    width: 50px;
    height: 15px;
    position: relative;
    background: url(rank.gif) top left repeat-x;
    margin-left:0px;
}
.rank li {
    padding: 0px;
    margin: 0px;    
    float: left;    
}
.rank li.current-rating {
    background: url(rank.gif) left bottom;
    position: absolute;
    height: 15px;
    display: block;
    text-indent: -9000px;
    z-index: 1;
}
.rank li a {
    display: block;
    width: 15px;
    height: 15px;
    text-decoration: none;
    text-indent: -9000px;
    z-index: 20;
    position: absolute;
    padding: 0px;
    background-image: none;
}
.rank li a:hover {
    background: url(rank.gif) left center;
    z-index: 1;
    left: 0px;
}
.rank a.star-1 {left: 0px;}
.rank a.star-1:hover {width: 15px;}
.rank a.star-2 {left: 15px;} 
.rank a.star-2:hover {width: 30px;} 
.rank a.star-3 {left: 30px;} 
.rank a.star-3:hover {width: 45px;} 
.rank a.star-4 {left: 45px;} 
.rank a.star-4:hover {width: 60px;} 
.rank a.star-5 {left: 60px;} 
.rank a.star-5:hover {width: 75px;} 
   

El problema es que me sobra una estrella y el segundo problema es que se supone que donde la puntuacion de la votacion no llega sale en blanco ami me salen todas en amarillo.

[kseso?]

para mostrar las estrellas utiliza un "spite" (un solo archivo de imagen con todas las estrellas)
Si modificaste el tamaño del sprite, debes corregir también los tamaños de los elementos que la utilizan y las coordenadas del "background:transparent url(rank.gif) repeat scroll left bottom;"

Así, para que sólo se muestren 5 estrellas, con cambiar en .rank ul su anchura a 75px y añadir overflow: hidden, se corrige. (o no darle anchura y que crezca según el contenido que aloje).

[rompeguesos]

gracias se me a solucionado lo de las 5 estrellas con eso que me has dicho.
ahora el otro problema es lo del color de las estrellas, no se como tengo que hacer para cambiar eso de las coordenadas que dices, ña imagen es la misma que la que sale en la explicacion del segundo enlace que te pase pero con el tamaño de 15X50.

[kseso?]

No, la imagen no es la misma, parecida sí, pero igual no.
La tuya: ..
La original del ejemplo: ..

Deberías alterar en el css las medidas de los elementos en la misma proporción que has hecho con la imagen.

Ejemplo

.rank ul {
width: 125px;
height: 25px;
}
.rank li.current-rating {
height: 25px;
}
.rank li a {
width: 25px;
height: 25px;
}
.rank a.star-1 {left: 0px;}
.rank a.star-1:hover {width: 25px;}
.rank a.star-2 {left: 25px;}
.rank a.star-2:hover {width: 50px;}
.rank a.star-3 {left: 50px;}
.rank a.star-3:hover {width: 75px;}
.rank a.star-4 {left: 75px;}
.rank a.star-4:hover {width: 100px;}
.rank a.star-5 {left: 100px;}
.rank a.star-5:hover {width: 125px;}

Si haces esto último, creo que será mas exacto que lo indicado en mi primer comentario.

Un saludo

[rompeguesos]

Esta mejor pero me sigue dando problemas miralo en el primer enlace que te pase. Asi esta el codigo:

Código PHP:

  .rank ul {
    list-style: none;
    margin: 3px;
    padding: 0px;
    width: 100px;
    height: 15px;
    position: relative;
    background: url(rank.gif) top left repeat-x;
    margin-left:0px;
}
.rank li {
    padding: 0px;
    margin: 0px;    
    float: left;    
}
.rank li.current-rating {
    background: url(rank.gif) left bottom;
    position: absolute;
    height: 15px;
    display: block;
    text-indent: -9000px;
    z-index: 1;
}
.rank li a {
    display: block;
    width: 15px;
    height: 15px;
    text-decoration: none;
    text-indent: -9000px;
    z-index: 20;
    position: absolute;
    padding: 0px;
    background-image: none;
}
.rank li a:hover {
    background: url(rank.gif) left center;
    z-index: 1;
    left: 0px;
}
.rank a.star-1 {left: 0px;}
.rank a.star-1:hover {width: 15px;}
.rank a.star-2 {left: 15px;}
.rank a.star-2:hover {width: 30px;}
.rank a.star-3 {left: 30px;}
.rank a.star-3:hover {width: 45px;}
.rank a.star-4 {left: 45px;}
.rank a.star-4:hover {width: 60px;}
.rank a.star-5 {left: 60px;}
.rank a.star-5:hover {width: 75px;}