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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts

    List-based navigation menu

    My list-based navigation menu adds a new link to the right of the group for every list element/link I add.

    eg.
    Code:
    <ul>
    <li>LINK 1</li>
    <li>LINK 2</li>
    <li>LINK 3</li>
    <ul>
    becomes


    LINK 1 - LINK 2 - LINK 3

    Great! But I want these links centrally aligned to the page. The css for this menu is by default:

    Code:
    #Menu {
    background:transparent none repeat scroll 0 0;
    border-bottom:1px solid #CCCCCC;
    clear:both;
    display:inline;
    float:left;
    height:40px;
    position:relative;
    width:980px;
    z-index:1;
    I've tried putting the list html into a centrally aligned div to no success... it just sits left-aligned. When I take the float:left; out it stacks the links one on top of the other like a list traditionally does.

    What do I need to alter to get it to sit in the middle? I don't want to use a position because I'd have to change it every time I added a new link.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    When I take the float:left; out it stacks the links one on top of the other like a list traditionally does.
    Is that your actual code? I don't see any relation from that HTML to CSS.
    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
    Jul 2009
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Is that your actual code? I don't see any relation from that HTML to CSS.
    LOL no, that's just an example.

    The code is much more complicated because it's part of a template from a shopping cart system I am working with.

    Basically the code is this:

    Code:
    <div id="Menu" align="center">
    <ul>
    <li class="First %%GLOBAL_ActivePageHomeClass%%"><a href="%%GLOBAL_ShopPathNormal%%/"><span>%%LNG_MainPage%%</span></a></li>
    %%SNIPPET_PageMenu%%
    </ul>
    </div>
    I'm sure you're aware that the %%_%% codes reference other pieces of code, but those codes aren't relevant to the alignment of the menu.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    One way to center them is
    Code:
    #Menu ul{
    text-align:center;
    }
    #Menu ul li{
    display:inline;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jul 2009
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ugh bugger. I delved into the style sheet (I copied/pasted from Firebug in the OP) and found MUCH more CSS for this Menu.

    Code:
    #Menu {
    clear: both;
    float: left;
    width: 980px;
    height: 40px;
    display: inline;
    position: relative;
    z-index: 1;
    }
    
    #Menu ul {
    margin: 0;
    padding: 0;
    text-align:center;
    }
    
    #Menu li {
    float: left;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
    #Menu li.First {
    }
    
    #Menu li a {
    display: block;
    float: left;
    font-size: 1em;
    text-decoration: none;
    padding: 7px 10px 4px 20px;
    height: 20px;
    }
    
    #Menu li a:hover {
    text-decoration: none;
    }
    
    #Menu li ul {
    width: auto;
    position: absolute;
    clear: left;
    top: 30px;
    left: 10px;
    display: inline;
    text-align: left;
    font-size: 0.85em;
    background: transparent;
    z-index: 10;
    }
    
    #Menu li ul li {
    clear: both;
    text-align: left;
    background: transparent;
    }
    
    #Menu li ul li a {
    padding: 5px 10px 5px 10px;
    font-size: 1em;
    text-align: left;
    margin: 0;
    width: 120px;
    height: auto;
    }
    
    #Menu li ul li a:hover {
    }
    
    #Menu li:hover a, #Menu li.over a{
    text-decoration: none;
    }
    
    #Menu li ul li a, #Menu li.over li a {
    text-decoration: none !important;
    }
    
    #Menu li:hover ul, #Menu li.over ul {
    display: block;
    }
    I added the centre and inline into where you said but it hasn't helped; probably because some of this other css is preventing it?

    Facepalm.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    #Menu li ul {
    width: auto;
    position: absolute;
    clear: left;.........
    Now, this is a very different story! Post the generated html code(taken from browser's view source option) too Or a link to your page would be much better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Jul 2009
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Mmm could I PM you the link? It's a semi-live environment so I'm just a bit cautious about posting it publicly.

    Thanks! xo

  • #8
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    oh you make it more and more complex.u just want to make the menu section(not the links ) center right ?
    #menu
    {
    margin:0px auto;
    }
    thats will work.
    if u still dont understand follow http://www.brightyoursite.com/blog/2...-xhtml-layout/
    this u will know how make a div centered like a fixed with layout

  • #9
    New Coder
    Join Date
    Jul 2009
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi brightyoursite, this did not work unfortunately. The site is pretty complicated because it's template driven, with bits of code embedded in other bits of code embedded in other bits of code.

  • #10
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I can't help without access to your page but, picking up on something you said in the first post, I think; if you are going to keep adding things to your nav menu, you may run out of horizontal space. Might be better to redesign now, with a vertical nav menu?

    hth

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #11
    New Coder
    Join Date
    Jul 2009
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Fair query! No I doubt I will add many more things, the font is quite small, I may only add one or two extra links in the future if I need to. There is still a fair amount of room for a few extras if I need them.

    I am happy to show someone the page if they think they can help, let me know and I will PM you the site (which is currently live but in development).

  • #12
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    just about to go to bed but pm me and I'll look tomorrow.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I am happy to show someone the page if they think they can help, let me know and I will PM you the site (which is currently live but in development).
    Why don't you just signup at a free host like freehostia.com and post a sample of your code there?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    New Coder
    Join Date
    Jul 2009
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Why don't you just signup at a free host like freehostia.com and post a sample of your code there?
    I can't it's part of a shopping cart package and I'd need to get a new development license and have someone install the software. I am happy to show someone, if I could PM them a link, the problem is that the cart is active, I've tried to turn it off but it's still possible to process sales. This wouldn't be a problem except this is in the development area and it could encourage database errors as the real cart and development cart are partially feeding off the same database. Some changes in one effects the other and some don't.

  • #15
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by aliceinwonderla View Post
    I've tried to turn it off but it's still possible to process sales. This wouldn't be a problem except this is in the development area and it could encourage database errors as the real cart and development cart are partially feeding off the same database. Some changes in one effects the other and some don't.
    Sounds like you have more important stuff to deal with than just the centering of your nav list. The public should never have access to uour development server/codes.

    OK, I got your pm and I have responded with a solution.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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