Dos rollover juntos sin salto de línea

coke_135 · #1 (**permalink**) 10/04/2006, 18:30

Hola!:

Tengo este código para hacer un rollover de imagenes:

En el CSS:

Código HTML:

#rollover span {
	display:none;
}

#rollover a.imagen1 {
	display: block;
	width: 133px;
	height: 49px;
	background: url(imagen1a.gif);
}

#escuadras a:hover.imagen1 {
	background:url(imagenes/imagen1b.gif) no-repeat;
}

En el XHTML:

Código HTML:

<a class="imagen1" href="#"><span>Rollover</span></a>

Quiero colocar dos imagenes (imagen1 y imagen2), una junto a otra, pero defino las clases diferentes, y repito el código XHTML detrás de la línea que os he puesto. Pero al tener el display: block, la imagen me salta de línea y yo quiero que me aparezcan juntas :P.

A ver si me podéis ayudar!

Un saludo :)

caricatos · #2 (**permalink**) 11/04/2006, 00:40

Hola:

Display block pone un salto de línea, tal como sabes... debes cambiarlo por display: inline;

Saludos

coke_135 · #3 (**permalink**) 11/04/2006, 06:10

Ya ya, pero entonces el rollover no funciona :P...

caricatos · #4 (**permalink**) 11/04/2006, 07:34

Cita:

Iniciado por coke_135

Ya ya, pero entonces el rollover no funciona :P...

¿

?

Me he perdido...

Saludos

JavierB · #5 (**permalink**) 11/04/2006, 08:11

Hola coke_135 y caricatos

¿Y poniendolo así...?

Código:

#rollover a.imagen1 {
	display: block;
        float:left;
	width: 133px;
	height: 49px;
	background: url(imagen1a.gif);
}

Saludos,

coke_135 · #6 (**permalink**) 11/04/2006, 17:14

JavierB, ahora queda mas o menos bien, pero en la siguiente línea tengo que poner un clear:both o no sale. Además la capa contenedora no se estira hasta abajo, se queda antes de las imagenes, como si no tuviera nada dentro. No se si me explico, sigo probando y ya digo algo :).

caricatos, me refiero a que si pongo la propiedad diplay:inline, el rollover de imagenes no funciona. Solo funciona con display:block.

Un saludo y gracias a los dos por contestar.