Turns out my truck will only be ready by 8:30PM so I had time to post what I did to make my navigation buttons work within Zencart. I'm not claiming to be a coder or anything but it works and that's all I care about. :smile:
In order to achieve this look in Zencart;
What I did;
In the tpl.header.php file I inserted the code for my buttons below and above the red text in the file.
<!--bof-header logo and navigation display-->
<style type="text/css">
div#container
{
width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
</style>
<style type="text/css">
body
{
text-align: center;
margin: 0;
background-color: #FFFFFF;
color: #000000;
scrollbar-face-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-3dlight-color: #F0F0F0;
scrollbar-darkshadow-color: #696969;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #A0A0A0;
scrollbar-track-color: #C8C8C8;
}
</style>
<script type="text/javascript" src="http://teslacorp-rd-inc.com/jquery-1.4.2.min.js"></script>
<style type="text/css">
#NavigationBar1 ul.navbar
{
list-style: none;
margin: 0;
padding: 0;
}
#NavigationBar1 ul.navbar li
{
height: 29px;
width: 118px;
float: left;
margin: 0px 4px 0px 0px;
}
#NavigationBar1 ul.navbar li a
{
display: block;
position: relative;
}
#NavigationBar1 ul.navbar li a img
{
position: absolute;
z-index: 1;
border-width: 0px;
}
#NavigationBar1 ul.navbar li span
{
display: block;
height: 29px;
width: 118px;
position: absolute;
z-index: 2;
}
</style>
<style type="text/css">
#NavigationBar2 ul.navbar
{
list-style: none;
margin: 0;
padding: 0;
}
#NavigationBar2 ul.navbar li
{
height: 29px;
width: 118px;
float: left;
margin: 0px 4px 0px 0px;
}
#NavigationBar2 ul.navbar li a
{
display: block;
position: relative;
}
#NavigationBar2 ul.navbar li a img
{
position: absolute;
z-index: 1;
border-width: 0px;
}
#NavigationBar2 ul.navbar li span
{
display: block;
height: 29px;
width: 118px;
position: absolute;
z-index: 2;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$("#NavigationBar1 .navbar a").hover(function()
{
$(this).children("span").hide();
}, function()
{
$(this).children("span").show();
})
$("#NavigationBar2 .navbar a").hover(function()
{
$(this).children("span").hide();
}, function()
{
$(this).children("span").show();
})
});
</script>
</head>
<body>
<div id="container">
<div id="NavigationBar1" style="position:absolute;left:194px;top:3px;width:610px;height:29px;z-index:0">
<ul class="navbar">
<li><a href="http://www.teslacorp-rd-inc.com/index.html"><img alt="Welcome to TeslaCorp R&D Inc." title="Welcome to TeslaCorp R&D Inc." src="http://teslacorp-rd-inc.com/images/img0011_over.gif"><span><img alt="Welcome to TeslaCorp R&D Inc." title="Welcome to TeslaCorp R&D Inc." src="http://teslacorp-rd-inc.com/images/img0011.gif"></span></a></li>
<li><a href="http://www.teslacorp-rd-inc.com/about_us.html"><img alt="Who we are and what we're all about." title="Who we are and what we're all about." src="http://teslacorp-rd-inc.com/images/img0021_over.gif"><span><img alt="Who we are and what we're all about." title="Who we are and what we're all about." src="http://teslacorp-rd-inc.com/images/img0021.gif"></span></a></li>
<li><a href="http://www.teslacorp-rd-inc.com/contact_us.html"><img alt="Contact us at anytime." title="Contact us at anytime." src="http://teslacorp-rd-inc.com/images/img0023_over.gif"><span><img alt="Contact us at anytime." title="Contact us at anytime." src="http://teslacorp-rd-inc.com/images/img0023.gif"></span></a></li>
<li><a href="http://www.teslacorp-rd-inc.com/investors.html"><img alt="Invest in a great company with a great team." title="Invest in a great company with a great team." src="http://teslacorp-rd-inc.com/images/img0024_over.gif"><span><img alt="Invest in a great company with a great team." title="Invest in a great company with a great team." src="http://teslacorp-rd-inc.com/images/img0024.gif"></span></a></li>
<li><a href="http://www.teslacorp-rd-inc.com/locate_a_dealer.html"><img alt="Locate one of our dealers near you." title="Locate one of our dealers near you." src="http://teslacorp-rd-inc.com/images/img0025_over.gif"><span><img alt="Locate one of our dealers near you." title="Locate one of our dealers near you." src="http://teslacorp-rd-inc.com/images/img0025.gif"></span></a></li>
</ul>
</div>
<div id="NavigationBar2" style="position:absolute;left:194px;top:35px;width:610px;height:29px;z-index:1">
<ul class="navbar">
<li><a href="http://www.teslacorp-rd-inc.com/news_and_press.html"><img alt="Lastest news and press relating to anything and eveything we do." title="Lastest news and press relating to anything and eveything we do." src="http://teslacorp-rd-inc.com/images/img0026_over.gif"><span><img alt="Lastest news and press relating to anything and eveything we do." title="Lastest news and press relating to anything and eveything we do." src="http://teslacorp-rd-inc.com/images/img0026.gif"></span></a></li>
<li><a href="http://www.teslacorp-rd-inc.com/Nikola_Tesla.html"><img alt="One of the greatest men of all time." title="One of the greatest men of all time." src="http://teslacorp-rd-inc.com/images/img0027_over.gif"><span><img alt="One of the greatest men of all time." title="One of the greatest men of all time." src="http://teslacorp-rd-inc.com/images/img0027.gif"></span></a></li>
<li><a href="http://www.teslacorp-rd-inc.com/r_and_d.html"><img alt="Research & Development." title="Research & Development." src="http://teslacorp-rd-inc.com/images/img0028_over.gif"><span><img alt="Research & Development." title="Research & Development." src="http://teslacorp-rd-inc.com/images/img0028.gif"></span></a></li>
<li><a href="http://www.teslacorp-rd-inc.com/Zen/"><img alt="Purchase one of our great innovative products." title="Purchase one of our great innovative products." src="http://teslacorp-rd-inc.com/images/img0029_over.gif"><span><img alt="Purchase one of our great innovative products." title="Purchase one of our great innovative products." src="http://teslacorp-rd-inc.com/images/img0029.gif"></span></a></li>
<li><a href="http://www.teslacorp-rd-inc.com/support.html"><img alt="Product manuals, installation manuals our catalogue and more" title="Product manuals, installation manuals our catalogue and more" src="http://teslacorp-rd-inc.com/images/img0030_over.gif"><span><img alt="Product manuals, installation manuals our catalogue and more" title="Product manuals, installation manuals our catalogue and more" src="http://teslacorp-rd-inc.com/images/img0030.gif"></span></a></li>
</ul>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<div id="headerWrapper">
<!--bof-navigation display-->
I added the <br> tag a few times to drop the logo.gif down to just the right spot that I needed.
Like I said, may not entirely be what someone with experience in coding would do here but it worked for me. :wink:
