Maquetar un formulario dentro de una imagen de Iphone

[migquintana]

Que tal colegas!

Tengo que encajar un grupo de formularios (cuestionarios) dentro de la imagen de fondo de un Ipod. La imagen del iphone es un png que debe ocupar una sóla pantalla (sin scrolls)

Dentro de la imagen de fondo debe estar el formulario.

Tengo formularios algo largos y entonces no encajan bien dentro de la imagen.

Opté por meter el form dentro de un iframe.

Me gustaría saber como hacer para que la imagen de fondo siempre sea el 100% de la pantalla sion importar la resolución. También que el formulario siempre esté en el centro de la imagen.

Acepto críticas, mejoras en el diseño, colores, etc.

Esto es lo que llevo:

http://www.globalcasa.eu/m/quest.php

[Nathan_1979]

Nunca la pongas en el body, ya que no podrás controlar la imagen ni lo que contiene.
La imagen del ipod de fondo en una capa nueva, que estará centrada en el body.

Despues de esto es meter el formulario dentro de otra capa y centrarla de nuevo dentro de la del Ipod. Con etiquetas label e input usando '%'.

Si quieres que la imagen sea liquida por así decirlo tendrás que hacer 3 piezas. Repetir la del medio y fijar las esquinas.

Saludos.

[migquintana]

Nunca la pongas en el body, ya que no podrás controlar la imagen ni lo que contiene.
La imagen del ipod de fondo en una capa nueva, que estará centrada en el body.

Despues de esto es meter el formulario dentro de otra capa y centrarla de nuevo dentro de la del Ipod. Con etiquetas label e input usando '%'.

Si quieres que la imagen sea liquida por así decirlo tendrás que hacer 3 piezas. Repetir la del medio y fijar las esquinas.

Saludos.


Gracias Nathan,

La imagen de fondo completa debe estar en el area visible, es decir la tengo que ver toda sin necesidad de usar scrolls. El formulario es el que llevaría el scroll y entonces la imagen está quieta en el fondo.

Con lo que me dices pareciera que la imagen va a crecer según el tamaño del formulario, no?

Por otra parte, a qué te refieres con imagen líquida?

Me gustaría que no existiera mucho contraste en la integración, tener alguna sombra o bordes suaves

Se te ocurre algo?

[kseso?]

Hola Migquintana
Antes de nada, mira a ver si puedes sacar provecho de este tema
Imagen líquida, o que crezca en función de lo que le coloques dentro:
Segmentas la imagen del ipod (según la orientación que tienes en tu enlace):
La parte izquierda que llegaría, incluyendo, la curva de la esquina
Una central de unos pocos px de anchura que se repetirá en x, que servirá de fondo al div que contendrá tu formulario.
Y una tercera que será la parte derecha de la imagen, desde la curva hasta el final.
Si utilizas la imagen que te he enlazado, la imagen de la izquierda y derecha abarcará hasta donde comienza la 'pantalla' del aparato.
De esta forma, al reducir o aumentar la ventana del navegador, el ipod se hace más pequeño o mayor (hasta cierto punto)
Pero esto me suena más a diseño que a css (sólo hasta cierto punto).
Un saludo

[migquintana]

Gracias, muy buena la información.

Lo que estoy pensando es que si la imagen de fondo reescala y no lo hace el formulario interior, entonces pierdo el esfuerzo.

Es muy importante que se resscale todo al tamaño de la ventana, normalmente veo el uso de scrolls.

Me están proponiendo ese diseño en flash y quedarme sólo con la programación