Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/05/2015, 13:17
andreiya
 
Fecha de Ingreso: diciembre-2013
Mensajes: 37
Antigüedad: 10 años, 4 meses
Puntos: 1
Colocar textos en imagenes para poder imprimir

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