Foros del Web » Creando para Internet » CSS »

Pie de página, en el pie de la página.

Estas en el tema de Pie de página, en el pie de la página. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/04/2009, 22:53
 
Fecha de Ingreso: julio-2005
Mensajes: 32
Antigüedad: 12 años, 5 meses
Puntos: 0
Pie de página, en el pie de la página.

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">&copy;&copy;&copy;&copy;&copy;&copy;

    </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.
  #2 (permalink)  
Antiguo 08/04/2009, 23:33
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Pie de página, en el pie de la página.

Saludos!!

Lo que buscas, lo encuentras justo Aqui

Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 09/04/2009, 12:09
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Pie de página, en el pie de la página.

Hola:

El problema lo tienes aquí:

Código:
#footer {
    position: relative;
    margin-top: -7.5em;
    border: 1px solid yellow;
}
El margin-top: -7.5em hace que el pie te salga donde te sale.

De todas formas si le pones un borde de color al div nonFooter, veras que los div contenido y links al tener posición absoluta desbordan por debajo al nonFooter.

Saludos.

  #4 (permalink)  
Antiguo 09/04/2009, 12:34
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Pie de página, en el pie de la página.

Hola de nuevo:

Me olvidaba de una cosita que he visto en tu código:

Código:
<html>
<head>
<title>Desayunos a domicilio</title>
</head>
<link rel="stylesheet" type="text/css" href="archivo2.css" />

<body>
El link debe ir entre el <head> y el </head>, no después.

Saludos.

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 11:07.