Foros del Web » Creando para Internet » CSS »

Final de la página se ve mal

Estas en el tema de Final de la página se ve mal en el foro de CSS en Foros del Web. Empezaré explicando mi estructura: tengo una capa total que tiene estos valores: position: absolute; width: 100%; height: 250%; despues tengo una llamada contenido que es ...
  #1 (permalink)  
Antiguo 29/11/2013, 13:12
 
Fecha de Ingreso: mayo-2013
Mensajes: 34
Antigüedad: 9 años, 8 meses
Puntos: 0
Final de la página se ve mal

Empezaré explicando mi estructura:

tengo una capa total que tiene estos valores:

position: absolute;
width: 100%;
height: 250%;

despues tengo una llamada contenido que es donde añado lo que tiene la web, noticias, otras capas dentro y demás y el problema es el footer, no puede verse bien, estoy casi convencido de que es por el height de la capa total pero no sé como solucionarlo.

el contenido tiene estos valores:

top: 7.5%;
left: 20%;
width: 60%;
min-height: 100%;
height:auto;

la web por debajo aparece así: lo azul es el total, blanco contenido, verde es una capa donde pongo pestañas dinámicas y lo rosita que se ve es una capa lateral también dentro de contenido.




no sé si ha quedado claro pero más o menos eso es lo que tengo.

me gustaria que donde se ve lo gris, quedase el footer ocupando todo el width.
  #2 (permalink)  
Antiguo 29/11/2013, 19:05
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 14 años
Puntos: 306
Respuesta: Final de la página se ve mal

Mejor muestra todo el html y css que intervienen en esta maquetación, o un enlace.

Como primer comentario, no es buena idea ese
Código CSS:
Ver original
  1. position:absolute
en la caja o división (no capa) total.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 29/11/2013, 21:30
 
Fecha de Ingreso: mayo-2013
Mensajes: 34
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Final de la página se ve mal

lo dejo en foto quitando partes de php que solo molestarían :





CSS:

#total{
background-image:url(../img/fondo.png);
repeat-x;
repeat-y;
background-color: blue;
position: absolute;
width: 100%;
height: 250%;
z-index: 1;
left:0px;
top:0px;
}
#banner{
background-image:url(../img/fondo_banner.png);
repeat-x;
repeat-y;
background-color: blue;
width:100%;
height:5%;
background-color: blue;
}

#menu{
position: absolute;
width: 60%;
height: 100%;
left: 20%;
z-index:2;
padding: 0;

}



#contenido{
top: 7.5%;
left: 20%;
width: 60%;
min-height: 100%;
height:auto;
background-color: white;
z-index:1;
position: absolute;
}

#lateral{

left: 72%;
width:27%;
height: 20%;
background-color: pink;
position: absolute;
top:16.5%;
}

#slider{
position: absolute;
width: 70%;
height: 11%;
left: 1%;
top: 0.5%;
}

#novedades{
background-color: black;
position: absolute;
width: 68.5%;
height: 7%;
left: 1.9%;
top: 16.5%;
}
#footer{
}
  #4 (permalink)  
Antiguo 30/11/2013, 13:33
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 14 años
Puntos: 306
Respuesta: Final de la página se ve mal

Utiliza el highlight para publicar código, y publica el html generado por el php, es decir, abre desde el navegador tu página, haz click derecho "ver código fuente" y copia ese html generado.

Lo anterior es para que sepas como postear correctamente.

Código CSS:
Ver original
  1. #total{
  2. background-image:url(../img/fondo.png) repeat-x repeat-y;
  3. background-color: blue;
  4. position: absolute;
  5. width: 100%;
  6. height: 250%;
  7. z-index: 1;
  8. left:0px;
  9. top:0px;
  10. }
  11. #banner{
  12. background-image:url(../img/fondo_banner.png) repeat-x repeat-y;
  13. background-color: blue;
  14. width:100%;
  15. height:5%;
  16. background-color: blue;
  17. }
  18.  
  19. #menu{
  20. position: absolute;
  21. width: 60%;
  22. height: 100%;
  23. left: 20%;
  24. z-index:2;
  25. padding: 0;
  26.  
  27. }
  28.  
  29.  
  30.  
  31. #contenido{
  32. top: 7.5%;
  33. left: 20%;
  34. width: 60%;
  35. min-height: 100%;
  36. height:auto;
  37. background-color: white;
  38. z-index:1; 
  39. position: absolute;
  40. }
  41.  
  42. #lateral{
  43.  
  44. left: 72%;
  45. width:27%;
  46. height: 20%;
  47. background-color: pink;
  48. position: absolute;
  49. top:16.5%;
  50. }
  51.  
  52. #slider{
  53. position: absolute;
  54. width: 70%;
  55. height: 11%;
  56. left: 1%;
  57. top: 0.5%;
  58. }
  59.  
  60. #novedades{
  61. background-color: black;
  62. position: absolute;
  63. width: 68.5%;
  64. height: 7%;
  65. left: 1.9%;
  66. top: 16.5%;
  67. }
  68. #footer{
  69. }

Y esto es lo que obtengo al copiar tu código: http://jsfiddle.net/c2am/7qB4n/7/embedded/result/ corrigiendo lo de "repeat-x; repeat-y;"

Ahora, ¿cómo debería quedar?
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: contenido, final, página
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 04:44.