div que se ubique al final

juan_14nob · #1 (**permalink**) 12/02/2011, 14:03

Hola a todos, estoy intentando hacer un diseño pero no logro que el footer se ubique al final de la pagina

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Admin. Jcweb </title>
<style type="text/css">
body{
background:black;
font-family:martina;
color:white;
font-size:20px;
}
#contenedor{

height:100%;
position:relative;
width:500px;
top:40px;
border:1px solid #fff;
   -moz-border-radius-topright: 29px;
      -moz-border-radius-topleft: 29px;
	     -moz-border-radius-bottomright: 28px;
   -moz-border-radius-bottomleft: 28px;
}

</style>
</head>
<body>
<div id="contenedor" align="center">
<form action="#" method="POST">
<table width="360" border="0">
  <tr>
    <td width="350" height="96" colspan="2"><img src="/jcweb/css/photo/admin.jpg" width="350" height="110" alt="admin" /></td>
  </tr>
  <tr>
    <td height="20" width="70">Usuario:</td>
	<td><input type="text" name="usuario"></td>
  </tr>
  <tr>
    <td height="20">Contraseña:</td>
	<td><input type="text" name="contrasena"></td>
  </tr>
  <tr>
    <td height="81"><input type="submit" value="Enviar"></td>
	<td><input type="reset" value="Borrar"></td>
  </tr>
</table>
	
	
		
	
		</form></div>
<br/><br/><br><br><br>
<div id="footer1" style="background-image: url('css/photo/footer1.jpg'); left: 10px; top:22px; width: 980px; height: 42px; font-weight: bold; font-size: medium;-moz-border-radius-topleft:20px;-moz-border-radius-topright:20px;bottom:0px;position:relative;">
	
</div>
</body>
</html>

sanxuan · #2 (**permalink**) 12/02/2011, 14:12

Yo mismo he utilizado las etiquetas <br/> para definir espacios cuando empezaba.
Cuando aprendas a usar CSS las usarás sólo donde sean necesarias y no para maquetar tu página.
Supongo que lo que quieres es que el pie aparezca siempre al final del contenido de tu página, pero que como mínimo se coloque en el borde inferior de ésta.
Una búsqueda de "pie siempre abajo" en el cuadro de búsqueda de este foro debería ser suficiente para aclarar tus dudas. Si necesitas más ayuda, creo que me seguirás encontrando por aquí (o a otros foreros).

juan_14nob · #3 (**permalink**) 12/02/2011, 14:24

Hola, Ya estuve viendo antes pero no encontre nada que me sea util o me ayude en mi caso

Ciel · #4 (**permalink**) 13/02/2011, 09:53

Algo como esto seria:

Código:

#footer {
	position:fixed; 
	bottom: 0;
	width: 100%;
	height: 200px;
}

jomaruro · #5 (**permalink**) 13/02/2011, 12:18

Hola:

Al div contenedor ponle overflow:auto.

Saludos.

sanxuan · #6 (**permalink**) 13/02/2011, 12:38

Comprueba si te puede servir algo así.
No estoy seguro de que sea lo que estabas buscando.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Admin. Jcweb </title>
<style type="text/css">
html{
    height:100%
}
body{
    background:black;
    font-family:martina;
    color:white;
    font-size:20px;
    height:100%;
    margin:0;
}
#contenedor{
   height:100%;
   background: #456;
   min-height: 340px; /* alto mínimo para que el pie no suba por encima del formulario */
}
#formulario{
   position:relative;
   width:500px;
   top:40px;
   border:1px solid #fff;
   -moz-border-radius: 29px;
   margin: 0 auto 82px; /* la altura del pie + 40px de la propiedad top */
   text-align:center;
}
#footer1 {
    background-image: url('css/photo/footer1.jpg');
    background-color: #345;
    width: 980px;
    height: 42px;
    font-weight: bold;
    font-size: medium;
    -moz-border-radius: 20px 20px 0 0;
    bottom:0px;
    margin:-42px auto 0;
}
#tabla{
    margin:0 auto;
    width: 360px;
    border: 0;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="formulario">
<form action="#" method="POST">
<table id="tabla">
  <tr>
    <td width="350" height="96" colspan="2"><img src="/jcweb/css/photo/admin.jpg" width="350" height="110" alt="admin" /></td>
  </tr>
  <tr>
    <td height="20" width="70">Usuario:</td>
    <td><input type="text" name="usuario"></td>
  </tr>
  <tr>
    <td height="20">Contraseña:</td>
    <td><input type="text" name="contrasena"></td>
  </tr>
  <tr>
    <td height="81"><input type="submit" value="Enviar"></td>
    <td><input type="reset" value="Borrar"></td>
  </tr>
</table>
</form>
</div>
</div>
<div id="footer1">
</div>  
</body>
</html>