Results 1 to 7 of 7

Thread: Horizontal menu

  1. #1
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizontal menu

    Hi,
    I'm trying to make an horizontal menu with some options to the left and some options to the right, like this:

    Option1 Option2 Option3 ............................................ Option4 Option5


    I've done a list (<ul>), formatted with css, but I don't know how to move the 2 options to the right.

    Can anybody give me an idea?
    Thanks very much

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Just guessing but you might be able to style those 2 buttons with float:right (all <li>s with a specific width and set as display:inline-block)

    If you need more help, please post a link to your web page.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your answer. I've tried to add what you have suggested, but the result has been that the buttons has been changed their order, instead of displaying them for left to right, they have been displayed right to left, but in the same position.

    I've saved part of the web in this link.
    http://www.tepui.cat/francana/

    Thanks very much.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    It works for me - the left hand buttons set as float:left; and the right-hand buttons set as float:right;

    View the source code to check the logic - I've stripped it back and kept it really simple so you can see what I've done. Just apply the CSS to your own menu. http://fofwebdesign.co.uk/template/_...right-menu.htm
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Uau!!! this is what I really want. I'm going to take a look at the source code and try it. Thanks very much

  6. #6
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Perfect!! problem solved thanks to you

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,024
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Glad you sorted it
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Horizontal menu, get rid of extra space and center menu
    By bo0bytrap in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-11-2012, 08:53 PM
  2. Vista Aero Buttons Menu Variation (Horizontal CSS Menu)
    By waskol in forum Submit a DHTML or CSS code
    Replies: 0
    Last Post: 05-15-2009, 02:40 AM
  3. Replies: 2
    Last Post: 09-26-2008, 02:49 PM
  4. Replies: 2
    Last Post: 11-13-2007, 09:15 AM
  5. Making CSS Horizontal Hover Menu a vertical menu?
    By Clueless2005 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-04-2005, 04:01 AM

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
  •