Foros del Web » Creando para Internet » CSS »

Div dentro de scroll

Estas en el tema de Div dentro de scroll en el foro de CSS en Foros del Web. Hola que tal, llevo como 3horas dandole vueltas y probando una página bastante compleja en cuanto a maquetación y me he topado con un problema ...
  #1 (permalink)  
Antiguo 05/05/2011, 13:18
Avatar de karlic0s  
Fecha de Ingreso: abril-2007
Ubicación: Cartagena (Murcia)
Mensajes: 241
Antigüedad: 10 años, 7 meses
Puntos: 18
Div dentro de scroll

Hola que tal, llevo como 3horas dandole vueltas y probando una página bastante compleja en cuanto a maquetación y me he topado con un problema que no logro solucionar.

Tengo lo siguiente:


Código HTML:
<html> 

<head> 
<style type="text/css" media="screen"> 

.content { 
position: absolute;
height:100%;
width: auto;
max-width: 100%;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
} 

div.content span.content2 { 
   width: 300px;
   height: 100%;
   display: inline-block;
   border-left: 1px solid black;
} 

</style> 
</head>

<body>

<div class="content"> 
<span class="content2"> 
1
</span>
<span class="content2"> 
2
</span>
<span class="content2"> 
3
</span>
<span class="content2"> 
4
</span>
<span class="content2"> 
5
</span>
<span class="content2"> 
6
</span>
</div> 

</body>
</html> 
Esto funciona. El scroll solo sale dentro del div horizontalmente que ocupa el ancho completo de la pantalla con los span alineados SOLO en horizontal, mi problema es que necesito que en vez de spans sean divs ya que dentro de esos spans actuales donde pone (1 2 3...) tengo que maquetar otros divs en posicion relativa y claro, poner divs en vez de span en el puñetero IE no funciona (chrome y ff si), además he intentado maquetar dentro de los spans, pero tampoco funciona.


¿Alguien ha trabajado o sabe como trabajar con divs dentro de divs con scroll? ¿O alguién sabe como maquetar dentro de spans de una manera que funcione?

Gracias y un saludo
  #2 (permalink)  
Antiguo 05/05/2011, 14:30
Avatar de elbuensaint  
Fecha de Ingreso: marzo-2009
Ubicación: Chiwas
Mensajes: 178
Antigüedad: 8 años, 8 meses
Puntos: 7
Respuesta: Div dentro de scroll

lo que quieres hacer es una web horizontal?
Si es asi, no le veo el caso de usar overflow en el div, solo necesitas definirle el ancho al div principal. Como tienes 6 span/divs de 300px, el ancho del div content será de 1800px, con esto el mismo navegador creará el scroll horizontal. De la forma que lo haces crea un doble scroll horizontal en netbooks, donde la resolución es menor.

La verdad no entendí muy bien cual es tu problema, tal vez si pusieras el código completo que estás usando podría ayudarte mejor, pero prueba lo que te digo arriba, tal vez esa sea la solución :P
  #3 (permalink)  
Antiguo 05/05/2011, 14:30
Avatar de seocusco  
Fecha de Ingreso: febrero-2011
Mensajes: 53
Antigüedad: 6 años, 10 meses
Puntos: 4
Respuesta: Div dentro de scroll

pues la mayor parte se puede arreglar poniendo el encabezado para que IE trabaje con estandares

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <style type="text/css" media="screen">
  4. body {
  5.     margin:0px;
  6. }
  7. .content {
  8. position: absolute;
  9. height:100%;
  10. width: auto;
  11. max-width: 100%;
  12. overflow: hidden;
  13. overflow-x: auto;
  14. white-space: nowrap;
  15. }
  16.  
  17. div.content div.content2 {
  18.    width: 300px;
  19.    height: 100%;
  20.    display: inline-block;
  21.    border-left: 1px solid black;
  22. }
  23. /*para IE7*/
  24. *+html div.content div.content2 {
  25.     display:inline;
  26. }
  27. </style>
  28. </head>
  29.  
  30.  
  31. <div class="content">
  32. <div class="content2">
  33. 1
  34. </div>
  35. <div class="content2">
  36. 2
  37. </div>
  38. <div class="content2">
  39. 3
  40. </div>
  41. <div class="content2">
  42. 4
  43. </div>
  44. <div class="content2">
  45. 5
  46. </div>
  47. <div class="content2">
  48. 6
  49. </div>
  50. </div>
  51.  
  52. </body>
  53. </html>
IE Sucks...
__________________
Viaje a Cusco y Machu Picchu
  #4 (permalink)  
Antiguo 06/05/2011, 07:33
Avatar de karlic0s  
Fecha de Ingreso: abril-2007
Ubicación: Cartagena (Murcia)
Mensajes: 241
Antigüedad: 10 años, 7 meses
Puntos: 18
Respuesta: Div dentro de scroll

Cita:
Iniciado por elbuensaint Ver Mensaje
lo que quieres hacer es una web horizontal?
Si es asi, no le veo el caso de usar overflow en el div, solo necesitas definirle el ancho al div principal. Como tienes 6 span/divs de 300px, el ancho del div content será de 1800px, con esto el mismo navegador creará el scroll horizontal. De la forma que lo haces crea un doble scroll horizontal en netbooks, donde la resolución es menor.

La verdad no entendí muy bien cual es tu problema, tal vez si pusieras el código completo que estás usando podría ayudarte mejor, pero prueba lo que te digo arriba, tal vez esa sea la solución :P
Es ese el código, no hay más :P

Básicamente lo que quiero es un div que ocupe el 100% de una página y tenga scroll horizontal si lo requiere, es decir, si la configuracion de pantalla es de 1024 por ejemplo el div content ocupa 1024 pues bien, por poner un ejemplo los divs que estan dentro de content son de 500px de ancho y 100% de alto y hay 4, el problema es que estos divs se organizarian 2 arriba y 2 abajo y lo que quiero es que se organicen dentro del scroll de content de forma horizontal, es decir, que no salten de linea.


Gracias Seocusco, pero me he dado cuenta que el problema con mi código anterior y es por "lo que no me gusta" es que dependo de la propiedad "white-space: nowrap;" y esto es una pu*ada porque los espacios y saltos de linea me los coge y al escribir más codigo dentro de esos divs me hace saltos de linea inecesarios.

Creo que la solución va a ser js al final, porque... A nadie se le ocurre nada mas? :S

Gracias

Etiquetas: scroll
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:42.