Hola, quiero hacer que el pie de página esté en el pié de la página independientemente de el tamaño del contenido de mi sitio, pero no he podido lograrlo... Quizás me puedan hechar una mano
Aquí estan mis códigos:
Código HTML:
<html>
<head>
<title>Desayunos a domicilio</title>
</head>
<link rel="stylesheet" type="text/css" href="archivo2.css" />
<body>
<div class="nonFooter">
<div class="contenido">
<h2> El sentido de la vida </h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna enim, facilisis sed, mollis quis, laoreet vitae, nulla. Aliquam erat volutpat. Nunc vitae ipsum. Fusce lorem. Vivamus imperdiet enim eget diam. In porta, nisl quis dictum egestas, felis diam mollis orci, eu gravida nulla massa et purus. Aenean pulvinar congue nibh. Vivamus vestibulum. Maecenas mollis quam ac est. Mauris ullamcorper scelerisque est. Nam aliquet nunc at orci. Ut consequat, nisl in sagittis consectetur, elit neque viverra felis, sed tristique leo turpis sit amet nisi. Nulla eget leo. Nam lobortis felis sit amet nibh.</p>
<p>Suspendisse justo. Integer tempor pellentesque nunc. Nulla dolor eros, sodales sit amet, molestie id, interdum vel, dui. Praesent elementum volutpat dolor. Morbi luctus ligula ac est. Nunc cursus, elit sed consectetur malesuada, metus enim malesuada mauris, nec dignissim augue enim eget est. Integer elementum, neque hendrerit facilisis egestas, mi mauris pretium diam, nec accumsan est arcu id mi. Vivamus mattis mi sit amet nibh. Aliquam egestas tempus orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras velit libero, blandit ut, euismod id, bibendum in, nulla. Duis enim metus, pellentesque vitae, sollicitudin in, congue et, mauris. Nunc viverra. Duis consectetur pulvinar ipsum. Nulla lacinia dolor eget ligula. </p>
<p>Morbi lobortis dolor eu ipsum. Aenean ultricies. Cras gravida tortor ut neque. Aenean ut neque. Donec vestibulum sagittis sapien. Phasellus ac est. In eu lectus. Nam imperdiet velit eget nibh. Etiam ornare auctor erat. Maecenas quis nulla.</p>
<p>Proin diam libero, porttitor vel, tincidunt bibendum, blandit sed, lacus. Pellentesque nec enim. Nullam laoreet congue leo. Cras ac purus eu neque varius varius. Integer et ligula non nunc elementum elementum. Quisque eu velit. Cras odio quam, cursus sit amet, cursus et, euismod a, dolor. Nunc condimentum tellus sed justo. Vivamus risus metus, consequat sed, auctor at, ullamcorper id, augue. Proin adipiscing, lacus ut dictum sodales, orci sem feugiat neque, at porta elit leo eu quam. Duis fringilla ornare tellus. Fusce nisi nisi, tristique eget, venenatis id, fringilla eu, est. Aliquam erat volutpat. Aliquam feugiat diam eget ligula malesuada sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin placerat. Morbi a nisl. Aliquam fringilla velit pharetra eros mollis vulputate. </p>
</div>
<div class="links" style="width: 150px;">
<center><h2>MENU</h2></center>
<a href ="#">Ir al inicio.</a><br>
<a href ="#">Ir al inicio.</a><br>
<a href ="#">Ir al inicio.</a><br>
<a href ="#">Ir al inicio.</a><br>
<a href ="#">Ir al inicio.</a><br></div>
</div>
<div id="footer">©©©©©©
</div>
</body>
</html> Código HTML:
body {background-image: url('background2.jpg');
background-repeat: no-repeat;
background-color: #c49544;
font-family: verdana, courier;
font-size: 10pt;
height: 100%;
position: relative;
}
a {text-decoration: none; color: #2a1b00;}
a:hover {text-decoration: underline}
h2 {color: #533500; font-weight: bold; margin-top: 0px; margin-left: 0px; margin-bottom: 0px;}
hr {color: #79520d;
background-color: #79520d;
height: 2px;
width: 75%;
}
.body { margin-top: 70%; position: absolute;}
.coso {margin-top: 120px; margin-left: 230px; position: absolute; z-index: 1;}
.contenido {margin-top: 171px; margin-left: 220px; background-image: url('top2.png'); position: absolute;
background-repeat: no-repeat;background-position: 0px 0px; padding-left: 13px; width: 637px; margin-right: 30px; border: 4px solid black; padding-left: 0px; background-color: #d9ba86;}
.top {margin-left: -13px; position: absolute; z-index: -1; padding-bottom: 9em;}
.bottom {margin-left: -6px; margin-top: -14px;}
.links { margin-top: 181px; margin-left: 30px; border: 2px solid #553503; position: absolute; width: 200px; padding: 3px; background-image: url('bgmenu.png')}
html
{
height: 100%;
}
.nonFooter
{
position: relative;
min-height: 100%;
}
* html #nonFooter
{
height: 100%;
}
#footer
{
position: relative;
margin-top: -7.5em;
}
Muchas gracias, realmente lo necesito.