Foros del Web » Creando para Internet » CSS »

Centrar div entre header y footer

Estas en el tema de Centrar div entre header y footer en el foro de CSS en Foros del Web. hola amigos, tengo una consulta que debe ser bastante comun pero no encuentro ninguna solucion eficaz..... lo que quiero hacer es tener una div entre ...
  #1 (permalink)  
Antiguo 27/04/2009, 23:03
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Centrar div entre header y footer

hola amigos, tengo una consulta que debe ser bastante comun pero no encuentro ninguna solucion eficaz.....

lo que quiero hacer es
tener una div entre medio de un header(arriba) y un footer(abajo) que aunque maximize o achique la ventana, siempre este en el medio....

supongamos que si fuera con tablas seria asi:

Código HTML:
Ver original
  1. <table border="1" width="100%" height="100%">
  2.     <tr>
  3.         <td class="header" valign="top" height="50"></td>
  4.     </tr>
  5.     <tr>
  6.         <td align="center"                valign="middle"                    ></td>
  7.     </tr>
  8.     <tr>
  9.         <td class="footer" valign="bottom"  height="50"></td>
  10.     </tr>

.... pero en este caso, yo quiero usar divs, aca adjunto una imagen por si no se entiende...

  #2 (permalink)  
Antiguo 27/04/2009, 23:13
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: Centrar div entre header y footer

a ver si esto funciona
Código HTML:
<style type="text/css">
<!--
* {
margin:0;
padding:0;
outline:none;
}
body {
width:100%;
height:100%;
}
contenedor {
height:100%;
width:la que quieras;
margin:0 auto;
}
header {
width:100%;
height:la que quieras;
position:relative;
top:0;
}
medio {
height:la que quieras;
width:la que quieras;
margin:auto; /* esto es lo que centraria el div */
}
footer {
width:100%;
height:la que quieras;
position:relative;
bottom:0;
}
-->
</style>
</head>
<body>
<div id="contenedor">
     <div id="header">
     </div>
     <div id="medio">
     </div>
     <div id="footer">
     </div>
</div> 
no estoy seguro pero es cuestion de probar, suerte
  #3 (permalink)  
Antiguo 27/04/2009, 23:22
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Centrar div entre header y footer

Cita:
Iniciado por Newbie001 Ver Mensaje
a ver si esto funciona
Código HTML:
<style type="text/css">
<!--
* {
margin:0;
padding:0;
outline:none;
}
body {
width:100%;
height:100%;
}
contenedor {
height:100%;
width:la que quieras;
margin:0 auto;
}
header {
width:100%;
height:la que quieras;
position:relative;
top:0;
}
medio {
height:la que quieras;
width:la que quieras;
margin:auto; /* esto es lo que centraria el div */
}
footer {
width:100%;
height:la que quieras;
position:relative;
bottom:0;
}
-->
</style>
</head>
<body>
<div id="contenedor">
     <div id="header">
     </div>
     <div id="medio">
     </div>
     <div id="footer">
     </div>
</div> 
no estoy seguro pero es cuestion de probar, suerte
hola, gracias por responder, pero probe y no funciona..... las divs quedan las 3 arriba....
y eso que les agregue los # para indicar que eran id
  #4 (permalink)  
Antiguo 28/04/2009, 05:11
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: Centrar div entre header y footer

una lastima. a ver si alguien mas te puede dar una mano, suerte
  #5 (permalink)  
Antiguo 29/04/2009, 09:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar div entre header y footer

Se necesitan más datos para saber si es viable:
¿los tamaños son fijos?
¿nunca más alto el conjunto que una página o podrá haber más contenido y aparecer un scroll?
¿cabecera y pie siempre pegados arriba y abajo se reduzca lo que se reduzca?

Etcétera. Concreta y será más fácil recibir ayuda.
  #6 (permalink)  
Antiguo 29/04/2009, 12:03
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Centrar div entre header y footer

Cita:
Iniciado por Mikmoro Ver Mensaje
Se necesitan más datos para saber si es viable:

Etcétera. Concreta y será más fácil recibir ayuda.

¿los tamaños son fijos?
el del header y footer si !, pero la div del medio tendria que medir TODO LO QUE SOBRE



¿nunca más alto el conjunto que una página o podrá haber más contenido y aparecer un scroll?
SI ES MUY ALTO EL CONTENIDO, EL SCROLL SE ABRIRA Y EL FOOTER SE VA HACIA EL FONDO



¿cabecera y pie siempre pegados arriba y abajo se reduzca lo que se reduzca?
SI
  #7 (permalink)  
