Foros del Web » Programando para Internet » Javascript »

Div en el Pie de Pagina

Estas en el tema de Div en el Pie de Pagina en el foro de Javascript en Foros del Web. Hola, estoy buscando eliminar de mi sistema los malditos Frames Superior e Inferior... Con el superior no tuve ningun problema para poder imitarlo con un ...
  #1 (permalink)  
Antiguo 24/09/2008, 09:13
(Desactivado)
 
Fecha de Ingreso: enero-2008
Ubicación: Mendoza
Mensajes: 458
Antigüedad: 16 años, 3 meses
Puntos: 2
Div en el Pie de Pagina

Hola, estoy buscando eliminar de mi sistema los malditos Frames Superior e Inferior...

Con el superior no tuve ningun problema para poder imitarlo con un div...

Ahora como demonios hago para que un div, se vea siempre en el pie de pagina...

Trate de hacerlo con css, pero no le doy con el resultado...

La estructura, es un div superior, uno central con overflow: auto; para que tenga scroll, y un div inferior, pero este div debe estar permanente en el pie de pagina o sea pegado a la barra estado del navegador... como un frame inferior...

Bueno espero que alguien tenga idea de como hacerlo... saludos
  #2 (permalink)  
Antiguo 24/09/2008, 09:43
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 1 mes
Puntos: 839
De acuerdo Respuesta: Div en el Pie de Pagina

Es mejor hacerlo con CSS como dijiste.
Mira esta búsqueda:
http://www.google.com/search?hl=es&q...+pie+pagina&lr=
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 24/09/2008, 09:45
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 16 años
Puntos: 43
Respuesta: Div en el Pie de Pagina

Puedes colocarlo despues de un div que tenga un clear:both

Saludos

EDITADO: Sorry, no habia entendido bien el problema.
:P
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
  #4 (permalink)  
Antiguo 29/09/2008, 18:51
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 19 años, 7 meses
Puntos: 10
Respuesta: Div en el Pie de Pagina

No estoy seguro de haberte entendido bien, pero si lo que quieres es dividir la pantalla en tres franjas horizontales, de las cuales la de arriba (cabecera) y la de abajo (pie) estén siempre visibles (sea cual sea el contenido de la página), el siguiente ejemplo te servirá:

Cabecera = fija y siempre visible (sin scroll)
Cuerpo (contenido de la página) = lleva scroll
Pie = fijo y siempre visible (sin scroll)

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Cabecera y pie fijos</title>
<style type="text/css">
html body {
	margin:0;
	overflow: hidden;
}
#contenedor {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}	
#cabecera {
	width: 100%;
	height: 10%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
	background-color:#CCCCCC;
	padding: 3px;
	text-align: center;
	overflow: hidden;
}	
#cuerpo {
	width: 100%;
	height: 83%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#ffffff;
	padding: 3px;
	text-align: center;
	overflow: auto;
}	
#pie { 
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 7%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#CC0000;
	color:#FFFFFF;
	padding: 3px;
	text-align: center;
	overflow: hidden;
}	
</style>

</head>

<body>
<div id="contenedor">
	<div id="cabecera">La cabecera se mantiene siempre visible</div>
	<div id="cuerpo">
		<div style="height: 1000px;">Esta composición funciona en cualquier resolución y esta capa tiene su propio
		scroll por si el contenido es mayor que la pantalla,<br /> y nunca empuja al pie a salirse de la pantalla.<br /><br />
		Este conjunto funciona en ie6, ie7, firefox, opera...
		</div>
	</div>
	<div id="pie">El pie se mantiene siempre visible</div>
</div>
</body>

</html> 
Cuéntanos si es esto lo que buscas.

Saludos

//Este tema es de css y no de javascript//

Última edición por ssclamp; 29/09/2008 a las 19:07
  #5 (permalink)  
Antiguo 06/06/2010, 14:21
 
Fecha de Ingreso: septiembre-2007
Mensajes: 139
Antigüedad: 16 años, 8 meses
Puntos: 1
Respuesta: Div en el Pie de Pagina

gracias por tu aporte.. es justo lo que estaba buscando!!!
Cita:
Iniciado por ssclamp Ver Mensaje
No estoy seguro de haberte entendido bien, pero si lo que quieres es dividir la pantalla en tres franjas horizontales, de las cuales la de arriba (cabecera) y la de abajo (pie) estén siempre visibles (sea cual sea el contenido de la página), el siguiente ejemplo te servirá:

Cabecera = fija y siempre visible (sin scroll)
Cuerpo (contenido de la página) = lleva scroll
Pie = fijo y siempre visible (sin scroll)

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Cabecera y pie fijos</title>
<style type="text/css">
html body {
	margin:0;
	overflow: hidden;
}
#contenedor {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}	
#cabecera {
	width: 100%;
	height: 10%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
	background-color:#CCCCCC;
	padding: 3px;
	text-align: center;
	overflow: hidden;
}	
#cuerpo {
	width: 100%;
	height: 83%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#ffffff;
	padding: 3px;
	text-align: center;
	overflow: auto;
}	
#pie { 
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 7%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#CC0000;
	color:#FFFFFF;
	padding: 3px;
	text-align: center;
	overflow: hidden;
}	
</style>

</head>

<body>
<div id="contenedor">
	<div id="cabecera">La cabecera se mantiene siempre visible</div>
	<div id="cuerpo">
		<div style="height: 1000px;">Esta composición funciona en cualquier resolución y esta capa tiene su propio
		scroll por si el contenido es mayor que la pantalla,<br /> y nunca empuja al pie a salirse de la pantalla.<br /><br />
		Este conjunto funciona en ie6, ie7, firefox, opera...
		</div>
	</div>
	<div id="pie">El pie se mantiene siempre visible</div>
</div>
</body>

</html> 
Cuéntanos si es esto lo que buscas.

Saludos

//Este tema es de css y no de javascript//
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 08:18.