Foros del Web » Creando para Internet » CSS »

Maquetar un formulario dentro de una imagen de Iphone

Estas en el tema de Maquetar un formulario dentro de una imagen de Iphone en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/09/2008, 04:34
 
Fecha de Ingreso: marzo-2008
Mensajes: 79
Antigüedad: 16 años
Puntos: 0
Maquetar un formulario dentro de una imagen de Iphone

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
__________________
Jesus dijo: el que cree en mi tiene vida eterna[/B]
  #2 (permalink)  
Antiguo 19/09/2008, 05:10
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 16 años, 9 meses
Puntos: 9
Respuesta: Maquetar un formulario dentro de una imagen de Iphone

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.
  #3 (permalink)  
Antiguo 19/09/2008, 12:14
 
Fecha de Ingreso: marzo-2008
Mensajes: 79
Antigüedad: 16 años
Puntos: 0
Respuesta: Maquetar un formulario dentro de una imagen de Iphone

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?
__________________
Jesus dijo: el que cree en mi tiene vida eterna[/B]
  #4 (permalink)  
Antiguo 19/09/2008, 16:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Maquetar un formulario dentro de una imagen de Iphone

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 20/09/2008, 02:26
 
Fecha de Ingreso: marzo-2008
Mensajes: 79
Antigüedad: 16 años
Puntos: 0
Respuesta: Maquetar un formulario dentro de una imagen de Iphone

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
__________________
Jesus dijo: el que cree en mi tiene vida eterna[/B]
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 03:36.