Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Display search bar and links side by side (list or float?)

    Hi guys,

    being fairly new to this, Im starting to pull my hair out trying to get this to work. Im more of a 'graphic' designer than web, but anyway, on to the problem.

    I have this menu with a search bar and links that i want to display underneath it:

    http://www.users.on.net/~plaedien/links.png

    Here is what i have at the moment:

    http://www.users.on.net/~plaedien/pd...ndex-TEST.htm#


    the navigation works great, the logo lines up, but i cannot figure out how to get the search bar, search button and three icon links to line up horizontally.

    I thought I could float them all as separate DIVs, but i couldnt seem to get that to work. I noticed other sites that had used a <li> to do this as well, but again im not sure i can nest a <div> inside a <li> element - especially the search bar.

    Any suggestions would be appreciated!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello plaedien,
    Floats are how you usually get different elements beside each other. Have a try with this - .search ul li {float: left;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    plaedien (11-16-2011)

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    and there it is!

    I cant believe i didnt pick up on that tiny little detail- thank you


  •  

    Posting Permissions

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