Height procentual depende de anchura de la pagina?

Ourii · #1 (**permalink**) 20/08/2012, 18:02

Buenas
Estoy creando una aplicación móvil y quiero que una imagen quede justo en el medio de la página.
He conseguido centrarla horizontalmente (ponerla no pegada a la izquierda) poniéndole en el div un "align = 'center'" (y es que la imagen va a variar de anchura en el tiempo y con otros métodos no me vale ya que la centra mediante los laterales de la imagen y no por el eje central).

El problema es para centrarla verticalmente. Tendría que ser fácil ya que además la altura de la imagen no tiene que variar. Pero el problema es que cuando le pongo una atributo css height porcentual el navegador (Chrome) lo hace porcentual respecto a la amplitud de la pantalla. Así que en un teléfono en modo vertical se vería en el centro pero si el teléfono está apaisado se va fuera de la pantalla.

Alguna idea?

Gracias

Zafire · #2 (**permalink**) 20/08/2012, 18:11

Podrias solucionar eso con una tabla:

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> AQUI EL CONTENIDO </td>
</tr>
</table>

No se de que manera trabajastes el div de la imagen, pero el codigo que te mande es una tabla que centra totalmente vertical y horizontalmente cualquier codigo dentro de donde especifique.

Ourii · #3 (**permalink**) 20/08/2012, 18:43

Pues a mi no me funciona tu método... Ni tan siquiera poniéndolo tal cual sin la imagen dentro y justo después de <body>...

Zafire · #4 (**permalink**) 20/08/2012, 18:47

Cita:

Iniciado por Ourii

Pues a mi no me funciona tu método... Ni tan siquiera poniéndolo tal cual sin la imagen dentro y justo después de <body>...

Aveces no funciona por esto

<!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">

yo lo reemplazo simplemente por <html>

son como unas reglas que agrega el dreamweaver que no permiten ciertas funciones, yo las elimino y hasta ahora no me han traido ningun tipo de problemas.

Ourii · #5 (**permalink**) 20/08/2012, 18:50

No este no es el problema. Uso HTML5 con <!DOCTYPE html> aunque también he provado tan solo con <html> y no funciona tu solución :(

Zafire · #6 (**permalink**) 20/08/2012, 18:52

Cita:

Iniciado por Ourii

No este no es el problema. Uso HTML5 con <!DOCTYPE html> aunque también he provado tan solo con <html> y no funciona tu solución :(

Mmm que raro, bueno el codigo que te di anteriormente se me olvido ponerle el "center", aqui te dejo el codigo completo desde <html> para que te guies.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>

<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"> CODIGO AQUI </td>
</tr>
</table>
</body>
</html>

Si funciona porque lo probe, prueba agarrando solo el <table> a ver

Ourii · #7 (**permalink**) 20/08/2012, 18:59

Lástima, tu solución es buena (me funciona en una web simple) pero no me sirve ya que no funciona en mi página con jQuery Mobile integrado.

Gracias por lo ayuda pero no lo hemos resuelto.

Alguna otra sugerencia?

Zafire · #8 (**permalink**) 20/08/2012, 19:08

Cita:

Iniciado por Ourii

Lástima, tu solución es buena (me funciona en una web simple) pero no me sirve ya que no funciona en mi página con jQuery Mobile integrado.

Gracias por lo ayuda pero no lo hemos resuelto.

Alguna otra sugerencia?

Ah jeje no tengo mucho conocimientos con aplicaciones para mobiles, a la orden y suerte con eso a ver si alguien puede plantear una solucion.

Saludos.

Ourii · #9 (**permalink**) 23/08/2012, 03:07

Ya me han dado una solución usando jquery, $(window).height()

saludos :)