Foros del Web » Creando para Internet » CSS »

Problema sprite CSS

Estas en el tema de Problema sprite CSS en el foro de CSS en Foros del Web. Codgio Html: Cita: <html> <head> <title>Sprite</title> <link rel="stylesheet" type="text/css" href="stole.css"> </head> <body> <div class="boton"></div> </body> </html> Código CSS: Cita: .boton{ width:46px; height:25px; background: transparent url(sprite.png) ...
  #1 (permalink)  
Antiguo 10/12/2010, 08:42
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Problema sprite CSS

Codgio Html:
Cita:
<html>
<head>
<title>Sprite</title>
<link rel="stylesheet" type="text/css" href="stole.css">
</head>
<body>
<div class="boton"></div>
</body>
</html>
Código CSS:
Cita:
.boton{
width:46px;
height:25px;
background: transparent url(sprite.png) no-repeat;
float: left;
}
.boton:hover{
background-position: 0px -24px;
}
Tengo un problema al realizar la técnica de rollover con css Sprite.
Al abrir la página se ve la imagen pero al pasar el ratón por encima no cambia.
  #2 (permalink)  
Antiguo 11/12/2010, 02:14
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: Problema sprite CSS

Cita:
Iniciado por PabloFerran Ver Mensaje
Codgio Html:
Código CSS:

Tengo un problema al realizar la técnica de rollover con css Sprite.
Al abrir la página se ve la imagen pero al pasar el ratón por encima no cambia.
Acá te dejo la correción, que vendría a ser el TEXT-INDENT que faltó y aumento el ACTIVE por si te interesa tener un botón con 3 estados ;), no solo 2, y por si quieres agregarle un link a tu botón.

<style>
.button {
background: url(sprite.png) no-repeat;
width:46px;
height:25px;
float: left;
text-indent: -9999px;
}
.button:hover { background-position: 0 -24px; }
.button:active { background-position: 0 -12px; }
</style>
<div class="button"><a href="LINK" target="_blank"" width="46" height="25"></a></div>
  #3 (permalink)  
Antiguo 11/12/2010, 04:34
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema sprite CSS

Hice los cambios que me dijiste pero sigue sin funcionar.
Mira hecha un vistazo, puede que quede algo.
HTML:
Cita:
<html>
<head>
<title>Sprite</title>
<link rel="stylesheet" type="text/css" href="stole.css">
</head>
<body>
<div class="boton"><a href="#" target="_blank"" width="46" height="25"></a></div>
</body>
</html>
CSS:
Cita:
.boton {
background: url(sprite.png) no-repeat;
width:46px;
height:25px;
float: left;
text-indent: -9999px;
}
.boton:hover { background-position: 0 -24px; }
.boton:active { background-position: 0 -12px; }
  #4 (permalink)  
Antiguo 11/12/2010, 21:59
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: Problema sprite CSS

No llego a entender para qué querría el text-indent en este caso, el DIV ni siquiera tiene contenido.
Pablo, yo probé tu código original y me funciona perfecto en FF 3.6, IE8 y Chrome 8.
  #5 (permalink)  
Antiguo 11/12/2010, 22:07
Avatar de rzkgraphics  
Fecha de Ingreso: noviembre-2010
Mensajes: 61
Antigüedad: 7 años
Puntos: 2
Respuesta: Problema sprite CSS

Cita:
Iniciado por PabloFerran Ver Mensaje
Hice los cambios que me dijiste pero sigue sin funcionar.
Mira hecha un vistazo, puede que quede algo.
HTML:


CSS:
Sería bueno que CITES lo que te dije para saber que me respondiste jeje.

Bueno hay un problema en lo que tu me pones y lo que yo te dije.

cuando llames a tu CSS no te olvides de que todo se cierra con "/>" cheka lo que le falta a tu stole.css"/> jejeje pequeñas cosas no? :D
  #6 (permalink)  
Antiguo 11/12/2010, 22:43
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: Problema sprite CSS

Cita:
Iniciado por rzkgraphics Ver Mensaje
Acá te dejo la correción, que vendría a ser el TEXT-INDENT que faltó...
Me refería a eso
Cita:
Iniciado por rzkgraphics Ver Mensaje
jejeje pequeñas cosas no?
Estoy de acuerdo, la mayoría de las veces son problemas menores de distracción como esos... lo mejor es releer una y otra vez todas las partes de código involucradas en busca de eso.
  #7 (permalink)  
Antiguo 12/12/2010, 08:21
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema sprite CSS

Cita:
Iniciado por rzkgraphics Ver Mensaje
Sería bueno que CITES lo que te dije para saber que me respondiste jeje.

