How to Center Tabs at top of page?

[nagrap2 +]

Hi,

I removed some of the tabs at the top of my page and wanted to know how to center them?

Online Tutoring, Personal Tutoring Website TutorHeaven.com

Please can someone help.

Thanks in advance...

[Lhotch +]

you will need to edit the css and adjust the margin

ul {
margin: 0;
padding : 0;
list-style : none;
}

from the above to something like....

ul {
margin: 0px 0px 0px 50px;
padding : 0;
list-style : none;
}

[Mike-N-Tosh +]

Originally Posted by Lhotch

you will need to edit the css and adjust the margin

ul {
margin: 0;
padding : 0;
list-style : none;
}

from the above to something like....

ul {
margin: 0px 0px 0px 50px;
padding : 0;
list-style : none;
}

I would actually change it to auto which is the equivalent of center in CSS, like this:
margin: 0px auto;
That should theoretically give a 0 margin at the top and the bottom and an equal margin for the left and right, therefore centering it. I haven't tested this though.

-Mike

[nagrap2 +]

Hi,

That doesnt seem to work, I made the following changes - see red text, can you check and let me know if this is correct:

/* horizontal tabbed menu */
#tabs { background: #fff url(../images/bigbox.gif) no-repeat top left; color: #000; height: 64px; text-align: center; padding: 0 0 0 210px; }
#tabs li { display: inline; height: 45px; }
#tabs li a { float: left; background: #fff url(../images/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; }
#tabs li a:hover { background: #fff url(../images/barcurrent.gif) no-repeat; color: #000; }
#tabs li a.current { background: #fff url(../images/barcurrent.gif) no-repeat; color: #2C71AE; }
.key { text-decoration: underline; }


/* lists and form elements */
/* ul { margin: 0; padding : 0; list-style : none; } */
ul { margin: 0px auto; padding : 0; list-style : none; }
form { margin: 0; }
input.search { width: 279px; border: none; background: #fff url(../images/input.gif) no-repeat; padding: 6px 10px; color: #1E67A8; font-weight: bold; }
input.button { padding: 3px; }

[Mike-N-Tosh +]

Did that have any affect? Did you refresh your browser and/or clear the cache? How about a link?

-Mike

[nagrap2 +]

Mike,

It didnt seem to work: Online Tutoring, Personal Tutoring Website TutorHeaven.com

[Mike-N-Tosh +]

OK, so now I'm actually looking at the page code and the CSS and I see why that didn't work.

Unfortunately, it seems the only way to make it work (without restructuring the whole tabs id display) is what Larry was indicating which would be to hard code it. Either use Larry's suggested: margin: 0 0 0 50px;
OR use a padding: 0 0 0 86px;

This means that you will need to adjust that if you modify the number of tabs down the road.

Sorry to have delayed your solution from Larry's response.

-Mike

[nagrap2 +]

Awesome, the padding option worked: 0 0 0 86px;

Thanks for your help guys !!!!