Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Centrado vertical, caso muy concreto [Expertos] Ayuda-Help en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/02/2009, 09:45
 
Fecha de Ingreso: enero-2008
Mensajes: 36
Antigüedad: 9 años, 11 meses
Puntos: 0
Exclamación Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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://)

Última edición por Olivier; 23/02/2009 a las 10:49
  #2 (permalink)  
Antiguo 23/02/2009, 11:44
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

me parece q lo mas facil para esto es ponerle un poquito de javascript
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 23/02/2009, 14:50
 
Fecha de Ingreso: enero-2008
Mensajes: 36
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

Hola emiliodeg,

Gracias por responder!

Alguna idea acerca de esos javascripts ???

Un saludo.
  #4 (permalink)  
Antiguo 23/02/2009, 15:36
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #5 (permalink)  
Antiguo 23/02/2009, 17:53
 
Fecha de Ingreso: febrero-2009
Ubicación: Colombia
Mensajes: 20
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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.
  #6 (permalink)  
Antiguo 23/02/2009, 21:02
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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.

__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #7 (permalink)  
Antiguo 23/02/2009, 21:21
 
Fecha de Ingreso: febrero-2009
Mensajes: 44
Antigüedad: 8 años, 9 meses
Puntos: 2
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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.
  #8 (permalink)  
Antiguo 25/02/2009, 20:32
 
Fecha de Ingreso: enero-2008
Mensajes: 36
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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
  #9 (permalink)  
Antiguo 25/02/2009, 21:30
 
Fecha de Ingreso: febrero-2009
Ubicación: Colombia
Mensajes: 20
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

ve tengo curiosidad pa ver como quedo con css.
  #10 (permalink)  
Antiguo 26/02/2009, 07:10
 
Fecha de Ingreso: enero-2008
Mensajes: 36
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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>
  #11 (permalink)  
Antiguo 26/02/2009, 18:48
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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
  #12 (permalink)  
Antiguo 26/02/2009, 20:46
 
Fecha de Ingreso: febrero-2009
Ubicación: Colombia
Mensajes: 20
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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.
  #13 (permalink)  
Antiguo 26/02/2009, 20:49
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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

Última edición por ssclamp; 26/02/2009 a las 20:50 Razón: Olvidé decir que valida perfectamente
  #14 (permalink)  
Antiguo 26/02/2009, 21:33
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

Talvez te sirva esto, fue publicado hace poco

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

Saludos
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
  #15 (permalink)  
Antiguo 28/02/2009, 14:22
 
Fecha de Ingreso: enero-2008
Mensajes: 36
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

Cita:
Iniciado por ssclamp Ver Mensaje
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 Ver Mensaje
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 Ver Mensaje
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 Ver Mensaje
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.
  #16 (permalink)  
Antiguo 28/02/2009, 17:11
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: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 28/02/2009, 19:10
 
Fecha de Ingreso: enero-2008
Mensajes: 36
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

Cita:
Iniciado por Mikmoro Ver Mensaje
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?
  #18 (permalink)  
Antiguo 01/03/2009, 04:00
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: Centrado vertical, caso muy concreto [Expertos] Ayuda-Help

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.

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 09:34.