SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Horizontal Menu

  1. #1
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal Menu

    Ok, hopefully this is going to be an easy enough question to be answered.

    When creating a horizontal nav, is there a best way to do so?

    The way I learned would have been to float the nav to the left and use margins/paddings to space them out until they reached a certain point (usually the width of the site).

    I found out on some sites I've seen that some nav's are created using relative positioning and that each word in the menu is set to a certain amount of pixels, is there much benefit in doing it this way?

    Thanks.
    Al.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Actually I think you have confused positioning the menu with getting the menu items lined up horizontally.


    depending on what the situation is, you can get menu items to line up using the following ON MENU ITEMS (LIs) not necessarily on the menu container (UL) itself :

    float:left; (on rare instances float:right could be what you need)
    OR
    display:inline-block;
    OR
    display-inline ( if you dont need the items to have specific width or height, padding, margin, etc.. this is actually a good solution)

    Hope that helps.

  3. #3
    SitePoint Zealot allanlud's Avatar
    Join Date
    Jul 2012
    Location
    Meath, Ireland
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, I still have a lot to learn...

    I'm not sure if I explained properly in my post above, but basically when I want to create a horizontal nav, I would have display: inline; on the 'ul', then float the 'li'(s) to the left and space them out with margins & padding.

    But the other way that I seen a horizontal menu (I can't find the CSS) was that the li's were positioned relatively and given distances from the left point of the ul (I think). So the first li (lets say 'li-01') had a distance of 20px then the next ('li-02') had a distance of 120px, I think it was done like that... I will have to go and find that CSS code.


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
  •