Fondo se corta cuadno aparece mas info en la pantalla

Daitron · #1 (**permalink**) 05/10/2009, 08:26

Hola a todos bueno tengo un problemita...

Tengo un diseño de fondo y una sompra para reasaltar el cuerpo de la pagina... el problema que tnego es que mientras no haga falta mover el scroll se ve perfecto... pero.... cuando aparece mas info en la pantalla de la que entra sin mover el scroll se corta y la cuando bajamos el scroll no aparece nada dejo unas imagenes para que vean

En la imagen uno se ve como hasta donde el scroll no hace falta moverlo esta perfecto...
y en la segundo luego de la linea roja se ve como no hay mas fondo ni sombra.

les dejo el CSS

Código CSS:

Ver originalHTML{height:100&#37;;}
 
BODY{height:100%; margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#666666;
}
 
#fondo{width:100%; height:100%; background-image:url(images/fondo.jpg); background-repeat:repeat;}
#sombra{width:100%; height:100%; background-image:url(images/sombra.png); background-repeat:repeat-y; background-position:center;}
 
 
#cuerpo{width:750px; height:100%; margin:auto;}
 
#cabecera{width:750px; height:151px;
background-image:url(images/sombracab.jpg); background-repeat:repeat-x;}
 
#info{width:750px; height:100%;
padding-left:5px; padding-right:5px; padding-top:5px;}

y ahora el HTML

Código HTML:

Ver original<link href="estilo.css" rel="stylesheet" type="text/css" /> 
</head> 
 
<body> 
<div id="fondo"> 
<div id="sombra"> 
 
<div id="cuerpo"> 
    <div id="cabecera"> 
        <table cellspacing="0" width="100%"> 
            <tr> 
                <td align="center"> 
                  <img src="images/logo.jpg" width="230" height="149" alt="Digesto Legal" /> 
                </td> 
          </tr> 
        </table> 
    </div> 
    <div id="info"> 
 
<p> 
  <SCRIPT LANGUAGE="JavaScript"> 
function varitext(text)
{
text=document
print(text)
}
</script> 
        <form method="post"
    </form> 
<br /><br /> 
<a href="admin.php">Volver a Administraci�n</a> 
        </div> 
    </div> 
</div> 
</div> 
</body> 
</html>

Elimine todo el form porque no era necesario que lo vieran...

Bueno espero puedan ayudarme

Desde ya muchas gracias

Saludos

diegocespedes · #2 (**permalink**) 05/10/2009, 09:08

Intenta esto:

BODY{height:100%; margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#666666;background-image:url(images/fondo.jpg); background-repeat:repeat;
}
fondo{width:100%; height:100%;}

Daitron · #3 (**permalink**) 05/10/2009, 09:27

Si, ya lo habia intentado...

Eso me soluciona el tema del fondo con rayitas pero la sombra, no me lo arregla aqui la imagen

Ahh otra cosa que me gustaría solucionar es que al final de la pagina cuando no ocupa la totalidad con la información el Scroll esta activo eso lo genera el tamaño de la cabecera que soy 151 pixels aunque no haya información debajo me añade esos 151 pixels... hay forma de hacer que si no se ocupa toda la pagina no este el scroll activo???

Aqui la imagen:

Como ven todavia tengo el scroll activo y puedo seguir bajando pero la info termino mucho antes del final del tamaño inicial de la pantalla.

Saludos

diegocespedes · #4 (**permalink**) 05/10/2009, 09:42

#
#sombra{width:100%; height:100%; background-image:url(images/sombra.png); background-repeat:repeat-y; background-position:center;position:fixed;}

Me avisas si se soluciono.

Daitron · #5 (**permalink**) 05/10/2009, 09:57

Si pongo Position:fixed se me sale el scroll entonces no puedo bajar y ver como queda solo con puedo apretando TAB y que vaya desplazandose por el formulario... entonces le puse un scroll utilizando Overflow:Scroll.... y resulta que se me desplazo parte de la pagina a la izquierda...

Aqui la imagen:

Ahi tengo el Overflow colocado en la etiqueta sombra

Código CSS:

Ver original#sombra{width:100&#37;; height:100%; background-image:url(images/sombra.png); background-repeat:repeat-y; background-position:center; 
position:fixed; overflow:scroll;}

Si lo coloco en Body o cualquier otra etiqueta se muestra el scroll pero sin la barra entonces no se puede utilizar, como si no hubiera mas info para ver en la pagina.

Saludos y gracias por la ayuda que me estas dando... ojala me ayudes a solucionar esto

diegocespedes · #6 (**permalink**) 05/10/2009, 10:24

si le colocas las propiedades left:--x; top: 0px; le asignas la posicion.

Yo lo que hago es que a la imagen del body le asigno esta imagen de sombra. pero no se si te funcionaría.

Suerte.

Daitron · #7 (**permalink**) 06/10/2009, 06:29

Aun no lo puedo solucionar si por favor alguien puede ayudarme....

Se me sigue cortando el fondo y cuando bajo el scroll no aparece ni la sombra ni el fondo... y el tema es que que si pongo AUTO en las etiquetas height de sombra y de fondo funciona bien pero cuando la cantidad de info es menor a lo que entra en pantalla se corta el fondo antes....

Alguna idea???

Saludos

Daitron · #8 (**permalink**) 06/10/2009, 06:36

Bien ya lo solucione, lo que hice fue crear la imagen del fondo de 3 pixels de alto y de 3000 de ancho, luego le puse position Center y listo tengo sombra y fondo en la misma imagen... eltema es si alguien tiene una resolucion superior a 3000 de ancho jejeje..

Saludos

diegocespedes · #9 (**permalink**) 06/10/2009, 08:47

Prueba esto y me cuentas:

HTML{height:100%;}

BODY{height:100%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#666666;background-image:url(images/fondo.jpg); background-repeat:repeat-y; background-position:center;}

#fondo{width:750px;height:auto; background-repeat:repeat-y; margin:0px auto 0px auto;background-image:url(images/sombra.png); }

#sombra{width:100%; height:100%; }

#cuerpo{width:750px; height:100%;}

#cabecera{width:750px; height:151px;
background-image:url(images/sombracab.jpg); background-repeat:repeat-x;}
#info{width:750px; height:100%;padding-left:5px; padding-right:5px; padding-top:5px;}

Me dices como queda para poder solucionarlos completamente.