Foros del Web » Creando para Internet » CSS »

Pie

Estas en el tema de Pie en el foro de CSS en Foros del Web. Hace unos días pregunté cómo pocisionar un pie. Se me ofreció una solución que creo que es la que está en las faqs del sitio. ...
  #1 (permalink)  
Antiguo 24/11/2008, 19:24
 
Fecha de Ingreso: octubre-2008
Mensajes: 138
Antigüedad: 9 años, 2 meses
Puntos: 1
Pie

Hace unos días pregunté cómo pocisionar un pie. Se me ofreció una solución que creo que es la que está en las faqs del sitio. Sin embargo no me anduvo, porque cuando el contenido es más corto que el alto de la pantalla, el pie sube. Si alguien tiene alguna otra solución para aportar, se lo agradezco.

Pongo el código de mi página por si alguien está dispuesto a buscar el error que no me permite colocar el pie.

Gracias por adelantado.


CSS

/*================================================= ================================================
Propiedades generales
================================================== ==============================================*/

*{
margin:0;
padding:0;
}

html, body{
height:100%;
background-color:#999;
}
body{
background-image:url(interfaz/fondo.jpg);
background-repeat:repeat-x;
}

#contenedor{
width:970px;
height:100%;
min-height:100%;
margin:0 auto;
background-color:#CCC;
}

#caja_datos{
width:100%;
background-color:#CCC;
background-image:url(graficos/degradado.jpg);
background-repeat:repeat-x;
}

.pie
{
width:100%;
height:24px;
background-color:#BF1C47;
bottom:0px !important;
clear:both;
}

.separador
{
height:5px;
clear:both;
}

/*================================================= ================================================
Propiedades del menú y los vínculos
================================================== ==============================================*/
#cabezal{
width:100%;
height:240px;
background-image:url(graficos/fondocabezal.jpg);
}

#logo{
float:left;
width:310px;
height:120px;
background-image:url(graficos/logo.jpg);
margin: 0 10px;
}

#contenedor ul li{

float:left;
width:128px;
height:50px;
text-align:center;
list-style-type:none;
}

#contenedor a{
display:block;
width:100%;
height:100%;
font-size:110%;
font-weight:bold;
line-height:50px;
text-decoration:none;
}

/*================================================= ==================================================
Propiedades de las columnas contenedras de datos
================================================== =================================================*/
.col_izq
{
/*position:relative;*/
float:left;
width:300px;
padding:10px;
height:100%;
margin:10px;
background-color:#FFF;
}

.col_der
{
float:left;
width:630px;/*CORREGIR*/
height:100%;
margin:10px 0;
background-image:url(graficos/degradado_corto.jpg);
background-repeat:repeat-x;
background-color:#CCC;
}

.novedades, .publicidad
{
float:left;
width:290px;
height:180px;
padding:10px;
background-color:#FFF;
overflow:hidden;
}

.novedades
{
width:280px;
margin-right:10px;
}

.articulo_principal
{
width:600px;
background-color:#FFF;
margin-top:10px;
padding:10px;
}


/*================================================= ==================================================
Colocación de los contenidos
================================================== =================================================*/

.foto_izq
{
width:150px;
height:150px;
margin:10px;
float:left;
background-color:#009900;
}

.titulos {
color: #0000FF;
}

p
{
text-align:justify;
}

.formulario
{
text-align:center;
}


HTML
<body>
<div id="contenedor">
<div id="cabezal">
<div id="logo">
</div>
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="acerca.html">Acerca de...</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>
<div id="caja_datos">
<div class="col_izq"><p class="titulos">Titular noticia</p><div class="foto_izq">Espacio para foto</div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</div>
<div class="col_der">
<div class="novedades"><p class="titulos">Titular noticia</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="publicidad">
<p class="titulos">Titular noticia</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when...</p>
</div>
<div class="separador"></div>
<div class="articulo_principal">
<p class="titulos">Titular principal</p><div class="foto_izq">Espacio para foto</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>

</div>
</div>
<div class="separador"></div>
<div class="pie formulario">El aborrecido pie</div>
</div>
</div>
</body>

