Problema sprite CSS

PabloFerran · #1 (**permalink**) 10/12/2010, 08:42

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.

rzkgraphics · #2 (**permalink**) 11/12/2010, 02:14

Cita:

Iniciado por PabloFerran

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>

PabloFerran · #3 (**permalink**) 11/12/2010, 04:34

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; }

bex · #4 (**permalink**) 11/12/2010, 21:59

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.

rzkgraphics · #5 (**permalink**) 11/12/2010, 22:07

Cita:

Iniciado por PabloFerran

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

bex · #6 (**permalink**) 11/12/2010, 22:43

Cita:

Iniciado por rzkgraphics

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

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.

PabloFerran · #7 (**permalink**) 12/12/2010, 08:21

Cita:

Iniciado por rzkgraphics

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.

bex · #8 (**permalink**) 12/12/2010, 09:05

Cita:

Iniciado por PabloFerran

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

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?

PabloFerran · #9 (**permalink**) 12/12/2010, 09:10

Cita:

Iniciado por bex

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

bex · #10 (**permalink**) 12/12/2010, 09:26

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!

PabloFerran · #11 (**permalink**) 12/12/2010, 09:29

Cita:

Iniciado por bex

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

bex · #12 (**permalink**) 12/12/2010, 09:38

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

PabloFerran · #13 (**permalink**) 12/12/2010, 10:05

Cita:

Iniciado por bex

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<!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?

bex · #14 (**permalink**) 12/12/2010, 10:44

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/