capa de pie que no se superponga

[insyse]

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.

[emprear]

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

[insyse]

Este es el CSS completo

Código CSS:

@charset "utf-8";
 
@font-face {
    font-family: 'Eras';
    src: url('eraslght-webfont.eot');
    src: url('eraslght-webfont.eot?#iefix') format('embedded-opentype'),
         url('eraslght-webfont.woff') format('woff'),
         url('eraslght-webfont.ttf') format('truetype'),
         url('eraslght-webfont.svg#ErasLightITCRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'Bodoni';
    src: url('bodoni-webfont.eot');
    src: url('bodoni-webfont.eot?#iefix') format('embedded-opentype'),
         url('bodoni-webfont.woff') format('woff'),
         url('bodoni-webfont.ttf') format('truetype'),
         url('bodoni-webfont.svg#BodoniRoman') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
#redes{
width:350px; 
height:60px; 
float:right; 
position:absolute; 
top: 445px;
left: 750px;
}
 
html, body {
text-shadow: 0px 1px 1px #333333;
font-family: 'Eras'; 
font-size:16px; 
font-weight:bold; 
margin: 0; 
padding: 0; 
height: 100%; 
color:#000; }
 
/* COMMON CLASSES */
.break { clear:both; }
 
/* HEADER */
#header {z-index:0;}
.headerimg { 
background-position: center top; 
background-repeat: no-repeat; 
width:100%; height:100%; 
position:absolute; 
background-color:#000000; }
 
/* CONTENT */
#content { 
width: 100%; 
position: relative; 
min-height: 100%; 
height: auto !importante; 
height: 100%; z-index:1;}
 
#content p { 
padding:10px 20px; 
font-size:16px; 
width:960px; 
margin:0 auto; }
 
#content p a { 
text-decoration:none; 
color:#CD2B3A; }
 
#content p a:hover { 
text-decoration:underline; 
color:#7F000C; }
 
h1{ 
font-family:'Bodoni'; 
font-size:24px; color:#000; }
 
#pie {
width: 100%; 
position: absolute; 
bottom: 0 !importante; 
bottom: -1px; 
height: 100px; 
background-image:url(img/fondo_pie.png); 
background-position: center top; 
background-repeat:no-repeat; 
vertical-align:middle; color:#FFFFFF; }
 
#cabecera {
width: 100%; 
position: relative; 
top: 0 !importante; 
height: 55px; 
background-image:url(img/fondo_top.png); 
background-position: center bottom; 
background-repeat:no-repeat; 
vertical-align:middle; 
color:#FFFFFF; 
font-weight:bold; }
 
.cabecera a { 
text-decoration:none; 
color:#fff; 
font-weight:bold; }
 
 
#contenido { 
background-image:url(img/fondoNegro50.png); 
padding:15px; 
height:500px; 
width:920px; 
margin:100px auto 0 auto; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
color:#000;  
position:relative; 
}
 

[emprear]

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ssssss</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
    
html, body, div {
margin: 0px;
padding: 0px; 
border: none;
}   
    
div#cabecera {
width: 100%;
height: 55px    ;
background-color: cyan;
}
 
div#contenido {
width: 920px; 
height: 500px;
 
margin: 0px auto;
background-color: green;
}
 
div#pie {
width: 100%;
height: 100px;
position: fixed;
bottom: 0px;
left: 0px;
background-color: lime;
}
</style>
</head>
<body>
<div id="cabecera">
</div>
 
<div id="contenido">
</div>
 
<div id="pie">
</div>
</body>
</html>
 

Saludos

[kseso?]

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.

[rossijona]

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!.

[cristian_cena]

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.