help with menu bar search submit image

[xcoderx]

ok in my menu bar i want to add a search box with an small round submit button but it just do not seem to happen. could someone help me out?

 

below is the coding to my menu css and the search css with the html

 

<div id="menu">
	<ul>
		<li class="selected"><a href="#">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="#">Faqs</a></li>
		<li><a href="#">Terms</a></li>
		<li><a href="#">Register</a></li>
		<li><a href="#">Login</a></li>
		<li><a href="#">Contact</a></li>

	</ul>
	<div id="searchAdvance"><a href="#"> Advance Search </a></div>

<div id="searchbox">
        <form action="#" method="get">
		<input type="text" name="username" value="" />
		<div id="searchSubmit">
		<input type="submit" name="search" value="" />
		</div>
		</form>
</div>

</div>
</div>




#menu {
float : left;
height : 51px;
width : 770px;
padding-left : 30px;
background : url(images/menu.png) no-repeat;
}
#menu ul {
margin : 0;
padding : 0;
list-style : none;
line-height : normal;
}
#menu li {
float : left;
}
#menu ul li a {
display : block;
background : url("images/menu_sep.gif") no-repeat 100% 0%;
float : left;
height : 36px;
width : 70px;
margin-right : 1px;
text-decoration : none;
font-size : 1.1em;
font-weight : bold;
color : #7be0a9;
padding-top : 16px;
text-align : center;
}
#menu li a:hover {
color : #1478cb;
background : url(images/hover_m.png) repeat-x;
}
#menu ul li a:visited {
color : #ffffff;
}
#menu ul li.selected a {
background : url(images/menu_a.gif) repeat-x;
font-weight : bold;
color : #1478cb;
}

#searchbox
{
float:right;
margin-top: 2px;
margin-right:80px;
height:21px;
width:180px;
background:url("images/search.gif") no-repeat;
color:ff0000;
}

#searchbox input
{
background:none;
border:none;
width:165px;
height:18px;
margin:0;
margin-left:7px;
margin-top:2px;
/*padding: 2px 7px 0px 7px;*/
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
}

.searchSubmit{
background:url("images/searchSub.gif") no-repeat;
width: 5em;
height: 1.5em;
}

#searchAdvance{
float:left;
margin-left:15px;
font-size:12px;
}

#searchAdvance a{
color:#ffffff;
}

 

[attachment deleted by admin]

[xcoderx]

above was the button for search submit now for example menu bar image

 

[attachment deleted by admin]

[xcoderx]

this is the outcome im looking for but it just do not happen

 

[attachment deleted by admin]

[ignace]

<div id="menu">
  <ul>
    <li class="selected"><a href="#">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="#">Faqs</a></li>
    <li><a href="#">Terms</a></li>
    <li><a href="#">Register</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<div id="search">
  <form action="#">
    <input type="text" name="username" value="" />
    <input type="submit" name="search" value="" />
  </form>
</div>

 

#menu, #search { display: block; float left; }

[xcoderx]

thanks for the replay bro i already managed it i did it  :-)

 

<div id="menu">

<ul>

<li class="selected"><a href="#">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="#">Faqs</a></li>

<li><a href="#">Terms</a></li>

<li><a href="#">Register</a></li>

<li><a href="#">Login</a></li>

<li><a href="#">Contact</a></li>

 

</ul>

<div id="searchAdvance"><a href="#"> Advance Search </a></div>

       

        <form action="#" method="get">

<div id="searchbox"><input type="text" name="username" value="Search..." /></div>

<div id="searchsubmit"><input type="image" src="style/images/searchSub.gif" name="search" value="ok" /></div>

        </form>

</div>