Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

Olivier · #1 (**permalink**) 23/02/2009, 09:45

Hola

Llevo un tiempo intentando diseñar un layout con CSS que me es imposible. El problema reside en el tema del centrado vertical, pero mi caso es muy concreto:

Vereis:

Quiero hacer un diseño de la página en la que haya un div header que se posicione arriba del todo de la ventana, abajo del todo quiero tener un div footer que se arrime al final de la ventana, y finalmente en el medio quiero tener un div con el contenido que aparezca centrado, a la misma distancia entre los dos div que se situan debajo y encima.

El problema es que el div central con el contenido no tiene una altura definida (variará segun la página) y por lo tanto no puedo aplicar algunas técnicas como la del 50% y le resto la mitad de la altura con el margin, luego, si la altura del div con el contenido sobrepasa la altura de la ventana del navegador, quiero evidenemtente que el div contenido empuje el div footer, por lo que se me hace dificil utilizar position:absolute.

En fin, que no sabeis lo que agradecería que alguien me echase una mano. He mirado en la web de Araudi.net y hay ejemplos que se le parecen pero siempre hay algo que no me funciona. La unica manera de momento que encuentro es la de crear el HTML con una tabla de 3 celdas, darle altura 100% y no incluir el DTD, pero eso es una chapuza que no me gusta contemplar ahora mismo.

Un saludo y gracias a todos de antemano

Os adjunto un pequeño grafico en el que igual entendeis mejor lo que quiero:

h ttp://img13.imageshack.us/img13/1463/layoutcsskh9.gif (por normas anti-spam no me deja aun adjuntar enlaces, tomaos la molestia de juntar la h con el ttp://)

emiliodeg · #2 (**permalink**) 23/02/2009, 11:44

me parece q lo mas facil para esto es ponerle un poquito de javascript

Olivier · #3 (**permalink**) 23/02/2009, 14:50

Hola emiliodeg,

Gracias por responder!

Alguna idea acerca de esos javascripts ???

Un saludo.

DoPeY-BBS · #4 (**permalink**) 23/02/2009, 15:36

Yo estoy empezando a dar mi primeros pasos en css

que opinas de esto http://www.chuidiang.com/css/tres_co...s_columnas.php

en un diseño de tres columnas lo ideal seria poner los dos div laterales absolutos y dejar el del contenido que fluya normalmente (al menos eso tengo entendido) y el contenedor en relative :)

me corrigen si estoy equivocado

coljung · #5 (**permalink**) 23/02/2009, 17:53

Estoy de acuerdo con lo q dice emiliodeg. Para tu caso, una solucion sencilla podria estar en javascript pues la verdad no sabria como hacer eso con css.

lucasan · #6 (**permalink**) 23/02/2009, 21:02

Hasta donde alcanzan mis conocimientos, no se puede hacer, y con tu permiso me meto un poco mas allá, no le encuentro sentido. Pero bueno, es tu diseño.

Cuelgo la imagen pos si alguien encuentra solución.

eseceve · #7 (**permalink**) 23/02/2009, 21:21

El algoritmo del javascript seria algo asi:

Capturas la resolucion del usuario y la altura del div contenido.
Si la altura de div contenido mas div footer y div header es mayor que la altura de resolucion
la posicion superior del div footer en el eje y es igual a la suma de la altura de div header y div contenido.
De lo contrario
la posicion superior del div contenido es igual a altura resolucion dividido 2.
margin-top: valor negativo de la mitad de la altura de div contenido.

Creo que eso deberia funcionar. XD... Mas tarde lo pasare a javascript si alguien no lo hace para entonces.

Olivier · #8 (**permalink**) 25/02/2009, 20:32

Bueno, gracias a todos

Conseguí finalmente con CSS la manera de hacerlo tras horas de experimentar con multitud de ejemplos.

Cuando tenga el código más limpio os lo pongo

coljung · #9 (**permalink**) 25/02/2009, 21:30

ve tengo curiosidad pa ver como quedo con css.

Olivier · #10 (**permalink**) 26/02/2009, 07:10

Aqui lo teneis

(he tenido que separar la url del doctype, maldito filtro anti-spam)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h ttp://w ww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Prueba</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
html, body { margin:0; padding:0;
height: 100%;
text-align: center;

}
#marco {
margin: auto;
display: table;
height: 100%;
width:100%;
}
#contenedor {
margin: auto;
display: table-cell;
vertical-align: middle;
position: relative;
height: 100%;
text-align:center;
}
#vertical_ie { width:0;
height:100%;
display:inline-block;
vertical-align:middle;
margin-bottom:-60px;

}
#centrador {
display:inline-block;
vertical-align:middle;
}
#amarillo {
height:40px;
background-color:yellow;
}
#verde {
height:20px;
background-color:green;
}
#central {
background-color:blue;
width:100%;
color:#ffffff;
}
</style>


