estoy con el diseño de una página y me gustaría que el footer se mantuviese siempre pegado en su sitio, que para eso es el footer. Intento que el diseño sea adaptable.
Espero que me puedan ayudar:
Código HTML:
<body> <div id="container"> <div id="header"> <div id="logo"> <h1 class="logo"><a href="http://bodas.fireflystudio.es">Fotógrafos de boda</a></h1> </div> <div id="mainNav"> <ul> <li><a href="http://bodas.fireflystudio.es/">Inicio</a></li> <li><a href="http://bodas.fireflystudio.es/quienes-somos/">Quiénes somos</a></li> <li><a href="http://bodas.fireflystudio.es/tarifas/">Tarifas</a></li> <li><a href="http://bodas.fireflystudio.es/contacto/">Contacto</a></li> </ul> </div> <div id="imagen-home"></div> </div><!--end header--> <!--Inicio Content--> <div id="main"> <div class="reportajes-de-boda"> <div class="one_third elegancia"><h3>Elegancia</h3><p>Esta es una virtud que todo <b>fotógrafo de boda</b> debe tener, saber estar y pasar desapercibido en el día más importante de tu vida para obtener las mejores imagenes, ese es nuestro trabajo. Momentos intensos e infinitos</p></div> <div class="one_third originalidad"><h3>Originalidad</h3><p>Somos <b>fotógrafos profesioanles</b> titulados por la Universidad Politécnica de Valencia en <b>fotografía artística</b>, todo ello aplicado a la <b>fotografía de boda</b>. Podemos hacer que lo que pase ese día perdure durante toda una vida</p></div> <div class="one_third last profesionalidad"><h3>Profesionalidad</h3><p>Una amplia experiencia en el sector de fotografía social nos avala para que estéis tranquilos de que vuestro <b>reportaje de boda</b> será <b>mejor de lo que podéis soñar</b>. Para nosotros, vuestro sueño es una realidad</p></div> <div class="clearboth"></div> </div> <div class="portfolio-bodas1"> <h2>Reportajes de bodas</h2> <div class="one_third"><img src="/fotos-bodas/boda-clara300.jpg"></div> <div class="one_third"><img src="/fotos-bodas/boda-clara300.jpg"></div> <div class="one_third_last"><img src="/fotos-bodas/boda-clara300.jpg"></div> </div> <div class="portfolio-bodas1"> <div class="one_third"><img src="/fotos-bodas/boda-clara300.jpg"></div> <div class="one_third"><img src="/fotos-bodas/boda-clara300.jpg"></div> <div class="one_third_last"><img src="/fotos-bodas/boda-clara300.jpg"></div> </div> </div> <div id="footer"> Footer </div><!--end footer--> </div><!--end container--> </body>
CSS
Código HTML:
/* /////////////////////////////////////////////////////////////////////
// 02 - Global
/////////////////////////////////////////////////////////////////////*/
html, body { height: 100%; }
body {
font-family: Arial, sans-serif;
width:auto; height:auto;
padding: 0 0 30px 0;
margin: 0;
color: #7d7d7b;
background: #fff;
}
p {
line-height: 1.7em;
font-size: .9em;
margin: 0 0 20px 0;
}
ul {
list-style: none;
overflow: hidden;
}
li {
float:left;
}
img {
margin: 0;
}
img.left {
margin: 0 15px 15px 0;
float: left;
}
a {
text-decoration: none;
outline: none;
}
a{
color: #77a7b9;
}
a:hover {
color: #8dc7dc;
}
a img {
border:none;
}
h1, h2, h3, h4, h5, h6{
margin: 0 0 15px 0;
font-weight: normal;
color: #555555;
font-family: 'Raleway', sans-serif;
}
pre {
margin: 0 0 20px;
padding: 10px;
background: #fff;
overflow: auto;
border: 1px solid #e4e4e4;
}
.left {
float: left;
}
.right {
float: right;
}
input[type="email"], input[type="text"], textarea {
background-color: #fafafa;
padding: 10px;
font-family: Helvetica, Arial, sans-serif;
color: #6a6a6a;
border: 1px solid #ddd;
background: #fafafa url(images/field_bkg.png) repeat-x;
}
input[type="email"]:focus, input[type="text"]:focus {outline: none; background-color: #f7f7f7;}
textarea:focus {outline: none; background-color: #f7f7f7;}
textarea { width: 80%; font-size: 13px;}
/* //////////////////////////////////////////////////////////////////////
// 03 - General Layout
//////////////////////////////////////////////////////////////////////*/
#container {
width: 100%;
margin: 0 auto;
}
#main {
position: relative;
top: 650px;
height: 100%;
width: 80%;
margin: 0 auto;
background: #ccc;
}
#sidebar {
width: 220px;
float: right;
margin: 0 3% 0 0;
padding: 0 0 0 0;
}
/*////////////////////////////////////////////////////////////////////////
// 04 - Header
///////////////////////////////////////////////////////////////////////*/
#header{
width: 100%;
text-align: center;
margin: 0 auto;
}
#logo {
display: inline-block;
padding: 0;
}
#logo h1 {
margin: 20px 0 0 0 !important;
line-height: 1em !important;
padding: 0 !important;
font-weight: bold;
color: #222;
}
#header h1 {
font-size: 1.5em;
color: #222;
margin: 0;
}
#header h1 a, #header h1 a:hover{
color: #222 !important;
}
/* Top level navigation */
#mainNav{
position: absolute;
top: 70px;
width: 100%;
font-family: 'Raleway', sans-serif;
}
#mainNav ul{
margin: 0 auto;
display: inline-block;
padding: 0;
}
#mainNav li{
margin: 0 0 0 1.5em;
display: inline-block;
padding: 0;
}
#mainNav ul a{
line-height: 25px;
color: #8f8f8f;
font-size: .90em;
}
#mainNav ul ul a{
line-height: 15px;
font-weight: normal;
border-top: none;
}
#mainNav ul li a:hover,
#mainNav ul li:hover {
text-decoration: none;
color: #2e2e2e;
}
#imagen-home {
position: absolute;
top: 120px;
padding: 0 0 0 0;
margin: 0 auto;
z-index: -1;
background:#888 url('/fotos-bodas/boda-clara-javea.jpg') no-repeat center center;
width: 100%;
height: 500px;
}
/*////////////////////////////////////////////////////////////////////////
// 05 - Content
///////////////////////////////////////////////////////////////////////*/
.reportajes-de-boda {
border-style: solid;
border-width: 1px;
border-color: #f4f1f2;
padding: 10px 10px 10px 10px;
}
.portfolio-bodas1 {
margin-top: 40px;
height: 100%;
}
.portfolio-bodas1 h2 {
margin-bottom: 40px;
}
.portfolio-bodas2 {
margin-top: 40px;
}
/*Column Shortcodes------------------*/
.one_half{
width:48%;
position:relative;
margin-right:3%;
float:left;
}
.one_third{
width:30%;
position:relative;
margin-right:3%;
float:left;
}
/*////////////////////////////////////////////////////////////////////////
// 06 - Footer
///////////////////////////////////////////////////////////////////////*/
#footer {
position: relative;
}
Muchas gracias de antemano!
