SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal navigation links

    Hi, I apologise if this is elsewhere but I haven't been able to find it so far. I'm building a site and want my navigation links to be listed horizontally along the top, rather than vertically down the side, but I can't figure out how! Please help! If it helps, I'm using XHTML 1.0 and CSS.

    Cheers!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    GGive the navigation links (presumably <li>) a float:left; or display:inline;

    Test in all browsers to make srue you have not triggered any bugs (IE6 *cough*) .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you use display: inline; make sure you also use white-space:nowrap; on the list items, and then float the anchors. You'll also have to give the list an equal height and line height, then give the anchors the same height.

    And while I'm at it, welcome to SitePoint!

  4. #4
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, for the help and the welcome! I'd found display:inline in another site's markup but couldn't get it to work, but noticed they were using HTML 4.0 and tables for the layout design, so wasn't sure if it only worked for that. I'll see if I can get it to work now though, thanks! Other than that the rest of my site seems to be going well, so fingers crossed

  5. #5
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what I'm doing wrong, but I'm trying display: inline; but they're still appearing as a vertical list

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Did you give it to the <li>'s? Not the actual <ul> or <a> inside of the <li>?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have now thanks, I eventually worked out that's what I need to do, now just to do some further tweaks to get it look right


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
  •