photoshop y html

[Zendar]

Hola me pasaron una imagen en photoshop que tiene un campo para ingresar texto. Lo que no se como hacer es como transformar ese campo de texto en un input type text para que el usuario ingrese datos. En conclucion debe quedar con el diseño q me pasaron pero apto para que el usuario ingrese datos y puedan ser manipulados.

Gracias!

[Jask]

Podrías optar por recotar el diseño y dejar ese campo para, en el HTML, incluir el input, manteniendo el diseño. Eso se llama maquetación, te recomiendo que te leas algún artículo :)

Saludos

[almez]

Depende como quieras el diseño final, de forma facil puedes utilizar position:absolute de CSS, pero como bien te dice jask es una cuestión de maquetación y hay mucha información en el foro y en la red.

[dargorg]

Zendar, las soluciones que te dan son las correctas, pero te lo voy a poner un poquito más fácil. Digamos que tienes tu imagen y mide 400px de ancho y 500px de alto, y que el campo se encuentra situado 200px a la izquierda y 100px de margen superior dentro de la imagen. La solución para tu problema sería:

El HTML

Código:

<form action="" method="post" name="">
<div id="imagen">
<fieldset>
<input type="text" id="campo" value="" />
<input type="submit" value="Enviar" />
</fieldset>
</div>
</form>

En CSS:

Código:

#imagen
{
     background: transparent url('url-de-la-imagen.jpg') no-repeat top left;
     height: 500px;
     position: relative; /* Importante */
     width: 400px;
}

#campo
{
     left: 200px;
     position: absolute; /* Importante */
     top: 100px;
}

Es muy importante que al div que tenga la imagen como fondo tenga la línea position: relative; y el elemento del formulario tenga position: absolute; Así, podrás decirle en que coordenadas con respecto a la imagen quieres que se ubique.

Espero haberte sido de ayuda,

[Zendar]

Muchisimas gracias a todos! me han sido de mucha ayuda!

Gracias!

[danneg]

bastara con solo poner al input tu imagen como fondo??

Código CSS:

input[type="text"] { background: #color url("tu_imagen.png") no-repeat; }
 

si, creo que con eso basta,sin ensusiar tanto tu html y tu css, y siendo una muy buena practica para maquetas futuras

[ayukkonen]

Iniciado por danneg

bastara con solo poner al input tu imagen como fondo??

Código CSS:

input[type="text"] { background: #color url("tu_imagen.png") no-repeat; }
 

si, creo que con eso basta,sin ensusiar tanto tu html y tu css, y siendo una muy buena practica para maquetas futuras

No... Una cosa es poner la imagen de fondo en una capa, y luego añadir el input y darle una posición para que quede acorde con la imagen, y otra cosa muy distinta es poner de fondo de los campos input la imagen...

Si hiciese eso que dices, aparecería la imagen en la casilla input al completo, y según entiendo... Él no quiere eso, quiere situar el input a la altura de la imagen dónde aparece el campo dibujado.

Saludos.

[danneg]

amm... pues para eso existen las unidades de medidas fijas, pixeles

tambien existen los atributos margin y padding, que serian la mejor practica, en lugar de ensuciar el codigo de capas inutiles

si haces un buen uso de estos atributos, el resultado sera como el quiere, el margin para dar espacio entre elementos y el padding para dar altura en el texto, ademas puedes usar width y height para que tu input cresca hasta el tamaño de la imagen