How can I get my top nav to look like this?

[mring]

I'm a complete Zen newbie, but have spent several hours reading the help pages/forums. Have also purchased the book.

I know HTML, and a little CSS, but have absolutely no experience with PHP.

Knowing this, would it be difficult for me to get my top nav to look like this? (I have the logo in place, it's just the nav I need help with)

If not, can anyone give me a basic idea of how to go about this?

[kobra]

If you know html and I see that you have this as an image and that this will not be drop menus or the like you can create a transparent image map with the hot links defined and place it over the image that you install through the style sheet as a background image. This is one way.

[mring]

I would assume I would also have to alter the PHP file slightly? How would I do that? Would it be tpl_header.php?

[kobra]

I would assume I would also have to alter the PHP file slightly? How would I do that? Would it be tpl_header.php?

Yes, this is the file where the image map would be if you choose to do it this way.

Here is a generic sample and spacer.gif is a 1pixel transparent image that you would have to create and I recall that I added the div "navHead". You need to provide the href's and the alt text and adjust to match your background image.

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

	<!-- begin top navigation -->
	<div id="navHead">
	<img src="includes/templates/test/images/spacer.gif" width="235" height="44" border="0" /></a><a href="index.php?main_page=?Ref1?">
<img src="includes/templates/test/images/spacer.gif" alt="?Some_Text?" width="120" height="44" border="0" /></a><a href="index.php?main_page=?Ref2">
<img src="includes/templates/test/images/spacer.gif" alt="?Some_Text?" width="125" height="44" border="0" /></a><a href="index.php?main_page=index&cPath=5">
<img src="includes/templates/test/images/spacer.gif" alt="Accessories" width="125" height="44" border="0" /></a><a href="index.php?main_page=about_us">
<img src="includes/templates/test/images/spacer.gif" alt="About Us" width="120" height="44" border="0" /></a>
	<!-- end top nav --></div>
    </div>

[mring]

Thanks so much kobra...I will try this.