Foros del Web » Creando para Internet » CSS »

Problema con scroll horizontal

Estas en el tema de Problema con scroll horizontal en el foro de CSS en Foros del Web. Buenas. Tengo el siguiente problema. En una pagina tengo encabezado y pie de pagina con una imagen con repeat-x, ambas se extienden hasta el borde ...
  #1 (permalink)  
Antiguo 20/06/2010, 23:13
 
Fecha de Ingreso: mayo-2010
Mensajes: 20
Antigüedad: 7 años, 7 meses
Puntos: 0
Problema con scroll horizontal

Buenas.
Tengo el siguiente problema.
En una pagina tengo encabezado y pie de pagina con una imagen con repeat-x, ambas se extienden hasta el borde del navegador. Cuando el navegador esta a pantalla completa no hay problema, pero cuando el navegador es de menor tamaño y necesito hacer scroll es como si tanto el encabezado como el pie de pagina tuvieran un final y empiezo a ver el color del body cuando deberia verlo cubriendo todo el ancho.
Desde ya gracias por la ayuda.
  #2 (permalink)  
Antiguo 21/06/2010, 13:44
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema con scroll horizontal

Hola:

Prueba a darle un tamaño 100% al html y al body:

Código CSS:
Ver original
  1. html, body {width:100%, height:100%;}

Saludos.

  #3 (permalink)  
Antiguo 21/06/2010, 22:28
 
Fecha de Ingreso: mayo-2010
Mensajes: 20
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Problema con scroll horizontal

[QUOTE=jomaruro;3452405]


Código CSS:
Ver original
  1. html, body {width:100%, height:100%;}


Gracias por la respuesta.
Te cuento que lo probe pero no dio resultado.
  #4 (permalink)  
Antiguo 22/06/2010, 05:15
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 9 años, 4 meses
Puntos: 19
Respuesta: Problema con scroll horizontal

Pues postear una imagen para ver el problema?

Has probado usar "auto" en vez de 100%?
  #5 (permalink)  
Antiguo 22/06/2010, 14:48
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema con scroll horizontal

Hola:

Mejor es que pongas la URL de la página y si no la tienes pon tu código para ver como lo tienes.

Saludos.

  #6 (permalink)  
Antiguo 22/06/2010, 16:41
 
Fecha de Ingreso: mayo-2010
Mensajes: 20
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Problema con scroll horizontal

Subo imagenes para que vean lo que les digo.

Esta es con ventana completa, sin problemas:
http://img96.imageshack.us/img96/4425/maximizado.jpg

Esta es a mitad de pantalla, tambien sin problemas:
http://img171.imageshack.us/img171/5017/mitad.jpg

Esto es lo que se ve cuando hago scroll:
http://img52.imageshack.us/img52/6349/mitadconscroll.jpg

Cuando este en la maquina en donde tengo la pagina subo el codigo. La pagina no esta en ningun server todavia.
  #7 (permalink)  
Antiguo 22/06/2010, 18:23
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Problema con scroll horizontal

Hola damianjb

Evidentemente tienes problemas de posicionamiento y tamaños de los contenedores, pero sin ver tu código es imposible indicarte alguna solución.

Bye
  #8 (permalink)  
Antiguo 22/06/2010, 23:12
 
Fecha de Ingreso: mayo-2010
Mensajes: 20
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Problema con scroll horizontal

Html
Código HTML:
Ver original
  1. <div id="encabezado">
  2.     <div class="logo"><img src="images/dipinto_logo.png"/></div>
  3. </div>
  4. <div id="menu">
  5.             <div id="bot_izq"></div>
  6.                          <ul class="nav_izq">
  7.                                  <li id="inicio"><a href="#"></a></li>
  8.                  <li id="quienes"><a href="#"></a></li>
  9.                      <li id="contact"><a href="#"></a></li>
  10.             </ul>
  11.  
  12.                         <div id="bot_der"></div>
  13.                     </div>
  14. <div id="contenido">
  15.  
  16.     <div id="estilo_k">
  17.       <ul class="kwicks" >
  18.         <li id="kwick1"></li>
  19.         <li id="kwick2"></li>
  20.         <li id="kwick3"></li>
  21.       </ul>
  22.       <div class="bor_der"><img src="images/bordes derechos.png"/></div>
  23.      </div>
  24.      
  25.    
  26.   </div>
  27. <div id="pie_de_pagina">
  28.    
  29. </div>
  30. </body>
  31. </html>

