Foros del Web » Creando para Internet » CSS »

capa de pie que no se superponga

Estas en el tema de capa de pie que no se superponga en el foro de CSS en Foros del Web. Hola, tengo una pagina estructurada con CSS2 así: VENTANA -CABECERA -CONTENIDO -PIE la capa PIE, la coloque apara que siempre se quedara al final de ...
  #1 (permalink)  
Antiguo 22/06/2011, 00:53
Avatar de insyse  
Fecha de Ingreso: abril-2005
Ubicación: Colombia
Mensajes: 195
Antigüedad: 12 años, 1 mes
Puntos: 4
capa de pie que no se superponga

Hola, tengo una pagina estructurada con CSS2 así:

VENTANA
-CABECERA
-CONTENIDO
-PIE

la capa PIE, la coloque apara que siempre se quedara al final de la ventana usando

#pie {
width: 100%;
position: absolute;
bottom: 0 !importante;
bottom: -1px;
height: 100px;
}

Funciona bien cuando la ventana esta maximizada, pero su la ventana es reducida o es visto en un netbook o con baja resolución de pantalla, la capa PIE me tapa la capa CONTENIDO.


Como puedo configurar los estilos de PIE para que quede al final de la ventana, pero que a su vez no tape la capa CONTENIDO y que en ese caso, se active el scroll de la ventana?


Gracias

Leonardo.
  #2 (permalink)  
Antiguo 22/06/2011, 01:52
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 10 meses
Puntos: 1567
Respuesta: capa de pie que no se superponga

insyse:

En primer lugar deberías pasar el css de las restantes capas.
En segundo, la declaración Css es
!important y no !importante

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 22/06/2011, 01:56
Avatar de insyse  
Fecha de Ingreso: abril-2005
Ubicación: Colombia
Mensajes: 195
Antigüedad: 12 años, 1 mes
Puntos: 4
Respuesta: capa de pie que no se superponga

Este es el CSS completo


Código CSS:
Ver original
  1. @charset "utf-8";
  2.  
  3. @font-face {
  4.     font-family: 'Eras';
  5.     src: url('eraslght-webfont.eot');
  6.     src: url('eraslght-webfont.eot?#iefix') format('embedded-opentype'),
  7.          url('eraslght-webfont.woff') format('woff'),
  8.          url('eraslght-webfont.ttf') format('truetype'),
  9.          url('eraslght-webfont.svg#ErasLightITCRegular') format('svg');
  10.     font-weight: normal;
  11.     font-style: normal;
  12. }
  13. @font-face {
  14.     font-family:'Bodoni';
  15.     src: url('bodoni-webfont.eot');
  16.     src: url('bodoni-webfont.eot?#iefix') format('embedded-opentype'),
  17.          url('bodoni-webfont.woff') format('woff'),
  18.          url('bodoni-webfont.ttf') format('truetype'),
  19.          url('bodoni-webfont.svg#BodoniRoman') format('svg');
  20.     font-weight: normal;
  21.     font-style: normal;
  22. }
  23.  
  24. #redes{
  25. width:350px;
  26. height:60px;
  27. float:right;
  28. position:absolute;
  29. top: 445px;
  30. left: 750px;
  31. }
  32.  
  33. html, body {
  34. text-shadow: 0px 1px 1px #333333;
  35. font-family: 'Eras';
  36. font-size:16px;
  37. font-weight:bold;
  38. margin: 0;
  39. padding: 0;
  40. height: 100%;
  41. color:#000; }
  42.  
  43. /* COMMON CLASSES */
  44. .break { clear:both; }
  45.  
  46. /* HEADER */
  47. #header {z-index:0;}
  48. .headerimg {
  49. background-position: center top;
  50. background-repeat: no-repeat;
  51. width:100%; height:100%;
  52. position:absolute;
  53. background-color:#000000; }
  54.  
  55. /* CONTENT */
  56. #content {
  57. width: 100%;
  58. position: relative;
  59. min-height: 100%;
  60. height: auto !importante;
  61. height: 100%; z-index:1;}
  62.  
  63. #content p {
  64. padding:10px 20px;
  65. font-size:16px;
  66. width:960px;
  67. margin:0 auto; }
  68.  
  69. #content p a {
  70. text-decoration:none;
  71. color:#CD2B3A; }
  72.  
  73. #content p a:hover {
  74. text-decoration:underline;
  75. color:#7F000C; }
  76.  
  77. h1{
  78. font-family:'Bodoni';
  79. font-size:24px; color:#000; }
  80.  
  81. #pie {
  82. width: 100%;
  83. position: absolute;
  84. bottom: 0 !importante;
  85. bottom: -1px;
  86. height: 100px;
  87. background-image:url(img/fondo_pie.png);
  88. background-position: center top;
  89. background-repeat:no-repeat;
  90. vertical-align:middle; color:#FFFFFF; }
  91.  
  92. #cabecera {
  93. width: 100%;
  94. position: relative;
  95. top: 0 !importante;
  96. height: 55px;
  97. background-image:url(img/fondo_top.png);
  98. background-position: center bottom;
  99. background-repeat:no-repeat;
  100. vertical-align:middle;
  101. color:#FFFFFF;
  102. font-weight:bold; }
  103.  
  104. .cabecera a {
  105. text-decoration:none;
  106. color:#fff;
  107. font-weight:bold; }
  108.  
  109.  
  110. #contenido {
  111. background-image:url(img/fondoNegro50.png);
  112. padding:15px;
  113. height:500px;
  114. width:920px;
  115. margin:100px auto 0 auto;
  116. -moz-border-radius:5px;
  117. -webkit-border-radius:5px;
  118. color:#000;  
  119. position:relative;
  120. }
  #4 (permalink)  
