Foros del Web » Creando para Internet » CSS »

div que se ubique al final

Estas en el tema de div que se ubique al final en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/02/2011, 14:03
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 7 meses
Puntos: 6
div que se ubique al final

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> 
  #2 (permalink)  
Antiguo 12/02/2011, 14:12
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: div que se ubique al final

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).
  #3 (permalink)  
Antiguo 12/02/2011, 14:24
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 7 meses
Puntos: 6
Respuesta: div que se ubique al final

Hola, Ya estuve viendo antes pero no encontre nada que me sea util o me ayude en mi caso
  #4 (permalink)  
Antiguo 13/02/2011, 09:53
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: div que se ubique al final

Algo como esto seria:

Código:
#footer {
	position:fixed; 
	bottom: 0;
	width: 100%;
	height: 200px;
}
  #5 (permalink)  
Antiguo 13/02/2011, 12:18
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: div que se ubique al final

Hola:

Al div contenedor ponle overflow:auto.

Saludos.

  #6 (permalink)  
Antiguo 13/02/2011, 12:38
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: div que se ubique al final

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

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <title>Admin. Jcweb </title>
  4. <style type="text/css">
  5. html{
  6.     height:100%
  7. }
  8. body{
  9.     background:black;
  10.     font-family:martina;
  11.     color:white;
  12.     font-size:20px;
  13.     height:100%;
  14.     margin:0;
  15. }
  16. #contenedor{
  17.    height:100%;
  18.    background: #456;
  19.    min-height: 340px; /* alto mínimo para que el pie no suba por encima del formulario */
  20. }
  21. #formulario{
  22.    position:relative;
  23.    width:500px;
  24.    top:40px;
  25.    border:1px solid #fff;
  26.    -moz-border-radius: 29px;
  27.    margin: 0 auto 82px; /* la altura del pie + 40px de la propiedad top */
  28.    text-align:center;
  29. }
  30. #footer1 {
  31.     background-image: url('css/photo/footer1.jpg');
  32.     background-color: #345;
  33.     width: 980px;
  34.     height: 42px;
  35.     font-weight: bold;
  36.     font-size: medium;
  37.     -moz-border-radius: 20px 20px 0 0;
  38.     bottom:0px;
  39.     margin:-42px auto 0;
  40. }
  41. #tabla{
  42.     margin:0 auto;
  43.     width: 360px;
  44.     border: 0;
  45. }
  46. </head>
  47. <div id="contenedor">
  48. <div id="formulario">
  49. <form action="#" method="POST">
  50. <table id="tabla">
  51.   <tr>
  52.     <td width="350" height="96" colspan="2"><img src="/jcweb/css/photo/admin.jpg" width="350" height="110" alt="admin" /></td>
  53.   </tr>
  54.   <tr>
  55.     <td height="20" width="70">Usuario:</td>
  56.     <td><input type="text" name="usuario"></td>
  57.   </tr>
  58.   <tr>
  59.     <td height="20">Contraseña:</td>
  60.     <td><input type="text" name="contrasena"></td>
  61.   </tr>
  62.   <tr>
  63.     <td height="81"><input type="submit" value="Enviar"></td>
  64.     <td><input type="reset" value="Borrar"></td>
  65.   </tr>
  66. </form>
  67. </div>
  68. </div>
  69. <div id="footer1">
  70. </div> 
  71. </body>
  72. </html>

Etiquetas: final
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 14:04.