Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Rollover con cambio de posicion del fondo pero varios en la misma linea en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/01/2011, 09:44
 
Fecha de Ingreso: enero-2010
Mensajes: 57
Antigüedad: 7 años, 11 meses
Puntos: 1
Rollover con cambio de posicion del fondo pero varios en la misma linea

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
  #2 (permalink)  
Antiguo 07/01/2011, 10:48
Avatar de idukke  
Fecha de Ingreso: junio-2009
Mensajes: 33
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Rollover con cambio de posicion del fondo pero varios en la misma linea

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

Última edición por idukke; 07/01/2011 a las 11:07
  #3 (permalink)  
Antiguo 07/01/2011, 11:31
 
Fecha de Ingreso: enero-2010
Mensajes: 57
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Rollover con cambio de posicion del fondo pero varios en la misma linea

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
  #4 (permalink)  
Antiguo 07/01/2011, 11:47
Avatar de idukke  
Fecha de Ingreso: junio-2009
Mensajes: 33
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Rollover con cambio de posicion del fondo pero varios en la misma linea

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
  #5 (permalink)  
Antiguo 07/01/2011, 12:03
 
Fecha de Ingreso: enero-2010
Mensajes: 57
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Rollover con cambio de posicion del fondo pero varios en la misma linea

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

Saludos
  #6 (permalink)  
Antiguo 07/01/2011, 12:11
Avatar de idukke  
Fecha de Ingreso: junio-2009
Mensajes: 33
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Rollover con cambio de posicion del fondo pero varios en la misma linea

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
  #7 (permalink)  
Antiguo 07/01/2011, 12:48
Avatar de idukke  
Fecha de Ingreso: junio-2009
Mensajes: 33
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Rollover con cambio de posicion del fondo pero varios en la misma linea

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
  #8 (permalink)  
Antiguo 07/01/2011, 14:25
 
Fecha de Ingreso: enero-2010
Mensajes: 57
Antigüedad: 7 años, 11 meses
Puntos: 1
Respuesta: Rollover con cambio de posicion del fondo pero varios en la misma linea

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!
  #9 (permalink)  
Antiguo 07/01/2011, 16:44
Avatar de idukke  
Fecha de Ingreso: junio-2009
Mensajes: 33
Antigüedad: 8 años, 5 meses
Puntos: 2
De acuerdo Respuesta: Rollover con cambio de posicion del fondo pero varios en la misma linea

Me alegro de que te guste, un placer ayudarte.

Un saludo.

Etiquetas: fondo, linea, posicion, rollover, cambios
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 15:15.