Foros del Web » Creando para Internet » CSS »

Espacio en blanco al final de la pagina

Estas en el tema de Espacio en blanco al final de la pagina en el foro de CSS en Foros del Web. Buena a todos, soy nuevo aqui, y después de leer la guía de migración de mikmoro he decidido hacer un sitio con css y dejar ...
  #1 (permalink)  
Antiguo 03/06/2009, 00:20
 
Fecha de Ingreso: marzo-2009
Mensajes: 4
Antigüedad: 8 años, 8 meses
Puntos: 0
Espacio en blanco al final de la pagina

Buena a todos, soy nuevo aqui, y después de leer la guía de migración de mikmoro he decidido hacer un sitio con css y dejar las tablas a un lado. Tengo que reconocer que en un comienzo fue todo un parto el trabajo con las capas, pero al cabo de unos días ya se hace fácil. Claro para ser primera pagina en css, demore el doble de lo normal, pero bue... ya ira mejorando...

Si bien tuve dudas, muchas las resolví leyendo los otros post y la guía de migración una y otra vez, tengo que reconocer que el foro esta bastante completo, pero al final tengo un problema que no he podido resolver ni darle solución, tratare de exponerlo lo mas claro posible.

Problema:

Me queda un espacio en blanco al final de la pagina de aproximadamente unos 2000 px, es decir, me aparece la barra de desplazamiento y baja, y baja y baja mas, aunque no exista información hay.

¿Que necesito? Necesito que corte la pagina justo debajo de la ultima capa que en este caso se llama #pie.

** Probablemente se debe a que todo el lateral izquierdo esta estructura en forma de botones con posición "relativa", seguramente esos botones deberian ocupar el espacio en blanco que queda al final del documento... en fin alguna ayuda es bienvenida. ***

No puedo enlazar la imagen esquematica ni copiar la hoja de estilos, porque tengo menos de 30 días de antiguedad.

img504(punto)imageshack(punto)us/img504/6305/ejemplow(punto)jpg

Hay camufle la imagen esquematica, la explico a continuación:
El borde izquierdo con 2 filas de cuadrados de 90 x 90 px estan generados cada uno con una capa que va desde #m1 a ... m#14 y para que queden bien ubicados están con posición relativa, dentro del contenedor que tiene posición estático de 1000 px de ancho y margen auto izq y derecho para centrar el contenido.
El header y el contenido tienen capas distintas.
El borde derecho esta compuesto por otra capa llamada #lateral
El footer es otra capa llamada #pie
El problema se produce después de la capa #pie, debido a que la pagina no termina, es decir es como si las capas que están ordenadas arriba en posicion relativas igual ocuparan su posición hacia abajo en la pagina.



Saludos y gracias de antemano por la ayuda.

*pd. si no se entiende el problema, please hacérmelo saber
  #2 (permalink)  
Antiguo 03/06/2009, 00:42
 
Fecha de Ingreso: marzo-2009
Mensajes: 4
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Espacio en blanco al final de la pagina

Aqui pude agregar el estilo, sacandole los link de background:

#@charset "utf-8";