</head>
<body>

<div id="marco">
<div id="contenedor">
<div id="amarillo"></div>


<span id="vertical_ie"></span>
<span id="centrador">
	<div id="central">Podeis probar a llenar el hueco con la altura que querais</div>
</span>

<div id="verde"></div>

</div>
</div>
</body>
</html>

ssclamp · #11 (**permalink**) 26/02/2009, 18:48

Hola Oliver, tal como lo tienes no funciona en firefox, ni en opera ni en chrome (funciona bien en ie6 y 7).

Quizás fuese bueno que revisaras el código pues el intento es bueno y conseguirlo sería interesante. Ahora no tengo tiempo de ponerme a hacer pruebas. Si logras resolverlo sería estupendo que lo compartieras.

Saludos

coljung · #12 (**permalink**) 26/02/2009, 20:46

La verdad se me hace q esto q queires hacer es complicarte la vida demasiado con CSS.

si en serio queres q te sirva bien la solucion como han dicho varios aca esta en javascript.

ssclamp · #13 (**permalink**) 26/02/2009, 20:49

Oliver, he hecho un acercamiento al tema que propones y he subido a este almacén tres pruebas (zip): contenido pequeño, contenido mediano y gran contenido y las tres provocan el comportamiento que pides.

http://www.box.net/shared/doag83qglm

Funcionan perfectamente en ie6, ie7, firefox y opera

Mira si te sirve. Saludos

braulito · #14 (**permalink**) 26/02/2009, 21:33

Talvez te sirva esto, fue publicado hace poco

http://blog.themeforest.net/tutorial...ring-with-css/

Saludos

Olivier · #15 (**permalink**) 28/02/2009, 14:22

Cita:

Iniciado por ssclamp

Hola Oliver, tal como lo tienes no funciona en firefox, ni en opera ni en chrome (funciona bien en ie6 y 7).

A mi en Firefox me funciona de maravilla, concretamente Firefox 3.05, ¿seguro que no te funciona alli? Lo veo raro

Cita:

Iniciado por ssclamp

Oliver, he hecho un acercamiento al tema que propones y he subido a este almacén tres pruebas (zip): contenido pequeño, contenido mediano y gran contenido y las tres provocan el comportamiento que pides.

Funcionan perfectamente en ie6, ie7, firefox y opera

Mira si te sirve. Saludos

WOW!! Estupendo

Da gusto participar en una comunidad así

. La verdad que has conseguido simplificar mucho más el código. Utilizaré este. Eso si, ¿dices que no va en Chrome?

Cita:

Iniciado por coljung

La verdad se me hace q esto q queires hacer es complicarte la vida demasiado con CSS.

si en serio queres q te sirva bien la solucion como han dicho varios aca esta en javascript.

Cita:

Iniciado por braulito

Talvez te sirva esto, fue publicado hace poco

Saludos

Creo que estamos consiguiendo que milagrosamente funcione con CSS. Gracias a todos del mismo modo

Un saludo.

Mikmoro · #16 (**permalink**) 28/02/2009, 17:11

Pero Olivier: las soluciones de ssclamp están hechas con tablas. ¿Era eso lo que buscabas? Si es así, no me enterado de nada de este hilo.

Olivier · #17 (**permalink**) 28/02/2009, 19:10

Cita:

Iniciado por Mikmoro

Pero Olivier: las soluciones de ssclamp están hechas con tablas. ¿Era eso lo que buscabas? Si es así, no me enterado de nada de este hilo.

Ostras, me acabo de dar cuenta de ello y por eso he vuelto aquí

No me habia dado cuenta en el momento, mis ojos quisieron leer div en vez de td y tr, pero qué demonios, lo que quiero es que lo que muestro se vea de la manera que busco , me pase los validadores correctamente y se vea en el máximo de navegdores.

No soy el experto y por eso os pregunto.

A mi mi solucion 100% CSS me va tanto en IE como en firefox. Si me deciis que da problemas, prefiero utilizar tablas a tener que utilizar javascript para un simple tema de disposición.

Ahora estoy hecho un lio, ¿que me recomendais?

jomaruro · #18 (**permalink**) 01/03/2009, 04:00

Hola:

Mejor en CSS que en tablas, el único inconveniente que le he encontrado es que no funciona en Chrome porque te centra tanto la cabecera, como el pie como el texto.

Saludos.