Antiguo 22/06/2011, 02:54
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 10 meses
Puntos: 1567
Respuesta: capa de pie que no se superponga

insyse:

Convengamos que tu código es un caos, y bastante dificil de analizar, asi a primera vista me parce que te sobran muchas cosas, pero veamos,

rescatemos lo siguiente

tu cabecera tiene un 100% de ancho y 55px de alto


tu contenido tiene
height:500px;
width:920px;

y aparentemente lo estás centrando con el auto en el margin

y despues queres que venga tu pie, que tiene un 100% de ancho, 100px de alto, y ponés como condicion que se mantenga visible siempre al pie de la pantalla (usas bottom: 0px; Esto último va a hacer que necesariamente, que si se ve en una resolución más baja o te redimensionan la página, el pie se encime con el contenido, no hay forma de evitarlo. De todas maneras, para eso está el scroll.


Yo te paso una estructura básica, y trata de arrancar desde ahi

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>ssssss</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7.    
  8. html, body, div {
  9. margin: 0px;
  10. padding: 0px;
  11. border: none;
  12. }  
  13.    
  14. div#cabecera {
  15. width: 100%;
  16. height: 55px    ;
  17. background-color: cyan;
  18. }
  19.  
  20. div#contenido {
  21. width: 920px;
  22. height: 500px;
  23.  
  24. margin: 0px auto;
  25. background-color: green;
  26. }
  27.  
  28. div#pie {
  29. width: 100%;
  30. height: 100px;
  31. position: fixed;
  32. bottom: 0px;
  33. left: 0px;
  34. background-color: lime;
  35. }
  36. </head>
  37. <div id="cabecera">
  38. </div>
  39.  
  40. <div id="contenido">
  41. </div>
  42.  
  43. <div id="pie">
  44. </div>
  45. </body>
  46. </html>


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 22/06/2011, 06:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 11 meses
Puntos: 538
Respuesta: capa de pie que no se superponga

La diferencia entre absolute/bottom y fixed/bottom no impedirá la superposición en según qué tamaños de la ventana.

Insyse, qué gran y desconocida herramienta es el buscador:
site:forosdelweb.com pie abajo css
Casi 800 resultados. Seguro que alguno le servirá a sus necesidades.
  #6 (permalink)  
Antiguo 22/06/2011, 12:28
 
Fecha de Ingreso: junio-2010
Mensajes: 142
Antigüedad: 6 años, 10 meses
Puntos: 5
Respuesta: capa de pie que no se superponga

Es evidente que el error se encuentra en la position absolute.


Intenta diagramar la web sin posición o con posición relativa (evita usar absolute a menos que realmente debas usar)

Basicamente los 3 divs principales si los pones con las propiedades
display: block;
position: relative;

ya se estarían respetando entre si (no olvides de ponerle width.)

Saludos!.
  #7 (permalink)  
Antiguo 22/06/2011, 14:23
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 11 meses
Puntos: 269
Respuesta: capa de pie que no se superponga

Como estamos en el foro de css supongo que lo querras hacer con css puro. Pero, si en cambio te agrada trabajar con jquery esta sería una buena alternativa. la ventaja, el html queda mas limpio, la desventaja, necesita javascript para funcionar.

Saludos.

Etiquetas: pie, capas
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 17:27.