Antiguo 29/04/2009, 12:49
 
Fecha de Ingreso: febrero-2009
Mensajes: 225
Antigüedad: 8 años, 9 meses
Puntos: 4
Respuesta: Centrar div entre header y footer

Cita:
Iniciado por rayden12345 Ver Mensaje
¿los tamaños son fijos?
el del header y footer si !, pero la div del medio tendria que medir TODO LO QUE SOBRE
tu dibujo no muestra eso :S no entiendo cual de las 2 soluciones es la que precisas
  #8 (permalink)  
Antiguo 29/04/2009, 13:12
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Centrar div entre header y footer

Coincidiendo con Mikmoro en la falta de precisión y antes de que rayden12345 precisara más (y viendo su primera petición) hice este acercamiento a una estructura que mantiene fija la cabecera y la base y flota el contenido en altura (en el hueco libre que dejan la cabecera y la base) pero con tamaño fijo en altura.

Funciona correctamente en muchos browsers y no le afecta la resolución de pantalla, pero al tener el cuerpo central un tamaño fijo en altura, sólo queda optimizado para una resolución de 1024x768 y sus cercanas, p.e. 1280x800, aunque el centrado flota perfectamente en cualquier resolución.

Quizás pueda valer como punto de partida y, si alguien aporta ajustes que permitan la adaptación a porcentajes, mejor que mejor.

Saludos

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cabecera, base y cuerpo central centrado en el ancho y en el alto</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#conjunto {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#cabecera {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100px; /*si se cambia este valor se debe cambiar también el valor de 2 - mirar en portacuerpo*/
	background-color: blue;
}
#base {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100px;
	background-color: purple;
	z-index: 101;
}
#portacuerpo {
	position: relative;
	top: 100px; /* valor 2: cambiarlo por el mismo valor que el height de cabecera*/
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: yellow;
}
#cuerpo {
	position: absolute;
	width: 780px;
	height: 340px;
	margin-left: -390px;
	margin-top: -270px; /*este valor debe ser siempre la mitad que su height (en este caso es 340px) + el valor del height de la cabecera (en este ejemplo es 100px) = la mitad de 340 es 170 y se le suma 100 de la altura de la cabecera, total: 270px */
	top: 50%;
	left: 50%;
	background-color: red;
	overflow: auto;
	z-index: 100;
}
.texto {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;
	line-height: 100px;
}
.texto2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: center;
}
</style>
</head>

<body>
<div id="conjunto">
	<div id="cabecera" class="texto2">Contenido de la cabecera<br /><br />Estructura con cabecera y base siempre fijas en pantalla y contenido en un cuerpo central que siempre flota centrándose en el ancho y en la altura libre que hay entre la cabecera y la base, independientemente de la resolución del monitor.<br />Probado en ie6, ie7, ie8, ff 2.0.018 y 3.0.5, opera 9.64 y chrome 4.154. Y en pantallas de 1024x768, 1280x1024 y 1280x800 píxeles. Optimizado para 1024x768.</div>
	<div id="portacuerpo">
		<div id="cuerpo" class="texto">Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br />Contenido del cuerpo central<br /></div>
	</div>
	<div id="base" class="texto">Contenido de la base</div>
</div>
</body>

</html> 
  #9 (permalink)  
Antiguo 29/04/2009, 15:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar div entre header y footer

Cita:
Iniciado por rayden12345 Ver Mensaje
¿los tamaños son fijos?
el del header y footer si !, pero la div del medio tendria que medir TODO LO QUE SOBRE
¿Si ocupa "TODO LO QUE SOBRE" cómo lo piensas centrar verticalmente? es imposible, porque ocupa todo.

P.D.: por escrito, al usar mayúsculas parece que gritaras, y cuando pones en mayúsculas la aclaración a una duda parece que dijeras: "esto es lo que quería decir, estúpido". Seguramente no es tu intención pero es así como suena.
  #10 (permalink)  
Antiguo 29/04/2009, 23:35
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Centrar div entre header y footer

Cita:
Iniciado por Mikmoro Ver Mensaje
¿Si ocupa "TODO LO QUE SOBRE" cómo lo piensas centrar verticalmente? es imposible, porque ocupa todo.

P.D.: por escrito, al usar mayúsculas parece que gritaras, y cuando pones en mayúsculas la aclaración a una duda parece que dijeras: "esto es lo que quería decir, estúpido". Seguramente no es tu intención pero es así como suena.

la div esa va a ser invisible..... igualmente lo que quiero centrar es el contenido.......hagamos de cuenta que esa div seria un td con valign="middle"
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 01:54.