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.

[spikeycactus]

thanks, but im trying to make highlightable buttons like the ones in the link i posted on the first post.
Any tips on how to make one like that? the default setup is much like your example is it not?
I dont know much about how css works, however your center alignment thing was very helpfull.
Any other ideas?

[clydejones]

thanks, but im trying to make highlightable buttons like the ones in the link i posted on the first post.
Any tips on how to make one like that? the default setup is much like your example is it not?
I dont know much about how css works, however your center alignment thing was very helpfull.
Any other ideas?

Here's the css styling that I use:

#navMain {
   margin:0;
   padding: 0;
   float:left;
   font-size: 1.1em;
   line-height: normal;
   color: #fff;
	width: 100%;
}	
#navMain ul {
	margin: 0;
	padding: 0.2em 0 0 0.5em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
	vertical-align: middle;
}
#navMain ul li {
	display: inline;
	}	
#navMain ul li a {
   margin:0;
   padding: 0 5px 0 4px;
   float:left;
   color: #fff;
   background: url(../images/tableft.gif) no-repeat left top;
   text-decoration:none;
	}
#navMain ul li a span {
   display:block;
   background: url(../images/tabright.gif) right top;
   padding:2px 15px 2px 6px;
   }
#navMain ul li a:hover {
   background-position:0% -42px;
   }
#navMain ul li a:hover span {
   padding:2px 15px 2px 6px;
   background-position:100% -42px;
   }

And this is the navigation in includes/templates/YOUR_TEMPLATE/common/tpl_header.php

<div id="navMain">
    <ul>
    <li<?php echo (($this_is_home_page) ? ' class="current">' : '>');?><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo '<span>' . HEADER_TITLE_CATALOG . '</span>'; ?></a></li>
<?php if ($_SESSION['customer_id']) { ?>
    <li<?php echo (($current_page_base == 'logoff') ? ' class="current">' : '>');?><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_LOGOFF . '</span>'; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li<?php echo (($current_page_base == 'login') ? ' class="current">' : '>');?><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_LOGIN . '</span>'; ?></a></li>
<?php } } ?>
<li<?php echo (($current_page_base == 'contact_us') ? ' class="current">' : ' class="contact">');?><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'SSL'); ?>"><?php echo '<span>' . BOX_INFORMATION_CONTACT . '</span>'; ?></a></li>
    <li<?php echo (($current_page_base == 'account') ? ' class="current">' : ' class="account">');?><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_MY_ACCOUNT . '</span>'; ?></a></li>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li<?php echo ((in_array($current_page_base,explode(",",'checkout_shipping,checkout_payment,checkout_confirmation,checkout_success'))) ? ' class="current">' : '>');?><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo '<span>' . HEADER_TITLE_CHECKOUT . '</span>'; ?></a></li>
<?php }?>
    <li<?php echo (($current_page_base == 'shopping_cart') ? ' class="cart current">' : ' class="cart">');?><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo '<span>' . HEADER_TITLE_CART_CONTENTS . '</span>'; ?></a></li>
</ul>

[spikeycactus]

THANKS! im gonna have a look at this now!