Foros del Web » Creando para Internet » CSS »

footer siempre al final del la pagina

Estas en el tema de footer siempre al final del la pagina en el foro de CSS en Foros del Web. Hola a todos, tengo un problema el cual es que no se como hacer con un div para que se ubique siempre abajo.. quiero que ...
  #1 (permalink)  
Antiguo 16/03/2011, 15:43
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 7 meses
Puntos: 6
footer siempre al final del la pagina

Hola a todos, tengo un problema el cual es que no se como hacer con un div para que se ubique siempre abajo.. quiero que el footer quede siempre al final dela pagina pero sin usar tablas.. ya que si pongo poco contenido en el cuerpo el div se ubiqueria arriba y no al final como yo quiero.. saludos.
  #2 (permalink)  
Antiguo 16/03/2011, 16:23
 
Fecha de Ingreso: marzo-2010
Ubicación: España
Mensajes: 25
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: footer siempre al final del la pagina

Para hacer eso le puedes indicar en el div del pie, el margin-top = el alto que quieres que tenga tu página. Y de esa manera se te quedará siempre abajo, independientemente del contenido que tenga la página.
Saludos...
  #3 (permalink)  
Antiguo 16/03/2011, 16:28
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: footer siempre al final del la pagina

Pues yo nunca he tenido problemas para que un div se quede abajo, si estas utilizando la propiedad float dentro de los divs, debes especificarle al div footer la propiedad clear: both, de resto no le veo mayor problema para que no quede abajo. Seria de utilidad saber como estas manejando los elementos dentro de la pagina y asi saber por que se comporta de tal manera.

Veo que hoy se me están adelantando . ¿Y si el contenido es mayor que el margin-top que se le da? no cero que sea una buena solución, a no ser que la pagina vaya a tener contenido estático.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #4 (permalink)  
Antiguo 16/03/2011, 16:35
 
Fecha de Ingreso: marzo-2010
Ubicación: España
Mensajes: 25
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: footer siempre al final del la pagina

laratik tiene razón, es que recién acabo de estrenarme con mi primera web estática, y lo conseguí así.
Pero si es dinámica no sirve, comprendo, pero con el clear:both, consigues que se ponga debajo del contenido o tamaño que tenga el último div, pero no debajo del todo, si este no abarca todo.

Saludos
  #5 (permalink)  
Antiguo 16/03/2011, 16:58
Avatar de juan_14nob  
Fecha de Ingreso: abril-2010
Mensajes: 552
Antigüedad: 7 años, 7 meses
Puntos: 6
Respuesta: footer siempre al final del la pagina

aqui les dejo el codigo..

[CSS]
<style type="text/css">
#fyh{
position:absolute;
margin: 0 10px 0 0;
height:auto;
top:0px;
right:0px;
font-family:martina;

margin-top:80px;


}

#cerrar{
width:100px;
height:20px;
position:relative;
float:right;
}
#cerrar a{
font-family:martina;
color:white;
}
#cerrar a:hover{
color:white;

}
#header{
width:100%;
height:100px;
background-image: url('css/photo/head2.jpg');
position:relative;

}
#footer{
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
margin:auto;
width:800px;
text-align: center;
background-image: url('css/photo/footer1.jpg');
color: #fff;
height: 2em;
margin-top: 10px;
position:relative;

}
* {
margin: 0;
outline: 0 none;
}
#contenido{
width:100%;
height:auto;
position:relative;

margin-top:0px;
}
html{
height: 100%;
outline: 0 none;
background:white;
color:black;

}
.corte{
clear: both;
padding-top:2em;
position:relative;

}
#contenedor{
min-height:100%;
width:1000px;
//height:auto;
margin: 0 auto;


}
.mensaje-no-leido{
background: url('icon-16-messages.png') no-repeat scroll 3px 3px transparent;
padding: 4px 10px 0 22px;
font-family: Arial,Helvetica,sans-serif;
color:black;
font-size:10px;

}
#caja-menu{
background: none repeat scroll 0 0 #f0f0f0;
border: 1px solid #CCCCCC;
height:26px;

}
#derecha{
float:right;
}
#caja-menu .logout{
background: url('icon-16-logout.png') no-repeat 3px 3px transparent;

}
#caja-menu span{
display:block;
float:left;
line-height:16px;
margin-bottom:5px;
padding: 4px 10px 0 22px;
font-size:11px;
}
a:visited{
color:#0B55C4;
text-decoration:none;
}
a:hover{
text-decoration:underline;

}
.logout{

}



