| Cosas Basicas: Pie de pagina que se queda en el fondo
El año pasado trabajamos con los amigos de Ovillo, una solución para que con CSS pudieramos tener un pie de página que se quedara al fondo de la página, lamentablemente parece ser que IE7 no la quiere y FF2, tampoco lo interpreta también cómo la 1.5.
Quisiera dejarla por aca para ver si pudieramos lograr una implementación nueva que funcione en los nuevos navegadores:
Pie de Pagina que se queda en el fondo, solución parcial:
(problema, si el contenido es mayor que la pantalla inicial el footer se queda en medio)
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h t t p : // www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="h t t p : // www .w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Footer</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
html{height: 100%;}
body{
height: 100%;
background-color:#fc0;
}
#contenedor {
position:relative;
height:100%;
margin: auto;
}
* html #contenedor {height: 100%;}
#pie {
position:relative;
margin-top:-3em;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
background-color:#600;
height: 3em;
color:white;
vertical-align:middle;
}
#piecito {position: absolute; bottom:0px; top:1em; width:100%; text-align:center;}
* html #pie {margin-top: -3em;}
</style>
</head>
<body>
<!-- Inicio - Contenedor del sitio Web -->
<div id="contenedor">
<!-- Inicio - Contenido del sitio Web -->
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus diam mauris, blandit a, vestibulum non, condimentum in, dolor. Quisque non libero. Nulla pellentesque lobortis odio. Donec sapien pede, tristique eget, auctor sed, vestibulum sed, felis. Ut nisi tellus, scelerisque ac, lobortis sit amet, eleifend fermentum, odio. Ut ornare nunc sit amet massa. <p>Nunc vitae dolor. Aliquam a nunc sed erat convallis tempus. Ut non dui sed nisi vehicula condimentum. Donec venenatis convallis tortor.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae nisi. Sed rutrum neque ut mi. Phasellus vulputate sagittis est. Phasellus viverra ullamcorper erat. Nam vehicula, nisi in commodo tempus, justo augue ullamcorper tortor, nec cursus nisi lectus vel est. Ut luctus, arcu non luctus convallis, tortor neque dapibus lorem, sit amet tempus nisl est vitaenisl. Aenean enim est, facilisis nec, commodo in, suscipit eu, purus. Nullam at turpis. Suspendisse potenti. Donec pretium. Donec a diam at augue tempus congue. Praesent aliquam convallis dui. Sed magna. Vestibulum gravida scelerisque arcu. Fusce eu mi. Aliquam tortor sem, fringilla id, viverra ullamcorper, eleifend sit amet, ante. Mauris gravida. Praesent in magna nec sem ullamcorper porttitor. Fusce mi nibh, lacinia non, auctor nec, hendrerit eget, nibh. Nulla lobortis tempus eros.</p>
<p>Suspendisse potenti. Nulla laoreet, lorem id sodales elementum, lacus erat tincidunt lacus, non consectetuer est leo eget erat. Sed malesuada dui quis quam. Proin nisl felis, ultrices vel, iaculis eu, condimentum eu, dolor. Suspendisse ultrices. Curabitur consectetuer odio quis nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elit. Nullam porta augue. Sed lorem nibh, pulvinar ut, congue sit amet, eleifend id, metus. Praesent iaculis mi tempus nunc. Fusce euismod, dolor vehicula pellentesque feugiat, arcu dolor dignissim enim, non sagittis tellus enim id justo. Quisque sollicitudin blandit ligula.</p>
<p>Phasellus non augue. Suspendisse volutpat, ipsum et pharetra porta, felis metus convallis nisi, sagittis vulputate leo augue id diam. Proin fermentum condimentum eros. Aliquam elementum ante quis ante. Phasellus imperdiet, dolor vitae vulputate molestie, leo enim pretium tortor, non varius dolor quam ac justo. Vestibulum leo. Proin tempus sagittis mauris. Utquis nibh. Pellentesque aliquam, mi vitae viverra euismod, sem eros sodales lorem, pulvinar pharetra leo velit id velit. Pellentesque feugiat.</p>
<p>Vestibulum accumsan sapien. Nunc vitae turpis eget odio vehicula molestie. Mauris nulla lorem, convallis quis, convallis vitae, sollicitudin nec, diam. Etiam urna ligula, pharetra tincidunt, gravida eu, consectetuer at, diam. Morbi vulputate luctus nunc. Integer arcu velit, fringilla a, pulvinar vel, adipiscing ac, sem. Duis quis neque molestie lectus molestie accumsan. Vivamus dui. Etiam aliquet pulvinar urna. Morbi mattis eleifend purus. Nunc porta. In hac habitasse platea dictumst. Mauris quis massa quis est fringilla euismod. Integer dignissim neque vitae felis. Pellentesque eget nisi. Pellentesque mattis elit nec ipsum.</p>
<p>Aliquam sit amet urna vehicula felis ultrices semper. Praesent laoreet sem non justo. Curabitur adipiscing velit in sapien bibendum fermentum. Proin non elit in diam nonummy molestie. Praesent dictum. Aliquam sollicitudin egestas velit. Proin adipiscing ante quis urna. Praesent vel est eu turpis pharetra malesuada. Phasellus aliquam, neque vel vehicula pellentesque, dolor orci luctus orci, sollicitudin malesuada enim elit at nisl. Maecenas pharetra. Nulla id arcu.</p>
<p>Phasellus non augue. Suspendisse volutpat, ipsum et pharetra porta, felis metus convallis nisi, sagittis vulputate leo augue id diam. Proin fermentum condimentum eros. Aliquam elementum ante quis ante. Phasellus imperdiet, dolor vitae vulputate molestie, leo enim pretium tortor, non varius dolor quam ac justo. Vestibulum leo. Proin tempus sagittis mauris. Utquis nibh. Pellentesque aliquam, mi vitae viverra euismod, sem eros sodales lorem, pulvinar pharetra leo velit id velit. Pellentesque feugiat.</p>
<p>Vestibulum accumsan sapien. Nunc vitae turpis eget odio vehicula molestie. Mauris nulla lorem, convallis quis, convallis vitae, sollicitudin nec, diam. Etiam urna ligula, pharetra tincidunt, gravida eu, consectetuer at, diam. Morbi vulputate luctus nunc. Integer arcu velit, fringilla a, pulvinar vel, adipiscing ac, sem. Duis quis neque molestie lectus molestie accumsan. Vivamus dui. Etiam aliquet pulvinar urna. Morbi mattis eleifend purus. Nunc porta. In hac habitasse platea dictumst. Mauris quis massa quis est fringilla euismod. Integer dignissim neque vitae felis. Pellentesque eget nisi. Pellentesque mattis elit nec ipsum.</p>
<p>Aliquam sit amet urna vehicula felis ultrices semper. Praesent laoreet sem non justo. Curabitur adipiscing velit in sapien bibendum fermentum. Proin non elit in diam nonummy molestie. Praesent dictum. Aliquam sollicitudin egestas velit. Proin adipiscing ante quis urna. Praesent vel est eu turpis pharetra malesuada. Phasellus aliquam, neque vel vehicula pellentesque, dolor orci luctus orci, sollicitudin malesuada enim elit at nisl. Maecenas pharetra. Nulla id arcu.</p>
<p>Phasellus non augue. Suspendisse volutpat, ipsum et pharetra porta, felis metus convallis nisi, sagittis vulputate leo augue id diam. Proin fermentum condimentum eros. Aliquam elementum ante quis ante. Phasellus imperdiet, dolor vitae vulputate molestie, leo enim pretium tortor, non varius dolor quam ac justo. Vestibulum leo. Proin tempus sagittis mauris. Utquis nibh. Pellentesque aliquam, mi vitae viverra euismod, sem eros sodales lorem, pulvinar pharetra leo velit id velit. Pellentesque feugiat.</p>
<p>Vestibulum accumsan sapien. Nunc vitae turpis eget odio vehicula molestie. Mauris nulla lorem, convallis quis, convallis vitae, sollicitudin nec, diam. Etiam urna ligula, pharetra tincidunt, gravida eu, consectetuer at, diam. Morbi vulputate luctus nunc. Integer arcu velit, fringilla a, pulvinar vel, adipiscing ac, sem. Duis quis neque molestie lectus molestie accumsan. Vivamus dui. Etiam aliquet pulvinar urna. Morbi mattis eleifend purus. Nunc porta. In hac habitasse platea dictumst. Mauris quis massa quis est fringilla euismod. Integer dignissim neque vitae felis. Pellentesque eget nisi. Pellentesque mattis elit nec ipsum.</p>
<p>Aliquam sit amet urna vehicula felis ultrices semper. Praesent laoreet sem non justo. Curabitur adipiscing velit in sapien bibendum fermentum. Proin non elit in diam nonummy molestie. Praesent dictum. Aliquam sollicitudin egestas velit. Proin adipiscing ante quis urna. Praesent vel est eu turpis pharetra malesuada. Phasellus aliquam, neque vel vehicula pellentesque, dolor orci luctus orci, sollicitudin malesuada enim elit at nisl. Maecenas pharetra. Nulla id arcu.</p>
</div>
<!-- Fin - Contenido del sitio Web -->
</div>
<!-- Inicio - Contenedor del sitio Web -->
<div id="pie">
<div id="piecito">
<p>Todos los derechos reservados</p>
</div>
</div>
<!-- Fin - Contenedor del sitio Web -->
</body>
</html>
|