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 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    16
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Some help with nav menu

    If you look at the navgation menu here http://tinyurl.com/axjw752 you can see it is offcenter, with gap on the right-end. This is because I made it a fixed width, which I have to do for another reason. if I don't make it fixed width, it centers because of padding of the nav elements. How can I made the elements center when it has fixed width?

    Thanks.

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    Hey Starmin,

    That is explained in the last tutorial linked from my signature page.
    Last edited by Frankie; 02-05-2013 at 01:11 PM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    all you gotta do is add text align center to the ul#nav div like so

    Code:
    ul#nav { text-align:center; }
    and add display inline block to the LI and remove your float ( i did this by using float:none, you could simply just remove the code. )
    Code:
    ul#nav li { float:none; display:inline-block; }

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    16
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    all you gotta do is add text align center to the ul#nav div like so

    Code:
    ul#nav { text-align:center; }
    and add display inline block to the LI and remove your float ( i did this by using float:none, you could simply just remove the code. )
    Code:
    ul#nav li { float:none; display:inline-block; }
    When I tried the above solution the menu bar was correct, but the dropdown menus appeared horizontally istead of vertical.

  • #5
    New Coder
    Join Date
    Dec 2012
    Posts
    16
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I've been playing to try make it right, putting text-align: center in different places, but all I can do is make the dropped menus change align, not the menu bar itself! I can't get it to do like I did earlier....i'm so confused now

    Frankie I looked at your tutorial and if I'd known of it sooner it would've been good. now, as your tutorial says, I can't mix up existing menu with yours so solutions from tutorial will not help?
    Last edited by starmin; 02-06-2013 at 01:35 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think aaronhockey_09's solution is the correct one. This certainly works in Firebug.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    Quote Originally Posted by starmin View Post
    Frankie I looked at your tutorial and if I'd known of it sooner it would've been good. now, as your tutorial says, I can't mix up existing menu with yours so solutions from tutorial will not help?
    They will if you are willing to start anew from scratch. Which should take you no longer than half an hour, time that you probably already spent on trying to fix it. And time that you will probably spend again on trying to fix it again...
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    341
    Thanks
    3
    Thanked 36 Times in 36 Posts
    Quote Originally Posted by SB65 View Post
    I think aaronhockey_09's solution is the correct one. This certainly works in Firebug.
    Yep, but not in IE7 because that does not support display:inline-block.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Posting Permissions

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