How do you center CSS tabs

[blade007]

How do you center these CSS tabs, I tried everything I could think of..
http://www.dynamicdrive.com/style/cs...ing-tabs-menu/

[Veronica]

Try putting the tabs and the paragraph within a div with a set width, and centering that div:

<div style="width:50%; margin-left:auto; margin-right:auto;">

<div id="glowingtabs">.....
...<p class="iepara">Paragraph that follows...</p>

</div>

[blade007]

ok, i will try that, also, it changes all my text color to blue, which code is doing that

[Veronica]

To change the color of the text change here:

#glowingtabs a span{
...
color:blue;
}

If you want to change the color of the selected tab, do it here:

#glowingtabs #current a span{ /*Selected Tab style*/
...
color: black;
}

Also, for IE6, you'll need to add another div to my first suggestion:

<div style="text-align:center">  <!--this centers in IE, then add text-align:left in div below -->
<div style="border:1px solid black; width:500px; margin-left:auto; margin-right:auto; text-align:left;">
...
</div>
</div>

[blade007]

To change the color of the text change here:

#glowingtabs a span{
...
color:blue;
}

i change this to black, but the rest of my text is still blue, here is my CSS code..

<style type='text/css'>.acttbl { width:100&#37;; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; } .sellerdetails { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#000000; } .table1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; width:100%; } .table2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; width:100%; }
    
#glowingtabs{
float:left;
width:100%;
font-size:90%;
line-height:normal;
border-bottom: 1px solid #7e9fff; /*Add border strip to bottom of menu*/
}

#glowingtabs ul{
list-style-type: none;
margin:0;
margin-left: 5px; /*Left offset of entire tab menu relative to page*/
padding:0;
}

#glowingtabs li{
display:inline;
margin:0;
padding:0;
}

#glowingtabs a{
float:left;
background:url(media/glowtab-left.gif) no-repeat left top;
margin:0;
margin-right: 5px; /*spacing between each tab*/
padding:0 0 0 9px;
text-decoration:none;
}

#glowingtabs a span{
float:left;
display:block;
background:url(media/glowtab.gif) no-repeat right top;
padding: 4px 12px 2px 3px;
font-weight:bold;
color:Black;
align:center;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#glowingtabs a span {float:none;}
/* End IE5-Mac hack */

#glowingtabs a:hover span {
color: black;
}

#glowingtabs #current a{ /*Selected Tab style*/
background-position:0 -82px; /*Shift background image up to start of 2nd tab image*/
}

#glowingtabs #current a span{ /*Selected Tab style*/
background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
color: black;
}

#glowingtabs a:hover{ /*onMouseover style*/
background-position:0% -82px; /*Shift background image up to start of 2nd tab image*/
}

#glowingtabs a:hover span{ /*onMouseover style*/
background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
}

</style>

<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->

and here is the code that references to the tabs..

<div id="glowingtabs">
<ul>
<li>
<a href="#payment" title="Payment"><span>Payment</span></a></li>
<li><a href="#shipping" title="Shipping"><span>Shipping</span></a></li>
<li><a href="#warranty" title="Warranty"><span>Warranty</span></a></li>
<li><a href="#ebaystore" title="ebay Store"><span>ebay Store</span></a></li>
<li><a href="#contact" title="Contact Us"><span>Contact Us</span></a></li>
</ul>
</div>
<br style="clear: left;" />

[Veronica]

Hmmm... I'm looking at it with your code, and the text all seems to be black, which is what the css is telling it to be. Do you have any other styles on the page that are perhaps over-riding this? Are all the links on your page blue or just the tabs?

[blade007]

here is my other styles in the same style sheet..

<style type='text/css'>.acttbl { width:100%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; } .sellerdetails { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#000000; } .table1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; width:100%; } .table2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:14px; width:100%; }

and right below this is where the glowing tabs styles start

all my text changed to blue from black, my current links are blue, which is the same

[Veronica]

That shouldn't affect the tabs.

What color do you want the tabs to be? And what color do you want the rest of the links on your page to be? And what color do you want your text to be? ALso, can you post the link to your page?

[blade007]

i was able to fix the blue text problem, something in my code was causing all my text to be blue

i will be using a different menu than the one i mentioned, i will be using this one instead..
http://www.dynamicdrive.com/style/cs...id-block-menu/

i tried centering it with code u gave me, but it didn't work

also, where are u suppose to put that IE6 code u provided

thanks