html - help positioning the search bar -


I have been using jquery for my navigation bar and UI effects while using an uncredded link. It works fine. Now I have designed a search bar that matches the theme of the bar and place it on the right side of the nav bar. Kinda like the Vimeo website.

The problem is that I can not include it in the same list because I want the jquery effect not to be applied in the search bar, how do I get it on the right side of the nav bar Keep it

I tried CSS, but did not work

  .search {background-image: url ('search' jpg '); Margin top: heirs; Margin-left: heirs; Width: 200px; Height: 40px; }  

here goes html

  & lt; Div class = "search" & gt; & Lt; Input type = "text" id = "searchField" /> & Lt; Img src = "go.jpg" alt = "search" onclick = "warning ('you clicked the search button')" /> & Lt; / Div & gt;  

There are some options best option depends on your entire layout Here's the horizontal navigation list Do two basic CSS implementations and inline search with each other.

HTML

  & lt; Div id = "navigation" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div class = "search" & gt; & Lt; Input type = "text" id = "searchField" /> & Lt; Img src = "go.jpg" alt = "search" onclick = "warning ('you clicked the search button')" /> & Lt; / Div & gt; & Lt; Br style = "clear: both;" / & Gt; & Lt; / Div & gt;  

CSS Float

  # Navigation UL {list-style-type: none; Margin: 0; Padding: 0; } #navigation ul li {List-style-type: none; Margin: 0; Padding: 0; Swim left; } #Navigation ULL {Display: Block; Height: 40px; Width: 50px; }. Search {background-image: url ('search.jpg'); float right; Width: 200px; Height: 40px; }  

CSS absolute

  #navigation {status: relative; } #navigation UL {list-style-type: none; Margin: 0; Padding: 0; } #navigation ul li {List-style-type: none; Margin: 0; Padding: 0; Swim left; } #Navigation ULL {Display: Block; Height: 40px; Width: 50px; }. Search {status: complete; Background Image: URL ('search.jpg'); Top: 0; Correct: 10px; Width: 200px; Height: 40px; }  

Comments