Input box for search

[jweagley]

I am working on setting up a search for my new blog layout. I know exactly what I want, I know it can be done, but I’m running into one slight problem. I have set-up a background for the input box, but I have been unable to get the box and background to line up. I have tried just about everything I can think of (I haven’t done a ton with forms and I’m still in the process of learning the finer points of CSS).

Here’s what I have:

CSS:

Code:

#menu {
background: #000000;
height: 35px;
width: 960px;
}
#menu_items {
float: left;
width: 650px;
}
#search {
float: right;
margin-top: 4px;
width: 217px;
height: 26px;
color: #FFFFFF;
position: static;
display:inline;
background:url(../images/search_background.jpg) no-repeat 5px;
}
input.swap {
background-color:transparent !important;
border:0 solid transparent !important;
font-size:12px;
width: 170px;
}

HTML:

Code:

menu items

I haven’t cleaned everything up yet, so the code is still a little messy, but I think you get what I’ve done thus far. I attached the three files I reference in the code. Any help would be appreciated.

Thanks in advance.

JD

[Ramesh]

check out this code it works

HTML Code

<div id="menu">
<div id="menu_items">menu items</div>
<div id="search" style="background:url(images/search_background.jpg) no-repeat left top;"><form id="searchform" action="" method="get" name="">
<div id="rounded" style="float:left;"><img src="images/search_left.jpg" width="9" height="26" /></div>
<div id="in" style="float:left; padding:5px 0 0 0;"><input id="s" class="swap" type="text" value="Search" size="35" name="s" style="color: #999999;"/></div>
<div id="se" style="float:left;"><img src="images/serach_right.jpg" width="27" height="26" /></div>
</form></div>
</div>

CSS Code

#search {
float: right;
width: 217px;
height: 27px;
color: #FFFFFF;
border:solid 1px #FF0000;
}

[jweagley]

Thank you. It works perfectly.

[Author]

Posts