CSS
Código CSS:
Ver original
  1. @import url("reset.css");
  2. body {
  3.     font-family: Arial, Helvetica, Geneva, sans-serif;
  4.     color: #000;
  5.     background-color: #E4D2DF;
  6. }
  7. #encabezado {
  8.     height:     198px;
  9.     background: url(images/dipinto_bg_header.png) left top repeat-x;
  10.     position: relative;
  11.     margin-bottom: -18px;
  12.     }
  13.  
  14. #menu {
  15.     z-index: 1;
  16.     position: relative;
  17.     width: 806px;
  18.     margin-left: 550px;
  19. }
  20. #menu ul.nav_izq {
  21.     width: 581px;
  22.     float: left;
  23. }
  24. #menu ul li {
  25.     height: 53px;
  26.     float: left;
  27. }
  28. #menu #bot_izq {
  29.     background-image: url(images/dipinto_bot_izq.png);
  30.     background-repeat: no-repeat;
  31.     width: 71px;
  32.     height: 53px;
  33.     float: left;
  34. }
  35. #menu #bot_der {
  36.     width: 153px;
  37.     background-image: url(images/dipinto_bot_der.png);
  38.     background-repeat: no-repeat;
  39.     height: 53px;
  40.     float: left;
  41.  
  42.     #menu .nav_izq #contact {
  43.     width: 223px;
  44.     background-image: url(images/dipinto_bot_contac.png);
  45.     background-repeat: no-repeat;
  46.     background-position: top left;
  47. }
  48. #menu .nav_izq #inicio {
  49.     background-image: url(images/dipinto_bot_inicio.png);
  50.     width: 144px;
  51.     background-repeat: no-repeat;
  52. }
  53. #menu .nav_izq #quienes {
  54.     width: 214px;
  55.     background-image: url(images/dipinto_bot_quien.png);
  56.     background-repeat: no-repeat;
  57.    
  58.    
  59.    
  60.    
  61.     #contenido {
  62.     width: 800px;
  63.     height: 800px;
  64.     margin: 80px auto 30px auto;
  65.     position: relative;
  66.     background-color: #E4D2DF;
  67. }
  68. #contenido #estilo_k {
  69.     position: relative;
  70.     float: left;
  71.     height: 502px;
  72.     width: 534px;
  73. }
  74.  
  75.  
  76.  
  77. }
  78. #contenido #estilo_k .bor_der {
  79.     position: relative;
  80.     width: 46px;
  81.     height: 502px;
  82.     float: left;
  83.     z-index: 1;
  84. }
  85.  
  86.  
  87. }
  88. #menu ul li a, #menu ul li a:link, #menu ul li a:active, #menu ul li a:visited {
  89.     display: block;
  90.     float: left;
  91.     height: 40px;
  92.     padding: 0 18px;
  93.     text-decoration: none;
  94.     color: #FFF;
  95.     font: .96em/28px "Lucida Grande", Lucida, Verdana, sans-serif;
  96. }
  97. #pie_de_pagina {
  98.     height: 198px;
  99.     background: url(images/dipinto_bg_footer.png) left top repeat-x;
  100. }
  101. .logo {
  102.     width: 572px;
  103.     position: relative;
  104.     margin-left: 50px;
  105. }
  106. .kwicks {
  107.     list-style: none;
  108.     position: relative;
  109.     margin: 0;
  110.     padding: 0;
  111.     float: left;
  112.     margin-right: -46px;
  113. }  
  114. .kwicks li{  
  115.      display: block;  
  116.      overflow: hidden;  
  117.      padding: 0;  
  118.      cursor: pointer;  
  119. }  
  120. .kwicks li{
  121.     float: left;
  122.     width: 178px;
  123.     height: 502px;
  124.     margin-right: 0px;
  125.     position: relative;
  126. }  
  127.  #kwick1 {
  128.     background-image: url(images/uno.png);
  129. }  
  130.  #kwick2 {
  131.     background-image: url(images/dos.png);
  132. }  
  133. #kwick3 {
  134.     background-image: url(images/tres.png);
  135. }
  #9 (permalink)  
Antiguo 23/06/2010, 06:42
 
Fecha de Ingreso: mayo-2010
Mensajes: 20
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Problema con scroll horizontal

Olvide mencionar que tengo adjuntada una hoja de reset css que setea los margin y padding a 0.

Etiquetas: horizontal, 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 13:10.