Hi.

I am designing a website based on the free template - FreshMade Software Template.

I have copied the template to my PC, and now I am customizing/modifying it to my needs.

The problem I am having is that I can't get the navigation menu at the top to be centered. In the template it is left-aligned. I want the menu to be aligned in the center of the brown navigation bar, without affecting any other formatting. All attempts to do so have failed. I have decent HTML and CSS knowledge, but I'm definitely no expert.

Please help. Thanks in advance!

Update:

I've managed to center the menu using Dan's advice:

ul.tabbed 
{
     margin:auto;
     padding:0;
     width:650px;
}

However, my menu is dynamically created, so I would need to set the width property dynamically via Javascript. How would I go about this using JQuery?

I was thinking of setting each menu item to be a fixed width (say 100px) and then setting the width of ul.tabbed to be X * 100px where X is the number of list items in the unordered list.

Is this the right approach, and how would one implement it using Jquery?

2 answers

danwellman 5600
2
points
This was chosen as the best answer

Is there going to be a fixed number of navigation items? If so you can give the <ul> element a fixed width, auto margins and block level display. The following code centers the navigation menu in the example page you've linked to:

ul.tabbed {
    margin:auto;
    padding:0;
    width:650px;
}

But you couldn't use that if the menu items were subject to change, you'd need to involve some JavaScript for that to calculate the width.

Answered almost 7 years ago by danwellman
  • Thanks Dan. Worked great. I did try something similar, but didnt remove the "display:inline" property, and just couldn't understand why it wouldn't work. Saajid Ismail almost 7 years ago
  • So the menu items are dynamically created, and could be different lengths. How do I use Javascript to set the width? I'm using JQuery on my site. Saajid Ismail almost 7 years ago
  • @Saaid, margin auto centers a block but not an inline element. As for your second question, I suggest you post it as new one, yea? o.k.w almost 7 years ago
  • @saajid, yes, the comments section is a little restrictive for posting code, open up a new question and o.k.w or myself will provide some code :) danwellman almost 7 years ago
  • I've updated the original question. Can't you just update your answer as well? If I had to repost the question, it would almost be a duplicate. Besides, my secondary question is still on topic. Saajid Ismail almost 7 years ago
PaulBM 103
-1
points

Try text-align:center on the UL. Without the float left defs on the LIs.

Answered almost 7 years ago by PaulBM
  • I've tried that all ready - it doesn't work. Dan's solution works perfectly, except that I now need to set the width dynamically as my menu changes Saajid Ismail almost 7 years ago