CSS setting: navCatTabs?

[sports guy]

I am trying to configure my css styelsheet to match the front end of my store. This header region of my store is where I am concentrating on now.

Here is an image to explain:


I can see the html code from the website front end. I kow that the gray bar I am working on is these CSS rules:

<div id="navCatTabsWrapper">
<div id="navCatTabs">

My CSS Sheet in this area looks like this:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
 margin: 0em;
 background-color: #FFFFFF;
 padding: 0.5em 0.2em;
 font-weight: bold;
 font-color: #000000;
 height: 1%;
 }
#navCatTabsWrapper {
 background: #404041 url("/images/menu_bg.gif") repeat-x;
 width: 808px;
 height: 39px;
 margin: 5px auto 20px auto;
 padding: 3px 0 0 0;
 color: #ffffff;
 line-height: 17px;
 clear: both;
 }
#navMain ul, #navSupp ul, #navCatTabs ul {
 margin: 0;
 padding: 0.5em 0em;
 list-style-type: none;
 text-align: center;
 line-height: 1.5em;
 }
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
 display: inline;
 }
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
 text-decoration: none;
 padding: 0em 0.5em;
 color: #000000;
 white-space: nowrap;
 }
#navCatTabs ul li a {
 text-decoration: none;
 font-size:12px;
 color: #ffffff;
 }

I have tried many different combinations but cannot match the front end of my website which has this labeled as #menu-wrapper. Here is the css code for the front end that displays this the way I want it:

#menu-wrapper {
 background: #404041 url("/images/menu_bg.gif") repeat-x;
 width: 808px;
 height: 39px;
 margin: 5px auto 20px auto;
 padding: 3px 0 0 0;
 color: #ffffff;
 line-height: 17px;
 clear: both;
}
 
#menu-wrapper a:link, #menu-wrapper a:visited {
 color: #ffffff;
 text-decoration: none;
}
#menu-wrapper a:hover {
 color: #bf1e2d;
 text-decoration: none;
}

First how can I center that text. Second how can I make it normal instead of bold. Third is it possible to add a space|space in between each category?

Any help would be much appreciated.

[stevesh]

The bold is here:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

You could probably set #navCatTabsWrapper to a specific width to match the links on your main page. Increasing the padding-bottom should fix the part that's cut off.

Find this line in tpl_modules_categories_tabs.php and add the red part:
<li><?php echo $links_list[$i];?> &nbsp;|&nbsp; </li>

[sports guy]

OK I was able to make the text normal instead of bold, and also was able to add the spacers. Please see the new updated image here:

As you can see I still wasn't able to align the text inside of that box. I believe it's because I have two settings for: #navCatTabsWrapper

Here:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
 margin: 8px 15px 0 17px;
 background-color: #FFFFFF;
 padding: 0.5em 0.2em;
 font-weight: normal;
 font-color: #000000;
 height: 1%;
 }
#navCatTabsWrapper {
 background: #404041 url("/images/menu_bg.gif") repeat-x;
 width: 808px;
 height: 39px;
 margin: 5px auto 20px auto;
 padding: 3px 0 0 0;
 color: #ffffff;
 line-height: 17px;
 clear: both;
 }

I have tried multiple combinations but am afraid to get too far away as to not mess up the whole template. Any suggestions. I think these two are feeding off each other. They both have marging and padding settings is this not right?

[stevesh]

OK I was able to make the text normal instead of bold, and also was able to add the spacers. Please see the new updated image here:

As you can see I still wasn't able to align the text inside of that box. I believe it's because I have two settings for: #navCatTabsWrapper

Here:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
 margin: 8px 15px 0 17px;
 background-color: #FFFFFF;
 padding: 0.5em 0.2em;
 font-weight: normal;
 font-color: #000000;
 height: 1%;
 }
#navCatTabsWrapper {
 background: #404041 url("/images/menu_bg.gif") repeat-x;
 width: 808px;
 height: 39px;
 margin: 5px auto 20px auto;
 padding: 3px 0 0 0;
 color: #ffffff;
 line-height: 17px;
 clear: both;
 }

I have tried multiple combinations but am afraid to get too far away as to not mess up the whole template. Any suggestions. I think these two are feeding off each other. They both have marging and padding settings is this not right?

Try changing the red part to a smaller value.

As far as being afraid of messing things up, here's the best advice I can offer:

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

[sports guy]

Hmmm... That did add the margins I wanted but it shrunk the background. You can see it currently here:
http://www.lasilhouettelingerie.com/shop/conditions

The only problem is that is shrunk the backround image.

[stevesh]

This is what I came up with:

#navCatTabsWrapper {
background: #404041 url("/images/menu_bg.gif"repeat-x;
width: 800px;
height: 36px;
color: #ffffff;
line-height: 17px;
clear: both;
margin:auto;
}

#navCatTabs ul {width:700px;}

#navCatTabs {margin-left:3em;}

You may have to fiddle with some of it.