SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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!
    Thank you very much!!!

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your comments.
    Thank you very much!!!

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    If you felt that "search" was a navigation item, you *could* have the form in the ul. Depends on you.

    Code:
    <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. #5
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your comments!
    Thank you very much!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •