How to center Tabs menu?

[user2616 +]

What version of 68 Classifieds are you running?
Example: V4.1.6 Developer

What template are you using?
default

Please describe in detail the issue you are having:

I have removed few tabs from the original tab navigation. Based on the user login status, I add few tabs such as My Account.

Without user login, few static tabs aligned towards left and not centered.

Can you please help on how to center the tabs with or without user login?

Thank you.

[michael +]

I did that a while ago. You need to edit your CSS file, from memory I'd guess it was the following line and value;

#tabs { background: #fff url(../images/bigbox.gif) no-repeat top left; color: #000; height: 64px; text-align: center; padding: 0 0 0 234px; }

You'll find that at around line 25.

Be aware that the background 'rays' within bigbox.gif, your main navigation bar, will become misaligned. I decided that was a small price worth paying.

[user2616 +]

Thank you michael for your reply.

I edited CSS file to include the following code:
#tabs { background: #fff url(../images/bigbox.gif) no-repeat top left; color: #000; height: 64px; text-align: center; padding: 0 0 0 234px; }

It helped partly, but not fully. I think the reason may be that in my case, the number of tabs vary with and without login. More details below:

Meanwhile, searched the internet for solution. Wow, I found one great guy called Matthew James Taylor beautifully explained the concept How to Center Horizontal Menu: "Beautiful Horizontally Centered Menus/Tabs/List". He explained "How the centering method works" using diagrams and sample code.

For the benefit of other users, I would like to document my experience here.

My requirements:
Without user login status, tabs menu contains 3 tabs. With login status, tabs menu contains 6 tabs. I purpose is to center the tabs dynamically.

I simply copy and paste the sample code into my style.css file.
The sample code contains the div id "centeredmenu".
Edited layout.tpl:
Changed the following line:
<div id="tabs">
to
<div id="centeredmenu">
Upload style.css and layout.tpl files.
Visited my test wesite.
It worked beautifully.
Then, added cosmetics to the "centeredmenu" in style.css.
Got my original look and feel with dynamic CENTERED horizontal tabs menu.

Reference:
Please visit the following link to read the concept and copy the sample code:
Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.

I am using V4.1.6 Developer - default template. Following is my CSS code:

#centeredmenu {
float:left;
width:100%;
background: #fff url(../images/bigbox.gif) no-repeat top left;
color: #000;
height: 40px
text-align: center;
padding: 0;
overflow:hidden;
position:relative;
}

#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}

#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
height: 45px;
position:relative;
right:50%;
}

#centeredmenu ul li a {
display:block;
margin:0 0 0 1px;
padding: 7px 0;
width: 122px;
font-weight: bold;
text-align: center;
background: #fff url(../images/barbg.gif) no-repeat;
color#404040;
text-decoration:none;
line-height:1.3em;
}

#centeredmenu ul li a:hover {
background: #fff url(../images/barcurrent.gif) no-repeat;
color:#000;
}

#centeredmenu li a.current { background: #fff url(../images/barcurrent.gif) no-repeat; color: #2C71AE; }

#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}


Thank you all

Bala

[michael +]

Thanks for taking the time to explain and post PrimaryHub, that was definately worth kick starting your reputation!