Foros del Web » Creando para Internet » Diseño web »

Formulario con Imagen de fondo

Estas en el tema de Formulario con Imagen de fondo en el foro de Diseño web en Foros del Web. Hola Quiero hacer un formulario, pero quiero que las celdas donde se escribe el texto, estén situadas en unos sitios muy concretos y que estos ...
  #1 (permalink)  
Antiguo 12/10/2008, 15:28
Avatar de dforo  
Fecha de Ingreso: septiembre-2008
Ubicación: Barcino
Mensajes: 525
Antigüedad: 9 años, 2 meses
Puntos: 18
Formulario con Imagen de fondo

Hola

Quiero hacer un formulario, pero quiero que las celdas donde se escribe el texto, estén situadas en unos sitios muy concretos y que estos no se muevan, dejo una imagen de ejemplo (no me deja)



Dejo el enlace pues:

http://img143.imageshack.us/my.php?image=ejemplogz5.gif

Como puedo conseguir eso?

Saludos y muchas gracias de antemano.
  #2 (permalink)  
Antiguo 12/10/2008, 17:05
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Formulario con Imagen de fondo

Pues tu pregunta no concuerda con el título de la misma, en el título dices que quieres un formulario con fondo, pero en la pregunta misma dices que quieres que las cajas de texto estén en una disposición determinada. Bien, te diré como hacer ambas cosas.

En cuanto a tener un fondo en el formulario, pues todo envuelvelo en un DIV que tenga un estilo con fondo, por ejemplo:

<DIV style="background-image: url(fond.jpg)">
Formulario
</DIV>

Nada más en cuanto a eso, en cuanto a como disponer los cuadros de texto de esa manera, se me ocurren un par de formas de hacerlo, pero creo que lo más simple es mediante tablas, de este modo:

<table align="center">
<tr> <td colspan="2"> <input name="text1" /> </td> </tr> <!-- Cuando quieres un solo cuadro de texto en una fila -->
<tr> <td> <input name="text2" /> </td> <td> <input name="text3" /> </td> </tr> <!Cuando quieras dos cuadros de texto en una fila -->
</table>

Es cuestión de que dispongas convenientemente las filas con dos o un cuadro de texto para que resulte el diseño que quieras.
  #3 (permalink)  
Antiguo 12/10/2008, 18:36
Avatar de dforo  
Fecha de Ingreso: septiembre-2008
Ubicación: Barcino
Mensajes: 525
Antigüedad: 9 años, 2 meses
Puntos: 18
Respuesta: Formulario con Imagen de fondo

Muchas gracias, y si, disculpa por el error en el enunciado del post.

Conoces otro metodo viable que sea sin el uso de tablas?, con div's de la altura de la celda de texto, uno tras otro hasta completar el alto total de la imagen?, o tal vez seria mejor hacerlo con flash, no?, el caso es que deberia validar y con tablas no va a validarme las paginas :(

Saludos y muchas gracias de todos modos.
  #4 (permalink)  
Antiguo 13/10/2008, 16:03
Avatar de ElJavista
Colaborador
 
Fecha de Ingreso: marzo-2007
Ubicación: Lima Perú
Mensajes: 2.231
Antigüedad: 10 años, 9 meses
Puntos: 67
Respuesta: Formulario con Imagen de fondo

Si puedes hacerlo con Flash, mejor, siempre con Flash los diseños resultan más bonitos, pero yo no te podría decir como hacer eso porque yo no sé Flash. A ver, si te voy a decir como hacerlo con capas, pero no entiendo porque dices que no te va a validar con tablas? de donde sacas eso? quien o qué te va a validar o no? El tema es que no es recomendable usar las tablas por un tema que a mi criterio es puramente dogmático. Simplemente porque las tablas están hechas para tabular datos no se debe diagramar usando tablas. Eso dogmático, cada vez que he hecho diagramación sin tablas, me he causado problemas, si me ha resultado, pero me trae más problemas, no me parece una solución preferible, porque las capas y divisiones todavía no pueden hacer todo lo que las tablas hacen.

Bien, si quieres hacerlo de todos modos te digo como, en realidad hay más de una manera, yo uso la propiedad float de CSS, este es un ejemplo:
<div style="float: left; width: 50px">
<input name="text1" />
</div>
<div style="float: left; width: 50px">
<input name="text2" />
</div>

Eso hace que dos elementos, en este caso los inputs estén en una misma línea, para hacer que uno solo esté en una linea, pues es más fácil, coloca un solo div, y auméntale la propiedad width, en este caso seria 100px. Espero que te sirva.
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 16:36.