Foros del Web » Creando para Internet » CSS »

como solucionar este codigo?

Estas en el tema de como solucionar este codigo? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/08/2009, 11:44
Avatar de rompeguesos  
Fecha de Ingreso: marzo-2009
Mensajes: 690
Antigüedad: 8 años, 9 meses
Puntos: 8
Pregunta como solucionar este codigo?

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-
stylenone;
    
margin3px;
    
padding0px;
    
width50px;
    
height15px;
    
positionrelative;
    
backgroundurl(rank.giftop left repeat-x;
    
margin-left:0px;
}
.
rank li {
    
padding0px;
    
margin0px;    
    
floatleft;    
}
.
rank li.current-rating {
    
backgroundurl(rank.gifleft bottom;
    
positionabsolute;
    
height15px;
    
displayblock;
    
text-indent: -9000px;
    
z-index1;
}
.
rank li a {
    
displayblock;
    
width15px;
    
height15px;
    
text-decorationnone;
    
text-indent: -9000px;
    
z-index20;
    
positionabsolute;
    
padding0px;
    
background-imagenone;
}
.
rank li a:hover {
    
backgroundurl(rank.gifleft center;
    
z-index1;
    
left0px;
}
.
rank a.star-{left0px;}
.
rank a.star-1:hover {width15px;}
.
rank a.star-{left15px;} 
.
rank a.star-2:hover {width30px;} 
.
rank a.star-{left30px;} 
.
rank a.star-3:hover {width45px;} 
.
rank a.star-{left45px;} 
.
rank a.star-4:hover {width60px;} 
.
rank a.star-{left60px;} 
.
rank a.star-5:hover {width75px;} 
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.

Última edición por rompeguesos; 19/08/2009 a las 11:56
  #2 (permalink)  
Antiguo 19/08/2009, 12:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como solucionar este codigo?

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).
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 19/08/2009, 12:36
Avatar de rompeguesos  
Fecha de Ingreso: marzo-2009
Mensajes: 690
Antigüedad: 8 años, 9 meses
Puntos: 8
Respuesta: como solucionar este codigo?

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.
  #4 (permalink)  
Antiguo 19/08/2009, 12:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como solucionar este codigo?

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
Cita:
.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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 19/08/2009, 18:59
Avatar de rompeguesos  
Fecha de Ingreso: marzo-2009
Mensajes: 690
Antigüedad: 8 años, 9 meses
Puntos: 8
Respuesta: como solucionar este codigo?

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-
stylenone;
    
margin3px;
    
padding0px;
    
width100px;
    
height15px;
    
positionrelative;
    
backgroundurl(rank.giftop left repeat-x;
    
margin-left:0px;
}
.
rank li {
    
padding0px;
    
margin0px;    
    
floatleft;    
}
.
rank li.current-rating {
    
backgroundurl(rank.gifleft bottom;
    
positionabsolute;
    
height15px;
    
displayblock;
    
text-indent: -9000px;
    
z-index1;
}
.
rank li a {
    
displayblock;
    
width15px;
    
height15px;
    
text-decorationnone;
    
text-indent: -9000px;
    
z-index20;
    
positionabsolute;
    
padding0px;
    
background-imagenone;
}
.
rank li a:hover {
    
backgroundurl(rank.gifleft center;
    
z-index1;
    
left0px;
}
.
rank a.star-{left0px;}
.
rank a.star-1:hover {width15px;}
.
rank a.star-{left15px;}
.
rank a.star-2:hover {width30px;}
.
rank a.star-{left30px;}
.
rank a.star-3:hover {width45px;}
.
rank a.star-{left45px;}
.
rank a.star-4:hover {width60px;}
.
rank a.star-{left60px;}
.
rank a.star-5:hover {width75px;} 
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 23:06.