Última edición por jmoran; 24/11/2008 a las 19:31 Razón: ERRORES ORTOGRÁFICOS
  #2 (permalink)  
Antiguo 24/11/2008, 19:28
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Pie

shift + enter ^_^ <br />

tenes uno que se llama ".pie" y otro ".formulario" no se tanto CSS, pero dudo MUCHO que al escribir "pie formulario" sume las 2 reglas

kpas q si =o
  #3 (permalink)  
Antiguo 24/11/2008, 19:32
 
Fecha de Ingreso: octubre-2008
Mensajes: 138
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Pie

sí. me suma ambas
Eso está así porque en otra página tengo un formulario al que le aplico esa clase
Gracias igual por tu ayuda.
  #4 (permalink)  
Antiguo 24/11/2008, 19:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pie

¿Es este el ejemplo del que hablas en el que el pie se sube cuando hay poco contenido?

http://www.forosdelweb.com/f53/faqs-...ml#post2576668

Sí, sanchy, puede haber dos clases en una etiqueta. Lo único es que IE6 no lo interpreta del todo bien.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 24/11/2008, 19:37
 
Fecha de Ingreso: octubre-2008
Mensajes: 138
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Pie

es este:

PIE SIEMPRE ABAJO

Esta es una pregunta recurrente en todos los foros y sitios de consulta dedicados al diseño web y las hojas de estilo CSS: ¿cómo consigo que el pie de mi página quede siempre abajo, pegado a la parte inferior de la misma, haya poco o mucho contenido? Y es que la respuesta parece sencilla, pero como veremos a continuación no lo es tanto.

Lo que generalmente se quiere conseguir debe cumplir estos requisitos:

- que cuando haya poco contenido, y por tanto no llene la página, el pie aparezca pegado a la parte inferior de la misma.
- que esté por completo a la vista sin partes ocultas por debajo y que no aparezca el scroll cuando no sea necesario.
- que cuando el contenido crezca, el pie acompañe al crecimiento vertical de la página y siga pegado a la parte inferior tras el contenido, haciendo tope en la parte de abajo, sin ocultar o superponerse al contenido y que aparezca el scroll vertical.

Normalmente, cuando pensamos en esto tenemos tendencia a imaginar que es muy fácil, que hacemos cosas parecidas constantemente, pero cuando empezamos a probar y necesitamos obtener una solución compatible con la mayor cantidad posible de navegadores, nos empezamos a dar cuenta de que el asunto tiene más miga de lo que parece. Pruebas habituales son:

1.- Marco el pie con posición absoluta abajo (bottom:0) y listo. Error: en ese caso, cuando el contenido crece el pie no lo acompaña y no baja, quedando estático sobre el contenido.
2.- Marco el contenido con un 100% de altura (height: 100%). y luego el pie. Error: aparece el scroll siendo innecesario por el escaso contenido, aparte de que suele haber una cabecera que sumar al 100% del contenido.
3.- Entonces, lo meto dentro y le doy un margen negativo. Error: al crecer el contenido se solapa sobre el pie.
4.- Lo pongo fuera del contenido sin marcar a éste altura. Error: queda a mitad de página o donde termine el contenido cuando es escaso.

Y un larguísimo etcétera de pruebas que cualquiera de nosotros habrá hecho infinidad de veces.

Entonces, ¿cuál es la solución?

Planteamos una estructura clásica con una cabecera, un bloque de contenido y un pie, y como envoltorio un contenedor principal:

<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id="contenido">
</div>
</div>
<div id="pie">
</div>
</body>

En la que llama la atención que estamos dejando el pie fuera del contenedor principal, y que la cabecera y el contenido están dentro de él. Y ahora planteamos el problema con la hoja de estilo:

html, body { height:100%;}

#contenedor {
min-height:100%;
height: auto!important;
height:100%;
}
#cabecera{ height: 4em;}

#contenido {}

#pie {
height: 3em;
margin-top: -3em;
}
.corte {
clear: both;
padding-top: 4em;
}