A:link {text-decoration:none;color:#000;}A:visited {text-decoration:none;color:#000;}A:active {text-decoration:underline;color:#000;}A:hover {text-decoration:none;color:#000;font-weight:bold}

body {font: 100% Verdana, Arial, Helvetica, sans-serif;margin: 0 0 0 0;padding: 0;text-align: center;color: #000;background-color: #fff;}

.nova #contenedor {width: 1000px;background: #fff;text-align: left;position: static;height: 100%;margin: 0 auto 0 auto;}

/* tamaños y color de bloques */
.nova #m1, .nova #m4, .nova #m5, .nova #m8, .nova #m9, .nova #m12, .nova #m13{
width: 90px;height: 90px;font-family: Arial;font-size: 14px;line-height: 25px;position:relative;display:block;background-color:#000;}

.nova #m2, .nova #m3, .nova #m6, .nova #m7, .nova #m10, .nova #m11, .nova #m14{
width: 90px;height: 90px;position:relative;}

.nova #cabecera{width: 510px;height: 180px;background-color: #000;position: relative;top: -1260px;left: 180px;}

.nova #logo {width: 180px;height: 180px;background-color: #000;position: relative;top: -1440px;left: 690px;background-image: url();}

.nova #contenido {width: 686px;height: 446px;background-color: #ccc;position: relative;top: -1439px;left: 181px;border:1px dashed #000000;}

.nova #lateral {width: 120px;height: 630px;background-color: #111;position: relative;top: -2068px;left: 870px;}

.nova #pie {width: 990px;height: 20px;background-color: #777;position: relative;top: -2075px;left: 0px;clear:both;}

/* fondos y ubicacion botones de colores*/
.nova #m1 {background-color: #333;}
.nova #m2 {background-color: #360;top: -90px;left: 90px;}
.nova #m3 {background-color: #0f0;top: -90px;left: 0px;}
.nova #m4 {background-color: #111;top: -180px;left: 90px;}
.nova #m6 {background-color: #00f;top: -270px;left: 90px;}
.nova #m7 {background-color: #006;top: -270px;left: 0px;}
.nova #m10 {background-color: #360;top: -450px;left: 90px;}
.nova #m11 {background-color: #0f0;top: -450px;left: 0px;}
.nova #m14 {background-color: #00f;top: -630px;left: 90px;}

/* fondos de los otros botones*/
.nova #m2:hover {background-color: #3d6614;}
.nova #m3:hover {background-color: #33ff33;}
.nova #m6:hover {background-color: #3333ff;}
.nova #m7:hover {background-color: #141466;}
.nova #m10:hover {background-color: #3d6614;}
.nova #m11:hover {background-color: #33ff33;}
.nova #m14:hover {background-color: #3333ff;}

/*botones de menu */
.nova #m5 {background-image:url(img/inicio0.png);background-color: #000;top: -180px;left: 0px;}
.nova #m5:hover {background-image:url()}
.nova #m8 {background-image:url(img/nos0.png); background-color: #000;top: -360px;left: 90px;}
.nova #m8:hover {background-image:url()}
.nova #m9 {background-image:url(img/servicios0.png);background-color: #000;top: -360px;left: 0px;}
.nova #m9:hover {background-image:url()}
.nova #m12 {background-image:url(img/pro0.png);background-color: #000;top: -540px;left: 90px;}
.nova #m12:hover {background-image:url()}
.nova #m13 {background-image:url(img/contacto0.png);background-color: #000;top: -540px;left: 0px;}
.nova #m13:hover {background-image:url()}
.nova #m5:hover, .nova #m8:hover, .nova #m9:hover, .nova #m12:hover, .nova #m13:hover {
background-color: #999999;font-weight: bold;cursor: pointer;}

/* Estilos de texto */
/*esconde titulos principales*/
.nova #cabecera h1, .nova #cabecera h2 {margin: 0 0 0 0;}
.nova #cabecera h1 span, .nova cabecera h2 span {display:none;}
/*fin titulos principales*/

.nova #contenido p {
overflow: hidden;width: 500px;height: 370px;border: 0px solid #900;
font-family: verdana;font-size: 15px;color: #000;
line-height: 190%;text-align: justify;
margin: 60px 85px 0 85px;
display: block; }
.nova .p2 {
overflow: auto;width: 300px;height: 70px;border: 0px solid #900;
font-family: verdana;font-size: 13px;color: #000;
line-height: 190%;text-align: justify;
margin: 0 10px 0 10px;
display: block;top: 0px; }
.nova .m1 {
font-family:Verdana, Arial, Helvetica, sans-serif;font-size:13px;color: #000;
width: 270px;height: 45px;border: 1px solid #000;padding-top:10px;
margin-top:0px; display:block;background-color:#bbb;
text-align:center;vertical-align: middle;margin-bottom: 30px;margin-left: 35px;}
.nova .m2 {
font-family:Verdana, Arial, Helvetica, sans-serif;font-size:13px;color: #00f;font-weight:bold;text-decoration:underline;
width: 270px;height: 45px;border: 1px solid #000;padding-top:10px;
margin-top:0px;display:block;background-color:#ddd;
text-align:center;vertical-align: middle;margin-bottom: 30px;margin-left: 35px;}
.nova #pie p {
font-family: arial;font-size: 10px;color: #fff;text-align: center;}
.nova .d1 {float: right;font-family: arial;font-size: 8px;color: #000;line-height: 11px;}
.nova .e1{font-family: arial;font-align:center;font-size: 12px;color: #fff;line-height: 11px;}
.nova .e1:hover {font-family: arial;font-align:center;font-size: 12px;color: #fff200;line-height: 11px;}
.nova .clearfloat {clear:both;}
  #3 (permalink)  
Antiguo 07/08/2009, 14:16
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Espacio en blanco al final de la pagina

Que fue lo que hicistes, por favor? Estoy tratando de posicionar un gran div en la pagina via position:relative y desplazamientos negativos, pero tengo ese gran espacio en blanco al pie de pagina, en donde debería estar originalmente mi div.

Expplicame tu solucion un poco mejor, por favor, en dos lineas.
  #4 (permalink)  
Antiguo 07/08/2009, 15:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Espacio en blanco al final de la pagina

Hola Grafo0:
Si ahora pones el contenido del body, podremos verlo mejor, porque sin él no sabemos la estructura.
Pero lo que me llama la cabeza es esto:
Cita:
.nova #cabecera{width: 510px;height: 180px;background-color: #000;position: relative;top: -1260px;left: 180px;}
y siguientes.

Un saludo, y no desistas de la migración, aunque no sea tan "indolora"
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 15:58.