table.adminlist tbody tr td {
// background: none repeat scroll 0 0 ;
border: 1px solid #FFFFFF;
height: 25px;
}
.row1{
background-color: #F9F9F9;
font-size:11px;
font-weight:bold;
margin-left:6px;
border:none;
}
.row0{
background-color: #EEEEEE;
font-size:11px;
font-weight:bold;
margin-left:6px;
border:none;
}
.pregunta{
margin-left:6px;

}
table.adminlist .pagination {
display: table;
margin: 0 auto;
padding: 0;
}
.pagination div.limit {
font-size:11px;
float: left;
height: 22px;
line-height: 22px;
margin: 0 10px;
}
input, select {
border: 1px solid silver;
font-size: 10px;
}
table.adminlist thead th {
background: none repeat scroll 0 0 #F0F0F0;
border-bottom: 1px solid #999999;
border-left: 1px solid #FFFFFF;
color: #666666;
text-align: center;
}
.container {
text-decoration: none;
}
table.adminlist {
background-color: #E7E7E7;
border-spacing: 1px;
color: #666666;
width: 30%;
margin-top:20px;
}
.title{



}
body {
font-family: Arial,Helvetica,sans-serif;
font-size:11px:
}
a{
color: #0B55C4;
text-decoration: none;
font-size:11px;
font-weight:bold;
}
#divtapa{
position:fixed;
width:190px;
height:100px;
z-index:999;
background-color:#FFFFFF;
display:none;

}
#mostrame{
position:relative;
width:190px;
height:100px;
display:none;
width:200px;

height:100px;
}
.imgs{
border:none;

}


</style>
[/CSS]

Código HTML:
<html>
<head>
<title>Principal-Admin</title>

<script type="text/javascript" src="jquery-1.5.js"></script>

<script language="JavaScript" type="text/javascript">
	


function confirmation() {
	var answer = confirm("Leave tizag.com?")
	if (answer){
		alert("Bye bye!")
		window.location = "http://www.google.com/";
	}
	else{
		alert("Thanks for sticking around!")
	}
}


$(document).ready(function() {
	// Muestra y oculta los menús
	$('ul li:has(ul)').hover(
		function(e)
		{
			$(this).find('ul').slideDown();
		},
		function(e)
		{
			$(this).find('ul').slideUp();
		}
	);
});



      
</script>
<script>

          $(document).ready(function(){

              //al hacer click en mostrar:

              $('#mostrar').click(function(evento){

                  evento.preventDefault()
 
                  $('#mostrame:hidden').slideDown();
  
              });
  
              //al hacer click en ocultar:
  
              $('#ocultar').click(function(evento){
  
                  evento.preventDefault()
 

                  $('#mostrame:visible').slideUp();
 
              });

          });
function todos(chkbox)
{
for (var i=0;i < document.forms[0].elements.length;i++)
{
var elemento = document.forms[0].elements[i];
if (elemento.type == "checkbox")
{
elemento.checked = chkbox.checked
}
}
}
</script>
<script>
function enviar_formulario(){
   document.formulario1.submit()
}
</script>  
</head>
<body>

<div id="contenedor">
	<div id="header">
	
		<div id="fyh">
		Hoy es: 16/03/2011 		</div>
	</div>
	<div id="contenido">
		<div id="caja-menu">
		<ul>
	<li>

		<a href="#">Usuarios</a>
		<ul>
			<li><a href="principal.php?mod=usuarios">Crear usuario</a></li>
			<li><a href="usuarios.php?mod=eliminarsuarios">Eliminar</a></li>
			<li><a href="#">Otra opcion</a></li>

		</ul>

	</li>
	<li>
		<a href="#">Modulos</a>
		<ul>
			<li><a href="principal.php?mod=contenido">Gestion</a></li>
			<li><a href="principal.php?mod=contenidomodelo">Modelo</a></li>

		</ul>

	</li>
	<li><a href="#">Encuesta</a>
		<ul>
			<li><a href="principal.php?mod=encuestanueva">Nueva</a></li>
			<li><a href="principal.php?mod=encuestamodelo">Modelo</a></li>
		
		</ul>
		</li>

	<li><a href="#">Mensajeria</a>
		<ul>
			<li><a href="principal.php?mod=mensajesnuevos">Mensajes nuevos</a></li>
			<li><a href="principal.php?mod=mensajes">Todo los mensajes</a></li>
		
		</ul>
		</li>
		
