Problema con scroll horizontal

damianjb · #1 (**permalink**) 20/06/2010, 22:13

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.

jomaruro · #2 (**permalink**) 21/06/2010, 12:44

Hola:

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

Código CSS:

Ver originalhtml, body {width:100%, height:100%;}

Saludos.

damianjb · #3 (**permalink**) 21/06/2010, 21:28

[QUOTE=jomaruro;3452405]

Código CSS:

Ver originalhtml, body {width:100&#37;, height:100%;}

Gracias por la respuesta.
Te cuento que lo probe pero no dio resultado.

chrishxc · #4 (**permalink**) 22/06/2010, 04:15

Pues postear una imagen para ver el problema?

Has probado usar "auto" en vez de 100%?

jomaruro · #5 (**permalink**) 22/06/2010, 13:48

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.

damianjb · #6 (**permalink**) 22/06/2010, 15:41

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.

deirdre · #7 (**permalink**) 22/06/2010, 17:23

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

damianjb · #8 (**permalink**) 22/06/2010, 22:12

Html

Código HTML:

Ver original<body>
<div id="encabezado">
    <div class="logo"><img src="images/dipinto_logo.png"/></div>
</div>
<div id="menu">
            <div id="bot_izq"></div>
                         <ul class="nav_izq">
                                 <li id="inicio"><a href="#"></a></li>
                 <li id="quienes"><a href="#"></a></li>
                     <li id="contact"><a href="#"></a></li>
            </ul>
 
                        <div id="bot_der"></div>
                    </div>
<div id="contenido">
  
    <div id="estilo_k">
      <ul class="kwicks" >
        <li id="kwick1"></li>
        <li id="kwick2"></li>
        <li id="kwick3"></li>
      </ul>
      <div class="bor_der"><img src="images/bordes derechos.png"/></div>
     </div>
     
   
  </div>
<div id="pie_de_pagina">
    
</div>
</body>
</html>

CSS

Código CSS:

Ver original@import url("reset.css");
body {
    font-family: Arial, Helvetica, Geneva, sans-serif;
    color: #000;
    background-color: #E4D2DF;
}
#encabezado {
    height:     198px;
    background: url(images/dipinto_bg_header.png) left top repeat-x;
    position: relative;
    margin-bottom: -18px;
    }
 
#menu {
    z-index: 1;
    position: relative;
    width: 806px;
    margin-left: 550px;
}
#menu ul.nav_izq {
    width: 581px;
    float: left;
}
#menu ul li {
    height: 53px;
    float: left;
}
#menu #bot_izq {
    background-image: url(images/dipinto_bot_izq.png);
    background-repeat: no-repeat;
    width: 71px;
    height: 53px;
    float: left;
}
#menu #bot_der {
    width: 153px;
    background-image: url(images/dipinto_bot_der.png);
    background-repeat: no-repeat;
    height: 53px;
    float: left;
 
    #menu .nav_izq #contact {
    width: 223px;
    background-image: url(images/dipinto_bot_contac.png);
    background-repeat: no-repeat;
    background-position: top left;
}
#menu .nav_izq #inicio {
    background-image: url(images/dipinto_bot_inicio.png);
    width: 144px;
    background-repeat: no-repeat;
}
#menu .nav_izq #quienes {
    width: 214px;
    background-image: url(images/dipinto_bot_quien.png);
    background-repeat: no-repeat;
    
    
    
    
    #contenido {
    width: 800px;
    height: 800px;
    margin: 80px auto 30px auto;
    position: relative;
    background-color: #E4D2DF;
}
#contenido #estilo_k {
    position: relative;
    float: left;
    height: 502px;
    width: 534px;
}
 
 
 
}
#contenido #estilo_k .bor_der {
    position: relative;
    width: 46px;
    height: 502px;
    float: left;
    z-index: 1;
}
 
 
}
#menu ul li a, #menu ul li a:link, #menu ul li a:active, #menu ul li a:visited {
    display: block;
    float: left;
    height: 40px;
    padding: 0 18px;
    text-decoration: none;
    color: #FFF;
    font: .96em/28px "Lucida Grande", Lucida, Verdana, sans-serif;
}
#pie_de_pagina {
    height: 198px;
    background: url(images/dipinto_bg_footer.png) left top repeat-x;
}
.logo {
    width: 572px;
    position: relative;
    margin-left: 50px;
}
.kwicks {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
    float: left;
    margin-right: -46px;
}  
.kwicks li{  
     display: block;  
     overflow: hidden;  
     padding: 0;  
     cursor: pointer;  
}  
.kwicks li{
    float: left;
    width: 178px;
    height: 502px;
    margin-right: 0px;
    position: relative;
}  
 #kwick1 {
    background-image: url(images/uno.png);
}  
 #kwick2 {
    background-image: url(images/dos.png);
}  
#kwick3 {
    background-image: url(images/tres.png);
}

damianjb · #9 (**permalink**) 23/06/2010, 05:42

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