Foros del Web » Creando para Internet » CSS »

ajustar slide imágenes a div flotante

Estas en el tema de ajustar slide imágenes a div flotante en el foro de CSS en Foros del Web. tengo un div centrado en medio de la pantalla, dentro a mano izquierda hay un texto (ancho 40%) que se va reescalando y a derecha ...
  #1 (permalink)  
Antiguo 29/01/2013, 09:00
 
Fecha de Ingreso: febrero-2006
Mensajes: 233
Antigüedad: 12 años, 4 meses
Puntos: 3
ajustar slide imágenes a div flotante

tengo un div centrado en medio de la pantalla, dentro a mano izquierda hay un texto (ancho 40%) que se va reescalando y a derecha un slide de imágenes, que me gustaría reescalar en función de la resolución a un 50 - 55% de ancho.

el problema del slide es que está en absolute, he probado mil combinaciones con firebug y no consigo dar con la solución. la idea es que este slide vaya dentro de la capa con borde azul y fondo crema.

a ver si algun maestro del css puede dar con la solución :):)

aquí el enlace donde pueden testear:
http://pretest.somee.com

muchas gracias [email protected]!
  #2 (permalink)  
Antiguo 30/01/2013, 12:11
 
Fecha de Ingreso: mayo-2011
Mensajes: 214
Antigüedad: 7 años, 1 mes
Puntos: 16
Respuesta: ajustar slide imágenes a div flotante

Hem, bueno, no es mut dificil, solo tienes un pequeño problema, las imagenes son mas grandes que el marco azul, pero bueno, eso es facil de cambiar xD.

Hago una listita de cambios:

style.css linea 265 #slides --> position: relative; top & left:0;
style.css linea 278 .slides_container -->margin-left:0;
style.css linea 289 #slides .slide -->padding:0;

Luego ya tansolo redimensiona las imagenes al tamaño que te vaya mejor.
  #3 (permalink)  
Antiguo 31/01/2013, 06:11
 
Fecha de Ingreso: febrero-2006
Mensajes: 233
Antigüedad: 12 años, 4 meses
Puntos: 3
Respuesta: ajustar slide imágenes a div flotante

Cita:
Iniciado por moro666 Ver Mensaje
Hem, bueno, no es mut dificil, solo tienes un pequeño problema, las imagenes son mas grandes que el marco azul, pero bueno, eso es facil de cambiar xD.

Hago una listita de cambios:

style.css linea 265 #slides --> position: relative; top & left:0;
style.css linea 278 .slides_container -->margin-left:0;
style.css linea 289 #slides .slide -->padding:0;

Luego ya tansolo redimensiona las imagenes al tamaño que te vaya mejor.
gracias! he cambiado estas propiedadesm a parte de otras muchas más, estoy muy cerca de la solución:
http://pretest.somee.com

ahora me muestra solo una parte de la imagen, y en cambio, justo abajo a la izquierda he cargado la misma imagen en otro contenedor y me la muestra toda.

como es que en la clase .right2 no le puedo asignar un min-height (limitar altura a un mínimo) dependiendo de la resolución de pantalla, de momento le he puesto un height. buffff..esto del css es un mundo.

Muchas gracias, espero vuestras respuestas, suerte del firebug!!
  #4 (permalink)  
Antiguo 31/01/2013, 06:29
 
Fecha de Ingreso: mayo-2011
Mensajes: 214
Antigüedad: 7 años, 1 mes
Puntos: 16
Respuesta: ajustar slide imágenes a div flotante

Vale, la solucion a tu problema ahora no esta en el css. xDD
Tu tienes una imagen que hace (me lo invento) 100px por 150px, y un marco de las mismas dimensiones, asi que la imagen cabe perfectamente en el marco, la parte que no te sale es debido a los controles del slider, es decir, lo que puedes hacer es la imagen menos alta o el marco mas alto, o sino poner los controles encima de la imagen.

No se si me he explicado del todo bien!
  #5 (permalink)  
Antiguo 31/01/2013, 08:19
 
Fecha de Ingreso: febrero-2006
Mensajes: 233
Antigüedad: 12 años, 4 meses
Puntos: 3
Respuesta: ajustar slide imágenes a div flotante

gracias moro666, ya entiendo lo que quieres decir, estoy probando de volver a estructurar los contenedores pero no consigo dar con el problema.

desmotivado es poco..llevo demasiado con esto, creo que buscaré otro slide imágenes más simple para poderlo integrar.
  #6 (permalink)  
Antiguo 01/02/2013, 15:58
 
Fecha de Ingreso: mayo-2011
Mensajes: 214
Antigüedad: 7 años, 1 mes
Puntos: 16
Respuesta: ajustar slide imágenes a div flotante

Mira, en:
.slides_container cambia a height: 360px;
Haz ambos recuadros mas amplios y ya tendras la imagen entera!

y añadiendo una clasee:
.pagination {
position: absolute;
margin-top: -43px;
z-index: 9;
}

Con lo que los controles quedan encima de la imagen!
  #7 (permalink)  
Antiguo 08/02/2013, 05:40
 
Fecha de Ingreso: febrero-2006
Mensajes: 233
Antigüedad: 12 años, 4 meses
Puntos: 3
Respuesta: ajustar slide imágenes a div flotante

ya casi lo tengo, gracias! ahora solo me queda reescalar la imagen dentro del contenedor.

a ancho de resolución 1366 se ve bien, pero al reducir a 1280 o 1024 la magen se va recortando :S. He probado de hacer un
Código:
background-position:-50px -50px;
pero esto sería solo para resoluciones bajas.

Etiquetas: ancho, flotante, slide
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 21:10.