Rollover con cambio de posicion del fondo pero varios en la misma linea

Wikki · #1 (**permalink**) 07/01/2011, 09:44

Hola,

Estoy intentando hacer el efecto de Mikromo de http://www.araudi.net/ejemplos/rollover_cambio_posicion.html pero con varias imágenes en una misma linea para un menu horizontal. Estoy intentando poner los div en una misma linea pero me resulta imposible.

¿Alguna idea? Gracias de antemano

Saludos

idukke · #2 (**permalink**) 07/01/2011, 10:48

Hola Wikki,

Para poder poner varias imagenes en una misma linea puedes hacerlo con una lista en horizontal. Aqui te dejo un ejemplo , solo tendrás que añadir las imágenes en cuestión.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Rollover con cambio de posicion del fondo - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.caja {
margin: 0 auto;
position: relative;
width: 400px;
height: 200px;
}
.caja ul{list-style-type:none;padding:0px;margin:0px;}
.caja li{
display:inline-block;
margin:0px;
}
a {
display: block;
height: 200px;
width: 200px;
}
#imagen_1{background: url(imagen_1.png) no-repeat center top;}
#imagen_1:hover{background: url(imagen_1.png) no-repeat center bottom;}
#imagen_2{background: url(imagen_2.png) no-repeat center top;}
#imagen_2:hover{background: url(imagen_2.png) no-repeat center bottom;}
</style>
</head>
<body>
<div class="caja">
<ul>
<li><a id="imagen_1" href="#"></a></li>
<li><a id="imagen_2" href="#"></a></li>
</ul>
</div>
</body>
</html>

Espero que te sirva.

Un saludo

Wikki · #3 (**permalink**) 07/01/2011, 11:31

Hola idukke, muchas gracias por la ayuda.

El tema es que cada imagen tiene un tamaño diferente.
He usado el código que me has proporcionado y sigue saliendo una bajo la otra.
Te muestro el código editado y como queda:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Rollover con cambio de posicion del fondo - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.caja {
margin: 0 auto;
position: relative;
width: 111px;
height: 88px;
}
.caja ul{list-style-type:none;padding:0px;margin:0px;}
.caja li{
display:inline-block;
margin:0px;
}
a {
display: block;
height: 44px;
width: 111px;
}
#imagen_1{background: url(imgs/baner01.png) no-repeat center top;}
#imagen_1:hover{background: url(imgs/baner01.png) no-repeat center bottom;}
#imagen_2{background: url(imgs/baner02.png) no-repeat center top;}
#imagen_2:hover{background: url(imgs/baner02.png) no-repeat center bottom;}
</style>
</head>
<body>
<div class="caja">
<ul>
<li><a id="imagen_1" href="#"></a></li>
<li><a id="imagen_2" href="#"></a></li>
</ul>
</div>
</body>
</html>

Queda así: http://www.relojeriagil.com/pruebas.htm

La verdad que me gustaría saber CSS en profundidad porque últimamente lo estoy necesitando. En cuanto solucione esto voy a buscarme un curso.

Espero que me puedan ayudar :)

gracias

idukke · #4 (**permalink**) 07/01/2011, 11:47

Hola de nuevo Wikki,

Si te fijas, le has dado un valor de width:111px a la clase caja, este valor debe ser igual o superior a la suma de todos los anchos de las imágenes que vayas a incluir, si es inferior se desbordará y hará un cambio de linea.

Un saludo

Wikki · #5 (**permalink**) 07/01/2011, 12:03

Tienes razón, lo he cambiado pero siguen en lineas distintas. ¿Se debería ver en la misma no?

Saludos

idukke · #6 (**permalink**) 07/01/2011, 12:11

Hola Wikki,

Claro que deberían verse en la misma linea, prueba dándole 230px al ancho de la clase caja y verás como funciona (yo lo he probado en tu página de ejemplo anterior)

Un saludo

idukke · #7 (**permalink**) 07/01/2011, 12:48

Hola Wikki,

Como comentabas que las imágenes tenían anchos diferentes deberías asignarlos individualmente. Aquí te dejo el código para que veas que funciona y hagas tus pruebas.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es"> 
<head> 
<title>Rollover con cambio de posicion del fondo - Recursos CSS - araudi.net</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
.caja {
margin: 0 auto;
position: relative;
width: 261px;
height: 44px;
}
.caja ul{list-style-type:none;padding:0px;margin:0px;}
.caja li{
display:inline-block;
margin:0px;
}
.caja a {
display: block;
height: 44px;
margin-left:-5px;
}
#imagen_1{background: url(imgs/baner01.png) no-repeat center top;width:111px;}
#imagen_1:hover{background: url(imgs/baner01.png) no-repeat center bottom;}
#imagen_2{background: url(imgs/baner02.png) no-repeat center top;width:150px;}
#imagen_2:hover{background: url(imgs/baner02.png) no-repeat center bottom;}
</style> 
</head> 
<body> 
<div class="caja"> 
<ul> 
<li><a id="imagen_1" href="#"></a></li> 
<li><a id="imagen_2" href="#"></a></li> 
</ul> 
</div> 
</body> 
</html>

Un saludo

Wikki · #8 (**permalink**) 07/01/2011, 14:25

De lujo idukke, muchas gracias por la ayuda. Va genial.

Ahora me buscaré algún cursillo de css que me parece que lo voy a usar bastante :P

Un saludo!

idukke · #9 (**permalink**) 07/01/2011, 16:44

Me alegro de que te guste, un placer ayudarte.

Un saludo.