Обекти върху картинка

[b0nb0n40]

Здравейте! Ето това ми е формата

<html>
<head>
<title>Анонимен E-Mailer</title>
<body background="bg.jpg"> 
</head>
<center>
<body>
<form action="mail.php" method="POST">
  <input type="text" name="email_na_jertvata" value="E-mail на жертвата" />
  <br />

<input type="text" name="otnosno" value="Относно" /><br />

<textarea name="syob6tenie" value="Съобщение" cols="20" rows="5"  />
</textarea>
<br />

<input type="submit" value="Изпрати" />

</form>

</body>
</center>
</html>

Ето това ми е картинката

Ето ми я и директната форма
http://mail.g0sk0.tk/open.php

Как да преместя input полето и textarea-та върху картинката със същите размери и на същите места, които съм изрязал. И също така вместо бутона ИЗПРАТИ да е

 

[d0oMch0]

Значи за мен лично това е най-удачното решение пък както прецениш :

<html>
    <head>
        <title>Анонимен E-Mailer</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
        <style type="text/css">
            .email
            {
                width: 211px;
                height: 38px;
                margin: 0 0 1em 0;
                padding-left: 7px;
                padding-top: 5px;
                border: 0px ;
                background:url('images/input.gif') no-repeat right top;
            }
            .otnosno
            {
                width: 211px;
                height: 38px;
                margin: 0 0 1em 0;
                padding-left: 7px;
                padding-top: 5px;
                border: 0px ;
                background:url('images/input.gif') no-repeat right top; 
            }
            .msg
            {
                width: 211px;
                height: 142px;
                margin: 0 0 1em 0;
                padding-left: 5px;
                padding-top: 15px;
                border: 0px ;
                background:url('images/textarea.png') no-repeat right top; 
                resize:none;
            }

            body{
                background:url('images/logo_top.gif') no-repeat;
                background-color: black;
            }
        </style>
    </head>
    <body>
    <center>
        <form action="mail.php" method="POST">
            <input type="text" name="email_na_jertvata" value="E-mail на жертвата" class="email" maxlength="20" />
            <br />
            <input type="text" name="otnosno" value="Относно" class="otnosno" maxlength="20"  />
            <br />
            <textarea name="syob6tenie" value="Съобщение" cols="20" rows="5" class="msg">
            </textarea>
            <br />
            <input type="image" src="images/button.jpg"/>
        </form>
<img src="images/logo_bottom.gif"/>
    </center>
</body>
</html>

Значи това е кода и обяснявам:
Първо вземаш картинката която си дал и с фотошоп я режеш (slice tool), изваждаш си инпута , текст ареата, лого горе и лого долу.
След това вземаш кода по-горе и си ти.
Аз лично препоръчвам css-a да е в отделен файл(по-практично е ).
В моя пример снимките се намират в папка images затова пътя към тях е images/ne6tosi.jpg !
Тук съм качил всичко ако така ще ти е по-лесно !
http://dox.bg/files/dw?a=393e91cd44
Успех !

 

[b0nb0n40]

Не бях се замислял да го направя с css +1