Colocar textos en imagenes para poder imprimir

andreiya · #1 (**permalink**) 18/05/2015, 13:17

Hola chic@s, estoy aprendiendo programación html/javascript/css.
Ya tengo lo muy básico de los dos primeros y ahora voy por el css.

Tengo una página super básica que tiene una imagen. Esta imagen es la de un formulario(hecho con photoshop por una amigo) que se rellenará con lo que se escriba en un formulario html normal y corriente.

Lo tengo así porque quiero pegar en la imagen el texto del formulario e imprimirlo en papel.

Con mis conocimientos he conseguido hacer todo esto salvo lo de colocar el texto. Éste es el código html(aquí no incluyo el formulario, esta es la página para la imagen y los textos que quiero imprimir):

Código HTML:

<html>
<head>
 
</head>

<body >
<div > 
<img src="ImagenDeUnFormulario.png" alt="" >

<p id="nombre" style="position:absolute; top: 150pt; left: 90; margin: 50pt;  ">
NombreDesdeFormularioHtml
</p>
<p id="apellido" style="position:absolute; top: 250pt; left: 90; margin: 50pt;  ">
ApellidoDesdeFormularioHtml
</p>
<p id="Direccion" style="position:absolute; top: 350pt; left: 90; margin: 50pt;  ">
DireccionDesdeFormularioHtml
</p>

</div>
</body>
</html>

Para las pruebas lo estoy haciendo desde el Html, la idea es hacer desde Css la colocación del los textos.

La pregunta es saber cómo se localiza la posición de pantalla exacta que quiero para colocar el texto? Llevo toda la tarde tocando medidas a ojo, pero supongo que habrá alguna forma mejor de hacerlo, esto lo veo muy pesado.
¿Alguna idea? Besitos

AngelKrak · #2 (**permalink**) 18/05/2015, 20:07

no entendi muy bien que es lo que quieres exactamente?

NueveReinas · #3 (**permalink**) 19/05/2015, 06:36

Lo primero que puedo decirte es que no se entiende qué buscas.

Por otra parte, no es bueno aplicar los estilos directamente en HTML, para eso se usan las hojas de cascada de estilo (CSS).

andreiya · #4 (**permalink**) 19/05/2015, 11:45

Gracias chicos por la molestia en contestar y perdón, en mi cabeza se entendía, es cierto que es difícil de explicar.
Imaginemos una página HTML en la que hay una imagen incrustada en un DIV, por ejemplo esta sacada de internet:

Luego tengo una serie de inputs en código HTML que al ser rellenados colocarán el texto encima de los campos de esa imagen, como si estuvieras rellenando la imagen de ese formulario que he posteado, cosa que es imposible porque es una imagen.

En definitiva, pego el contenido de los INPUTS encima de la imagen y a la hora de imprimir parece como si se hubiera rellenado el formulario.(ESE ES EL FIN, QUE SE IMPRIMA EL FORMULARIO CON EL TEXTO PEGADO SIN QUE SE NOTE MUCHO)

Lo que pregunto es cómo averiguar las coordenadas para poner los textos sobre los campos del formulario. Esto lo quiero hacer en un CSS.

Espero que se entienda ahora la pregunta, estoy viendo tutoriales desde ayer y todavía estoy verde.

pzin · #5 (**permalink**) 19/05/2015, 13:09

¿Y por qué no haces un formulario así? Ya son ganas de complicarse la vida.

andreiya · #6 (**permalink**) 19/05/2015, 13:23

Cita:

Iniciado por pzin

¿Y por qué no haces un formulario así? Ya son ganas de complicarse la vida.

Gracias por contestar. Tiene que ser asi porque no es un formulario, es una imagen predefinida que uso como plantilla, he puesto una imagen de formulario para que se entienda el concepto. La imagen viene con escudos, anagramas, figuras, etc . Por eso tiene que ser como yo digo. Estoy en ello a ver si encuentro la solucion porque calcular la posicion de los textos a ojo estoy tardando la vida.

pzin · #7 (**permalink**) 19/05/2015, 13:35

Pues enséñanos la imagen es. A ti puede parecer la única solución, pero tal vez no lo sea.

andreiya · #8 (**permalink**) 19/05/2015, 13:46

Es verdad que puede haber otra solucion. La pondre mañana sin falta. Gracias cielo por contestar.