SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: .psd and html

  1. #1
    SitePoint Member help's Avatar
    Join Date
    Apr 2003
    Location
    kuwait
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .psd and html

    Hi,

    First post

    Here is my problem. Ok I have created a site and its in .psd format. I want to add a form to subit data to lets say x.cgi . But the thing is i want to draw the form fields in and to change the standard search button to another pic that i have drawn in photoshop.

    Basically i want the search filed and button in the form to look exactly to what i have drawn in photoshop.

    Any suggestions?

    Thanks...

  2. #2
    SitePoint Enthusiast Novapages's Avatar
    Join Date
    Mar 2003
    Location
    Utah
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by help
    Hi,

    First post [img]images/smilies/smile.gif[/img]

    Here is my problem. Ok I have created a site and its in .psd format. I want to add a form to subit data to lets say x.cgi . But the thing is i want to draw the form fields in and to change the standard search button to another pic that i have drawn in photoshop.

    Basically i want the search filed and button in the form to look exactly to what i have drawn in photoshop.

    Any suggestions?

    Thanks...
    Hi there. My suggestions woudl really depend on what the picture looks like. Basically you're going to have to do some slicing and dicing. Can you post a small version of it?

  3. #3
    SitePoint Member Baines's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Submit Button Image

    Hello "Help"

    The submit button is simple enough......

    Code:
    <input type="image" src="your-image.gif">
    Making the input field look different is a little more tricky.
    I guess you can do much of it with CSS but it depends on exactly what you want it to look like. Maybe you can surround a standard input field with table cells and "bolt on" your fancy borders..... just a thought.

    Regards

    Baines

    Quote Originally Posted by help
    Hi,

    First post

    Here is my problem. Ok I have created a site and its in .psd format. I want to add a form to subit data to lets say x.cgi . But the thing is i want to draw the form fields in and to change the standard search button to another pic that i have drawn in photoshop.

    Basically i want the search filed and button in the form to look exactly to what i have drawn in photoshop.

    Any suggestions?

    Thanks...

  4. #4
    SitePoint Member help's Avatar
    Join Date
    Apr 2003
    Location
    kuwait
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Novapages
    Hi there. My suggestions woudl really depend on what the picture looks like. Basically you're going to have to do some slicing and dicing. Can you post a small version of it?

    Here is the small .psd http://www.q8portal.com/5.psd . I would like to know how to allow it to submit the data to lets say x.cgi .

    What would i have to do if i had two fields to submit using one submit button?

    Thanks... i wasnt expecting a quick reply.... this seems to be a very good community forums :P
    Attached Images Attached Images
    • File Type: psd 5.psd (47.3 KB, 12 views)
    Last edited by help; Apr 5, 2003 at 06:53.

  5. #5
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably all you need:
    http://www.ku.edu/~acs/docs/other/forms-intro.shtml

    Bit long, you can scroll down to some code if you want.

    I assume you can slice images, and here is some code to get an input box:

    <input name="searchbox" id="searchbox" style="width: 100px; border: 1px solid black;" />

    hth,
    Douglas
    Hello World

  6. #6
    SitePoint Member Baines's Avatar
    Join Date
    Apr 2003
    Location
    UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Help

    This is very rough and ready but it does everything you need.

    There are two images...... the "Go" button" and the "orange fade".

    I've built it in to a table but if you are in to CSS I guess you could place all the elements that way.

    Anyhow, take a look at http://homepage.ntlworld.com/plsmith/

    The htlm is here.....

    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
    
    <form action="x.cgl" method="post">
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    	<tr>
    		<td class="orange_background" align="right">
    		<b>Search</b>&nbsp;
    		</td>
    		<td class="orange_background">
    
    			<input type="text" size="25" name="search_term">
    			<input type="image" src="images/go_button.gif" width="20" height="20">
    
    		</td>
    	</tr>
    
    	<tr height="21">
    		<td colspan="2" background="images/orange_fade.jpg">
    		</td>
    	</tr>
    </table>
    
    </form>
    
    </body>
    </html>
    And the CSS file (really only used to make the input box a little smaller) is here......

    Code:
    body{	font:8px verdana, arial, helvetica, sans-serif;
    	color: #ffffff;
    	background: #000000;
    	margin=0px;
    }
    
    
    td {
    	font-size: 12px;
    	color: #ffffff;
    }
    td.orange_background {
    	background-color: #FFA800;
    }
    
    input {
    	font-size: 8px;
    }
    To send more than one field, simply add more INPUT tags and remember to give them unique names.

    Hope it helps

    Cheers

    Baines


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •