Search box on top of an existing graphic

Discussion in 'HTML & Website Design' started by texasdyme10, May 9, 2006.

  1. #1
    Hello all,

    Could someone tell me how to fix this issue. I have a graphic with a search box that I simply drew on there form Photoshop. How do i make this into a real html search box?

    thanks
     
    texasdyme10, May 9, 2006 IP
  2. jfilley

    jfilley Peon

    Messages:
    18
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Not exactly sure best way because can't see your graphic, but one idea is set your graphic without the search box as the background image of a table cell. Then place your html search box in that table cell and position it in the cell / over the graphic, with a transparent gif.

    Another way is splice the graphic around the search box, then place those using a table or Css around the search box in html.
     
    jfilley, May 9, 2006 IP
  3. danielbruzual

    danielbruzual Active Member

    Messages:
    906
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    70
    #3
    <div style="Background: url(image.jpg);">
    <form action="search.php" method="post">
    <input type="text" /><br />
    <input type="submit" value="Search"/>
    </form>
    </div>
    Code (markup):
    then use the css "position" attributes to place the item where they should be.

    The other option is to slice the image in image ready (while in photoshop click on "Edit in imageready") and there you can slice it, put the search box in a separate slice and then click "File> Save optimized> images and html". After that you can open the document you just created and remove the image corresponding to the search box and put in the real item.
     
    danielbruzual, May 9, 2006 IP
  4. texasdyme10

    texasdyme10 Peon

    Messages:
    48
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks everyone for your help. Got it working great. Thanks
     
    texasdyme10, May 11, 2006 IP