What would be the best way to incorporate a search field to your nav

HTML & CSS
1

Hi,

I’m currently redesigning my site, I just finish the mock-up in Photoshop and last time I started thinking about my html/css layout and after looking at my layout I started wondering about something that I thought I had under control as to how to layout a page. I have read a few books and when I finish reading I feel like I know everything about CSS but the reality comes when I start coding, basically putting theory in practice, anyway.
What I have is a layout with a header, nav, main-content, side-bar and footer.

The header will hold the logo on the left and a contact button on the right, the nav will hold the navigation on the left and a search field on the right side and here is where I’m confused.

For the nav I’m using an <ul> list with all buttons floated to left (trying to follow what the books suggest and not use divs when not necessary) but my dilemma is the search box.

1-Should I include the search box to the <ul> list, in other words treated as a button?

2-Create a div put the search inside this div and float it to the right?

3-Use a form element put the input field inside and float it the right?

Oh, the nav will look like the one found in the Apple website, with the search box part of the nav.

Sorry if this question seems too simple or like a step by step question but this will help me to understand things better now and in the future.

Thanks a lot!

2

I would prob put it outside the ul/nav. Place the search in a form and input. And float the form to the right.

3

Thank you for your comments.

4

If you felt that “search” was a navigation item, you could have the form in the ul. Depends on you.


<ul>
<li><a href="">items...</a></li>
x all the items...
<li class="search">
  <form method="get" action="blah">
    <div>
      <label for="search">Search: </label>
      <input type="text" name="search" id="search">
      <input type="submit" value="Search">
    </div>
  </form>
</li>
</ul>

where the li’s are floated left… except li.search could be floated right.

5

Thanks a lot for your comments!