Forums

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:


#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:


<div id=\"menu\">
<div id=\"menu_items\">menu items</div>
<div id=\"search\"><form id=\"searchform\" action=\"\" method=\"get\" name=\"\">
<img src=\"images/search_left.jpg\" />
<input id=\"s\" class=\"swap\" type=\"text\" value=\"Search\" size=\"35\" name=\"s\" style=\"color: #999999;\"/>
<input class=\"go\" type=\"image\" alt=\"Go\" src=\"images/serach_right.jpg\"/>
</form></div>
</div>

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.

treehouse : what would you like to learn today?

Forums

Input box for search