Foros del Web » Creando para Internet » CSS »

Mover divs con css3

Estas en el tema de Mover divs con css3 en el foro de CSS en Foros del Web. Hola ando armando un pequeño "slider" estatico por asi decirlo aca les dejo una muestra a la izquierda estan las fotos en miniatura y a ...
  #1 (permalink)  
Antiguo 20/08/2014, 07:23
Avatar de mostaza4  
Fecha de Ingreso: octubre-2008
Mensajes: 74
Antigüedad: 15 años, 5 meses
Puntos: 0
Mover divs con css3

Hola ando armando un pequeño "slider" estatico por asi decirlo aca les dejo una muestra

a la izquierda estan las fotos en miniatura y a la dercha las muestras grandes. por medio de javascript cuando pulso en las miniaturas cambia la foto grande.
Ahora el problema. debido que lo estoy haciendo responsive, me gustaria que el contenedor de las miniaturas cuando llegue a los 600 px de ancho la pantalla por medio de media queris se valla al fondo y quede la imagen con las miniaturas abajo. ¿Como puedo hacer eso?

Muchas Gracias
  #2 (permalink)  
Antiguo 20/08/2014, 07:53
 
Fecha de Ingreso: agosto-2014
Ubicación: Málaga
Mensajes: 9
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: Mover divs con css3

Muy buenas. La forma que se me ocurre a mi para realizar este slider responsive es hacer ambos contenedores flotantes, es mas realize uno asi para un cliente no hace mucho.

El contenedor con las miniaturas lo pondria con float left y el contenedor de las imagenes ampliadas lo pondria con float right. A la hora de realizar la responsive el contenedor de las miniaturas deberia de quedar encima ya que si lo visualizas desde un dispositivo mas pequeño la gente si no desliza hacia abajo no veria estas miniaturas, verian solo la ampliada.

Por medio de media queries debes de ponerle a ambos contenedores un width de 100% para que se adapte al ancho de la pantalla del dispositivo y un float none, para cancelar el float que le dimos al principio. Tambien le puedes dar un margin-bottom al contenedor de las miniaturas para que no se quede pegado al de las ampliadas en la responsive.

Un saludo y espero haberte ayudado.
  #3 (permalink)  
Antiguo 21/08/2014, 15:16
Avatar de mostaza4  
Fecha de Ingreso: octubre-2008
Mensajes: 74
Antigüedad: 15 años, 5 meses
Puntos: 0
Respuesta: Mover divs con css3

te agradezco tu respuesta, la idea es igual que las miniaturas esten abajo, lo vi en una pagina y me gusto. Pero con tu idea del float me sirvio porque le puse a uno left(miniaturas) y right(foto) y en el html solo cambie y puse primero el div de la foto y despues el de la miniatura total con los float en tamaño grande queda primero las miniaturas.

Muchas Gracias nuevamente!!
  #4 (permalink)  
Antiguo 25/08/2014, 15:51
 
Fecha de Ingreso: agosto-2014
Ubicación: Málaga
Mensajes: 9
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: Mover divs con css3

Me alegro de haberte ayudado. Saludos

Etiquetas: css3, divs, responsive
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 10:43.