Foros del Web » Creando para Internet » CSS »

Forzar que los div no cambien de linea

Estas en el tema de Forzar que los div no cambien de linea en el foro de CSS en Foros del Web. Hola a todos los foreros, escribo haber si alguien sabe como solucionar mi duda. Estoy pasando mi web para moviles y queria meter las imagenes ...
  #1 (permalink)  
Antiguo 27/07/2013, 06:24
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 11 meses
Puntos: 2
Forzar que los div no cambien de linea

Hola a todos los foreros, escribo haber si alguien sabe como solucionar mi duda.

Estoy pasando mi web para moviles y queria meter las imagenes en slider lateral y que se pueda ir pasando con el dedo en la pantalla del movil, el codigo seria algo así:

Código HTML:
Ver original
  1. <div id="imagenes">
  2. <div id="imagen"><img src="http://www.forosdelweb.com/f53/forzar-que-div-no-cambien-linea-1067048/..." /><br />Titulo</div>
  3. <div id="imagen"><img src="http://www.forosdelweb.com/f53/forzar-que-div-no-cambien-linea-1067048/..." /><br />Titulo</div>
  4. <div id="imagen"><img src="http://www.forosdelweb.com/f53/forzar-que-div-no-cambien-linea-1067048/..." /><br />Titulo</div>
  5. </div>

los div cada imagen lleva: float:left y el div que las contiene todas overflow-y:auto; y width del 100% pero no funciona

Gracias de antemano por la ayuda

Última edición por pzin; 29/07/2013 a las 12:58 Razón: highlight
  #2 (permalink)  
Antiguo 27/07/2013, 07:25
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Forzar que los div no cambien de linea

Tendría que meter un pequeño contenedor dentro de div#imagenes, algo así:

Código CSS:
Ver original
  1. <div id="imagenes">
  2.   <div id="microcontenedor">
  3.     <div class="imagen"><img src=""/><br />Titulo</div>
  4.     <div class="imagen"><img src=""/><br />Titulo</div>
  5.     <div class="imagen"><img src=""/><br />Titulo</div>
  6.   </div>
  7. </div>

Si te fijas también he cambiado los id="imagen" por class="imagen", ya que los identificadores son únicos y no se puede repetir.

Ahora para para que no se vea lo que sobresalga de div#imagenes y para que div.imagen no cambie de linea pones:

Código CSS:
Ver original
  1. div#contenedor {
  2.   overflow: hidden;
  3. }
  4.  
  5. div#microcontenedor {
  6.   width: Xum;
  7. }

Ahora, X corresponde al ancho de cada div.imagen multiplicado por la cantidad de ellos que hayan.
Por ejemplo, si tienes cuatro imágenes y su div mide 200 pixeles: X = 200 x 4 = 800. Entonces tendría que poner 800. Con um me refiero a unidad de medida, ya sean pixeles, porcentajes, etc.
  #3 (permalink)  
Antiguo 27/07/2013, 09:31
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 11 meses
Puntos: 2
Respuesta: Forzar que los div no cambien de linea

Muchas gracias, funciona a la perfección, aunque tuve que cambiar el overflow por scroll para que me funcionara.

Pero si no supiera la medida lateral exacta por que varia en cada pagina? lo digo por que prefiero poner el código css en un archivo .css, que ponerlo con php en la pagina que se envía.

Saludos
  #4 (permalink)  
Antiguo 29/07/2013, 12:56
 
Fecha de Ingreso: mayo-2008
Ubicación: Granada
Mensajes: 131
Antigüedad: 15 años, 11 meses
Puntos: 2
Respuesta: Forzar que los div no cambien de linea

Para el que tenga la misma duda que yo, si se le pone un ancho mayor al ancho que ocupan las imagenes dentro del div, el scrooll se queda justo donde acaba el contenido del div sin mostrar la parte del div que esta vacia, no se por que pero se queda justo como quería.

Saludos

Etiquetas: imagenes
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 05:13.