CSS Hover Buttons

[hlycom99]

Hi,
This is my first time installing zen cart. I am trying to add a horizontal hover button navigation menu under the header logo. I would like to use images instead of text. I was hoping someone could lead me in the correct direction in setting this up. You can view the current navigation here, http://www.lillysribbons.com/index1.shtm (where zen cart is not set up) and this is how my zen cart currently looks http://www.lillysribbons.com/catalog....php?main_page=
Thanks!

[kobra]

If you edit the head image used for your cart to include the links as a single image you can then create a map to enable the hot spots. It looks as though you have individual images on your other page and this can be done also.

It all happens in a copy of includes/templates/template_default/common/tpl_header.php

[hlycom99]

Thank you!
I tried making it one image, but now the logo is overlapping the rest of the menu that was underneath it. Where can I lower the navigation menu and E-Z page menu? I already changed the height of the logo, which I thought would have worked.

Also, where do I add the hover links for the image map? In the tpl_header.php file?


Thanks so much for your help.

[kobra]

Opps!! You have made it one complete image and this image is being used/pointed to as logo.gif even though you have renamed it - you must have also changed this in the file to be topper_2.gif and as such this complete image is hot linked by default to the cart main page.

I suggest that you seperate the mother and daughter image into an image and use it as your logo (maybe set files back to logo.gif and name it logo.gif) Then the remainder can be your header_bg.xxx and applied in the stylesheet.css- probably to the logoWrapper tag kinda like:

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: no-repeat;
	background-color: #ffffff;
	height: ??px;
	}

Then the map does go in a copy of the tpl_header.php placed in your template/common folder(create it if you need to) and basic map code will be along the lines of(you need to adjust it to match your image):

      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
<!-- begin navTabs navigation -->
<div id="navTabs">
<a href="index.php"><img src="includes/templates/your_template/images/spacer.gif" alt="Home Page" width="125" height="44" border="0" /></a>
<a href="index.php?main_page=login"><img src="includes/templates/your_template/images/spacer.gif" alt="My Account" width="125" height="44" border="0" /></a>
<a href="index.php?main_page=logoff"><img src="includes/templates/your_template/images/spacer.gif" alt="Log Out of My Account" width="125" height="44" border="0" /></a>
<a href="index.php?main_page=shopping_cart"><img src="includes/templates/your_template/images/spacer.gif" alt="Shopping Cart" width="125" height="44" border="0" /></a>
<a href="index.php?main_page=checkout_shipping"><img src="includes/templates/your_template/images/spacer.gif" alt="Checkout Now" width="125" height="44" border="0" /></a>
<!-- end navTabs --></div>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

use the code in red and insert it between the code in blue - you can add additional lines or remove some to match the number of links that you have and change the href's to yours (maybe ezpage links) and you will need to create these pages first so that you know the links address.
Spacer.gif is a single pixel transparent image and one in images - pixel_trans.gif can be copied and renamed for this.

I enclosed this in a div named navTabs and you could use another name but make sure that it is unique. Then you can refine alignment in the stylesheet.css file.

[hlycom99]

Hi! Thanks for your help. I became a little frustrated and had to take a nice long break from getting the cart set up.

I believe I followed your advice, but I'm still having problems with getting the navigational buttons aligned below the topper.gif image (I placed this as my logoWrapper). I put navTabs into the css file, but whatever height I seem to give it, it just stays the same.

Once I accomplish this, I'm also wondering how I'm able to get the images to change on a link-hover.

There's also an image on the left side of my navigation that has an x and I have no idea where that is coming from.

And if all that's not enough, I can't seem to figure out why the text on the customer registration page is all cut in half!

I feel so close, but yet so far! Anymore help you could give is greatly appreciated! Thanks!

[kobra]

Checked you site and yhis does not appear to be what you are seeking.
The "X" is that you are still calling topper2.gif and I do not know if you are still using this but the code thinks that you are.

[hlycom99]

Where can I change the topper2.gif? Should I delete the logo out of the tpl_header.php file and just work with what I have or should I use the Lilly's Ribbon topper/title as my logo and the button navigation as my header/logowrapper?
Were you able to view the text on the registration page? It's all messed up! Here's the link.http://www.lillysribbons.com/catalog...f0f283f4e951e2

Thanks!