Using Search Form over existing graphic image..??

[tgregory_1964]

Hello All,

Newbie here. I've searched the forum, and not really found my answer (although, I'm sure it is here :-)).

I have made my first attempt at creating a three column website with header and footer using CSS. My website is http://www.crazyfangear.com . I know the CSS file really needs to be streamlined, as I was learning how to do things and some items could probably be removed or in simpler syntax, it is doing somewhat what I want it to do.

My current problem is using a site search box. The site I've created is from a previous Yahoo Store I used to own. I am trying to use the graphics as it still applies to the look I want. I think I have the correct code needed for the search box, but I can't figure out how to use it over the graphic. I thought of trying to do some king of image hot spot map, but don't think that is correct. I was also thinking of sometype of additional DIV that fits over the window and "Go" button. Just not sure what road to take.

Thanks in advance for any assitance or guidance,

Troy Gregory
http://www.crazyfangear.com

[sandman]

Best way is this:


#searchbox {
width: 163px;
height: 119px;
background-image: url(CFG_Masthead_LeftSideBar.gif);
background-repeat: no-repeat;
background-position: center;
}


Remove img tag from this div, and you may want to give it an id of 'searchbox' or something to control it selectively, like I have suggested in the css above.


<div class="image_float" id="searchbox">
<form id="search" action="search.html">
<input type="text"><input type="button" value="go">
</form>
</div>

Lastly - you may want to put all your assets into folders for easier maintenance. Images should be in images folder, css files should go in css folders... this is not required, but for organization its a must.

[tgregory_1964]

SandMan,

Thanks for the help. It is close, but I still am having problems getting the searchbox to sit right over the searchbox area of the graphic. Also, I already have the what looks like a go button in the graphic, is there a way to have the "go" button from your code to be invisible, but over the orange "Go" button on the graphic?

Not sure if I'm being clear. Also, I created the Left Nav graphic by creating one graphic from smaller graphics. Would it be easier, to use the smaller graphics? The graphic is broken down into three graphics with the searchbox and orange "Go" button being two graphics that are on the same line..

Thanks,

Troy

[tgregory_1964]

SandMan,

Also, I created an images and a css directory, and placed the images and css file into the proper directories.. Is that what you meant to clean the files up? Is there a proper naming convention for this directory structure that most developers use?

Thanks,

Troy