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 11 of 11
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering a floated menu?

    I'm trying to create a horizontal drop down menu where the subnav is horizontal as well. I was using this tutorial: http://www.cssnewbie.com/example/css...orizontal.html

    However, I can't figure out how to center the nav and subnav. I'm guessing it's because of the floats? Is there a way to accomplish this same style drop down menu but have everything centered?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Take a look at the technique given at http://matthewjamestaylor.com/blog/b...rowser-support
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! Yeah I saw that post (http://matthewjamestaylor.com/blog/c...own-menus.html). But the subnav is vertical, not horizontal. How could I make it horizontal and still centered?

  • #4
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When I want my menu - or any object centered horizontally I use:
    margin 0 auto; /* some older IE doesn't work though */

    I don't know if that is what you mean

  • #5
    New Coder
    Join Date
    Feb 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    margin:0 auto; doesn't seem to work in the first example because the menu is position absolutely.

    What about making the subnav in the link above horizontal instead of vertical?
    Last edited by bryan868; 06-17-2010 at 05:05 PM.

  • #6
    New Coder
    Join Date
    Feb 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, I did this from scratch myself. It's working except for in IE7. Any idea why?

    http://bryanharley.com/test.html
    Last edited by bryan868; 06-17-2010 at 10:59 PM.

  • #7
    New Coder
    Join Date
    Feb 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I have it narrowed down to this:

    Code:
    .nav ul li:hover ul{
    	position: absolute;
    	display:block; 
    }
    That makes the subnav appear on mouseover. It formats correctly except for in IE7. In IE7 the subnav just lines up along the top nav element instead of appearing below it. If I change it to:

    Code:
    .nav ul li:hover ul{
    	position: absolute;
    	display:inline; 
    }
    Then it replicates the incorrect formatting in all browsers. So does this mean IE7 doesn't understanding that display:block; or it's showing it as display:inline;? Why? Or am I wrong? How can I fix this?

  • #8
    New Coder
    Join Date
    Feb 2010
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone?

  • #9
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    I'm just wondering why you have absolute positioning being used and haven't told the browsers where?

    These may help...

    Drop-Down Menus, Horizontal Style: http://www.alistapart.com/articles/horizdropdowns/
    The Right Way to Make a Dropdown Menu: http://www.sitepoint.com/blogs/2009/...dropdown-menu/
    ☠ ☠RON☠ ☠

  • #10
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    You can center a block element by adding:

    margin:0 auto;

    This gives it automatic left and right margins thus centering the block, however this only works with a set width!

    You can center an inline element by adding:

    text-align:center;

    To it's parent container...

    Now if it's got an unknown width, you could probably use inline-block on the anchors (sort of a variation between the 2) allowing for text-align center to be used but this would require a few hacks for the older browsers...

  • #11
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Quote Originally Posted by bryan868 View Post
    margin:0 auto; doesn't seem to work in the first example because the menu is position absolutely.

    What about making the subnav in the link above horizontal instead of vertical?
    Looks like poster is having problems with that.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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