En la que empezamos por indicar una altura mínima de 100% (min-height: 100%), una altura en auto (height: auto), para que crezca lo necesario y por último usamos el atributo !important para que los navegadores que respetan los estándares utilicen auto, y que IE6 y anteriores utilicen una altura del 100%. A este respecto cabe recordar que aunque IE6 no entiende el min-height, tampoco es necesario en general ya que como, al contrario de la mayoría, en IE6 las cajas siempre crecen tengan lo que tengan dentro, el height actúa como mínimo, nunca como máximo ni como estático, así que con decirle la altura fija él la ignorará y la tomará como altura mínima.
Y para que esa altura funcione correctamente con respecto a algo (su contenedor), evidentemente empezamos por poner un 100% al html y el body.

A continuación seguimos con una cabecera de la altura que nos interese, sin tener ninguna influencia en el resto de elementos por cómo van a estar configurados.

Contrariamente a lo que pueda parecer, el selector del contenido no va a tener marcada ninguna altura, ni mínima ni estática, porque el meollo de la cuestión no estará ahí, y de momento aparece vacío porque no necesita nada para la estructura, y es donde pondremos estilos de decoración del bloque.

Una de las cosas más importantes será realizar un corte tras el contenido, porque si no en determinados casos el pie quedaría sobre él, y la razón es la siguiente: por ejemplo en Firefox, si ponemos dentro del contenido cajas que estén flotadas (float: left, etc.), éstas no fuerzan a crecer a su contenedor porque no ocupan espacio físico vertical en el flujo del documento, y por lo tanto, al no crecer el contenedor el pie no se vería desplazado y quedaría sobre el contenido de esas cajas. Forzando pues un corte tras el contenido pero dentro del contenedor, obligamos a que éste crezca inevitablemente aunque las cajas estén flotadas, de manera que conseguimos lo que queremos. Es muy importante marcar en la clase del corte un relleno inferior (padding-bottom: 4em;), que obligue al pie a mantenerse a una distancia prudencial del contenido, de manera que cuando éste crezca, el pie sea empujado correctamente y nunca se solapen.
Lo hacemos de esta manera en lugar de usar un overflow: auto;, que podría servir, porque en Internet Explorer no funcionaría.

Y por último la importancia del pie, que gracias a estar ubicado fuera del contenedor principal, que mide un 100%, será colocado en su lugar gracias a un margen superior negativo (margin-top: -3em;), igual a su propio tamaño (height: 3em;).

Añadimos algo de contenido y los adornos con los colores de fondo y demás para que se vea todo correctamente, y finalmente queda como en este ejemplo:

Ejemplo

Código HTML

CSS completo

Puede que algo parecido se haya escrito infinidad de veces, pero personalmente he encontrado en la red una gran cantidad de ejemplos que, o bien no cumplen exactamente con todos los requisitos planteados en el inicio del artículo, o no funcionan correctamente en todos los navegadores. Esta solución ha sido chequeada en una buena cantidad de ellos (FF 2 y 3, IE5, 6 y 7, Opera, Safari, etc.), y funciona muy bien, y lo que es más importante para mi, sin hacks, "comentarios condicionales" ni filigranas varias de adaptación. Es casi 100% compatible a excepción del !important citado, que al fin y al cabo es un recurso perfectamente válido de CSS.

Espero que a algunos de vosotros os pueda servir de algo, como ya lo ha hecho a un buen montón de usuarios de forosdelweb.com

Un saludo y hasta la próxima.

Mikel Morote
  #6 (permalink)  
Antiguo 24/11/2008, 19:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Pie

Pues como verás, el propio ejemplo tiene poco texto y el pie se queda abajo, ¿no?
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 24/11/2008, 20:12
Avatar de sanchy  
Fecha de Ingreso: octubre-2008
Mensajes: 389
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Pie

Cita:
Iniciado por Mikmoro Ver Mensaje
¿Es este el ejemplo del que hablas en el que el pie se sube cuando hay poco contenido?

http://www.forosdelweb.com/f53/faqs-...ml#post2576668

Sí, sanchy, puede haber dos clases en una etiqueta. Lo único es que IE6 no lo interpreta del todo bien.
a mira vos, que bien =P aprendi algo nuevo

che y shift+enter no te sirve? supongo q no es lo mejor pero ta no se =) yo hago eso.. y bue por algo soy newbie ^^
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 23:04.