</ul>

			<div id="derecha">
			<span class='mensaje-no-leido'>Tiene 4 mensajes nuevos</span> <span class="logout">
					<a href="destruir.php" >Cerrar sesion</a>
				</span>
			</div>	
		</div>
			<div id="arriba">

		
		<div id="secciones" style="
width:100%;
height:200px;
font-family:martina;">


<a href='#' id='mostrar'/><img src='addusers.png' title='Nuevo' class='imgs' /></a><a href='javascript:enviar_formulario()' id='eliminar'><img src='trash.png' height='48' width='48' class='imgs' title='Eliminar'/></a><br><table border='1' cellspacing='0'cellpadding='0' class='adminlist'><thead><tr><th width='5'> # </th><th width='20'><input type='checkbox' name='todos' value='' onClick='todos(this);'></th><th class='title'><a href='usuarios.php?order=pregunta' title='Haz click para ordenar por esta columna'>Nombre</a></th><th align='center' width='5%'><a href='#' title='Haz click para ordenar por esta columna'>Permiso</a></th></tr></thead><tfoot><tr><td colspan='7'><del class='container'><div class='pagination'><div class='limit'>Mostrar num.<select id='limit' class='inputbox' size='1' name='limit'><option value='5'>5</option><option value='10'>10</option><option value='15'>15</option><option selected='selected' value='20'>20</option><option value='30'>30</option><option value='50'>50</option><option value='100'>100</option><option value='0'>Todas</option></select></div></div></del></td></tr></tfoot><tbody><form action='usuarios.php' name='formulario1' method='POST'><tr class='row1'><td align='center'>1</td><td><input type='checkbox' name='elegir[]' value='13'></td><td><span class='pregunta'><a href='encuestacms.php?option=13'>juan</a></span></td><td align='center'>777</td><tr class='row0'><td align='center'>2</td><td><input type='checkbox' name='elegir[]' value='14'></td><td><span class='pregunta'><a href='encuestacms.php?option=14'>juan22</a></span></td><td align='center'>222</td></div></form><form action ='usuarios.php' method='POST' id='formnew' name='form11'><div id='mostrame'>Usuario: <input type='text' name='usuarios'><br>Contraseña:<input type='text' name='contrasena'><br>permiso:<input type='text' name='permiso'><br><input type='submit' value='aceptar' name='boton'><a href='#' id='ocultar' />Ocultar</a></div></form></form>no exuste</table><br><br>

</div>
<div class="corte"></div>

	
		
		


		</div>

		</div>

	</div>

<div id="footer">
<p style="font-size:18px;color:black;">Juan Carmena © 2010 Todos los derechos reservados.</p>

</div>
</body>

</html> 
  #6 (permalink)  
Antiguo 16/03/2011, 22:49
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Exclamación Respuesta: footer siempre al final del la pagina

Hola juan_14nob, que bonito chorizo . Ahora si al tema, realmente no he visto problemas en que el div footer se quede abajo, de hecho lo visualizo asi:



Y más o menos igual en todos los navegadores. Si quieres puedes colocar una imagen de como lo visualizas, lamento no ser de más ayuda.

Acerca del clear: both lo que realmente hace es colocar debajo de un div que contenga la propiedad float, ya sea izquierda o derecha. No quiere decir que clear:both vaya a ubicar el contenedor debajo de todo el contenido.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.

Última edición por laratik; 16/03/2011 a las 22:55
  #7 (permalink)  
Antiguo 16/03/2011, 23:24
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 6 años, 8 meses
Puntos: 192
Respuesta: footer siempre al final del la pagina

Yo utilizo con muchísima frecuencia esto:

http://www.cssstickyfooter.com/

100% recomendable, da geniales resultados.

Etiquetas: final, footer, siempre
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 21:03.