Bueno hay un problema en lo que tu me pones y lo que yo te dije.

cuando llames a tu CSS no te olvides de que todo se cierra con "/>" cheka lo que le falta a tu stole.css"/> jejeje pequeñas cosas no? :D

Que yo sepa cuando se hace referencia a tu hoja de estilos no hay que finalizar con />

Cita:
Iniciado por bex
Pablo, yo probé tu código original y me funciona perfecto en FF 3.6, IE8 y Chrome 8.
Te funcionó?
Recreaste la imagen sprite.png no?
Con que dimensiones la hiciste?
Lo digo porque tal vez sea ese el problema, dimelo por favor.
Muchas gracias a los dos.
  #8 (permalink)  
Antiguo 12/12/2010, 09:05
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: Problema sprite CSS

Cita:
Iniciado por PabloFerran Ver Mensaje
Que yo sepa cuando se hace referencia a tu hoja de estilos no hay que finalizar con />
Esto en realidad depende de qué especificación uses en el doctype. Los archivos XHTML deben tener cerradas todas sus etiquetas, incluyendo la etiqueta link usada para llamar a la hoja de estilos. Los archivos HTML no necesitan cerrar todos sus elementos.

Cita:
Iniciado por PabloFerran Ver Mensaje
Recreaste la imagen sprite.png no?
Con que dimensiones la hiciste?
Lo digo porque tal vez sea ese el problema, dimelo por favor.
Muchas gracias a los dos.
Usé una imagen cualquiera de mi PC, para ver si el código funcionaba, es posible que estés haciendo mal la imagen. Por qué no subís una versión de prueba a algún lado así lo podemos ver en acción?
  #9 (permalink)  
Antiguo 12/12/2010, 09:10
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema sprite CSS

Cita:
Iniciado por bex Ver Mensaje
Esto en realidad depende de qué especificación uses en el doctype. Los archivos XHTML deben tener cerradas todas sus etiquetas, incluyendo la etiqueta link usada para llamar a la hoja de estilos. Los archivos HTML no necesitan cerrar todos sus elementos.


Usé una imagen cualquiera de mi PC, para ver si el código funcionaba, es posible que estés haciendo mal la imagen. Por qué no subís una versión de prueba a algún lado así lo podemos ver en acción?
No tengo donde subir una versión de prueba, losiento.
Pero os dejo toda la info.

imagen:


Ancho: 46 px
Alto: 50 px
  #10 (permalink)  
Antiguo 12/12/2010, 09:26
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: Problema sprite CSS

Jeje, como dijimos, un problema de distracción...
Tu imagen se llama spritec.png y en el CSS haces referencia a una imagen llamada sprite.png
En algún lado sobre o falta una "c" al final!
  #11 (permalink)  
Antiguo 12/12/2010, 09:29
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema sprite CSS

Cita:
Iniciado por bex Ver Mensaje
Jeje, como dijimos, un problema de distracción...
Tu imagen se llama spritec.png y en el CSS haces referencia a una imagen llamada sprite.png
En algún lado sobre o falta una "c" al final!
mi imagen se llama sprite.png solo que imageshack deforma el código.
De todas maneras el problema no esta ahí ( en el nombre de la imagen) por que al abrir mi documento HTML se ve la imagen bien, solo que al pasar por encima el mouse no cambia
  #12 (permalink)  
Antiguo 12/12/2010, 09:38
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: Problema sprite CSS

Pues entonces deben ser las condiciones en las que lo estás probando...
Intentá agregar el doctype en la primer línea de tu documento HTML, antes de la etiqueta <html>.
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  #13 (permalink)  
Antiguo 12/12/2010, 10:05
 
Fecha de Ingreso: noviembre-2010
Mensajes: 48
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Problema sprite CSS

Cita:
Iniciado por bex Ver Mensaje
Pues entonces deben ser las condiciones en las que lo estás probando...
Intentá agregar el doctype en la primer línea de tu documento HTML, antes de la etiqueta <html>.
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Increible! Ha funcionado.
Muchas gracias BEX.
Pero no entiendo que cambia el DOCTYPE, me lo podrías explicar?
  #14 (permalink)  
Antiguo 12/12/2010, 10:44
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 14 años, 4 meses
Puntos: 34
Respuesta: Problema sprite CSS

Pues básicamente el DOCTYPE le dice al navegador cómo interpretar el código. No se interpreta de la misma forma el XHTML 1.0 que el HTML 3, por poner cualquier ejemplo. Te dejo este link, donde queda muy bien explicado: http://www.alistapart.com/articles/doctype/

Etiquetas: sprite
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 05:11.