Using a CSS Navigation Menu for the top NAV bar

[spikeycactus]

Hello, i have found a piece of code that allows me to create a top CSS Navigation bar that has highlighted buttons on it, the problem is, how do i get this onto zen cart and allow zen cart to add the links automatically with the data entries and where do i put the code.
This area is totaly new to me!
http://www.exploding-boy.com/2005/12...ation-designs/
here is the code;

/*- Menu Tabs J--------------------------- */

    #tabsJ {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
	  border-bottom:1px solid #24618E;
      }
    #tabsJ ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
      }
    #tabsJ li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsJ a {
      float:left;
      background:url("tableftJ.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsJ a span {
      float:left;
      display:block;
      background:url("tabrightJ.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsJ a span {float:none;}
    /* End IE5-Mac hack */
    #tabsJ a:hover span {
      color:#FFF;
      }
    #tabsJ a:hover {
      background-position:0% -42px;
      }
    #tabsJ a:hover span {
      background-position:100% -42px;
      }

[spikeycactus]

Ok, ive put the CSS code into the correct part into the main css sheet but where is the code in zen cart the specifies where to put the text onto the menu bar?
Please help!!!

[clydejones]

Ok, ive put the CSS code into the correct part into the main css sheet but where is the code in zen cart the specifies where to put the text onto the menu bar?
Please help!!!

includes/templates/YOUR_TEMPLATE/common/tpl_header.php

[spikeycactus]

Hello, the menu links only seem to appear when you are on the page that the link links too.
here is the css code i now have in the template css;

#navMainWrapper {
	margin: 0em;
      padding: .60em 0em 0.1em 0em;
      background-color: #6D6D6D;
      background-image: url(../images/nav_back.gif);
	font-weight: bold;
      font-size: 10px;
	color: #000000;
	width: 100%;
	}

#navSuppWrapper, #navCatTabsWrapper {
      
	 
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
	  border-bottom:1px solid #24618E;
      }
   #navSuppWrapper, #navCatTabsWrapper ul {
	margin:0;
	padding:10px 10px 0 50px;
	list-style:none;
      }
    #navSuppWrapper, #navCatTabsWrapper li {
      display:inline;
      margin:0;
      padding:0;
      }
    #navSuppWrapper, #navCatTabsWrapper a {
      float:left;
      background:url(../images/tableftJ.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #navSuppWrapper, #navCatTabsWrapper a span {
      float:left;
      display:block;
      background:url(../images/tabrightJ.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #navSuppWrapper, #navCatTabsWrapper a span {float:none;}
    /* End IE5-Mac hack */
   #navSuppWrapper, #navCatTabsWrapper a:hover span {
      color:#FFF;
      }
    #navSuppWrapper, #navCatTabsWrapper a:hover {
      background-position:0% -42px;
      }
    #navSuppWrapper, #navCatTabsWrapper a:hover span {
      background-position:100% -42px;
      }

im just sort of guesssing with this code, does anyone know of any resources out there that could help me with a navigation menu like this?
Try my site at www.airmunition.co.uk and click on one of the links and you will seee what i mean.
Thanks you

[spikeycactus]

any ideas? im getting desperate now
any hints everything is welcome of course

[PTS_Jacob]

I am assuming that you are talking about your Tab Menu (top). If so I've personally found that using "line-height" when dealing with menu buttons is really helpful.

You could try something like this (example):

menuA a:link, menuA a:visited
{
background: url(your_image_url);
display: block;
line-height: 30px; /* Or w/e is needed to fit image. */
width: 100px; /* Again, w/e is needed to fit your image. */
}

With the line height it will automatically center the text vertically, you can also add in "text-align: center;" and the text will appear dead center, horizontally and vertically.