header Of my website

**makalele33** · 27 Dec 2010, 05:50 AM

i would like to know if there is a way i can have a modified header where i have a few different pictures that link to a page on my site and also like text with in the header for something like free shipping and like no sale tax kinda like this

http://www.rmsmusicoutlet.com/test.html

thanks for the help in advance

i created it with dreamweaver this is the html and the pictures would be store in zencart/includes/templates/custom/images/image.jif

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>header</title>
<style type="text/css">
#HeaderWrapper {
float: left;
width: 800px;
margin-right: auto;
margin-left: auto;
height: 146px;
}
p{
float:none;
margin: 18px;
}
#Logo {
height: 132px;
width: 228px;
float: left;
margin-top:0px;
}
#leftwrapper {
float:left;
height: 136px;
width: 228px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
#Middlewrapper {
float:left;
height: 136px;
width: 313px;
margin-top: 5px;
margin-bottom: 5px;
}
#rightwrapper {
float:right;
height: 136px;
width: 242px;
margin-top: 5px;
margin-bottom: 5px;
}
#guitars {
height: 81px;
width: 249px;
left: 232px;
float: left;
}
#ship {
height: 29px;
width: 162px;
text-align: right;
vertical-align: text-top;
position: relative;
top: 2px;
float: left;
}
#txtship {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-weight: bold;
line-height: 90%;
text-transform: uppercase;
color: #000;
letter-spacing: 15%;
word-spacing: 50%;
vertical-align: top;
text-align: center;
height: 47px;
width: 140px;
float: right;
white-space: nowrap;
}

#call{
height: 20px;
width: 254px;
text-align: right;
}
#cc{
height: 40px;
width: 190px;
float: right;
}
#espanol{
letter-spacing: 20%;
line-height: 20%;
}
#tax{
width: 55px;
height: 81px;
font-size: 60%;
font-family: Verdana, Geneva, sans-serif;
line-height: 19%;
margin-top: 0px;
text-align: left;
vertical-align: text-top;
white-space: nowrap;
padding-left: 0px;
color: #000;
font-weight: bold;
}

</style>
</head>

<body>
<div id="HeaderWrapper">
<div id="leftwrapper">
<div id="Logo"><img src="shop/includes/templates/classic/images/logo.gif" width="228" height="131"/></div>

</div>
<div id="Middlewrapper">
<div id="guitars"><img src="shop/includes/templates/classic/images/guitars.png" /></div>
<div id="tax"><p>No Tax</p>
<p>Except</p>
<p>FL, NY and TX.</p>

</div><div id="ship"><img src="shop/includes/templates/classic/images/shplogo.png" width="138" height="40" /></div>
<div id="txtship">
<p>Free Shipping<br>
All Orders 99.99 and up!</p>
</div>

</div>
<div id="rightwrapper">
<div id="call"><img src="shop/includes/templates/classic/images/espanol.gif"/></div>
<div id="espanol">
<p>Have Any Questions???</p>
<p>Contact Us At (305)200-7579</p>
</div>
<div id="cc"><img src="shop/includes/templates/classic/images/visalogo.gif"/></div>

</div>
</div>
</body>
</html>

any help will be greately appreciated

thank you

**dbltoe** · 27 Dec 2010, 07:21 AM

One would need to be an expert in BOTH Zen Cart and Dreamweaver to keep from really botching things up in your cart.
There are many different ways to do this without re-inventing the wheel.
For instance, create a header sliced to provide different areas with links.

**stevesh** · 27 Dec 2010, 12:07 PM

Making images clickable (a good idea, I think) could be done with an image map. I like using CSS to create them. My post #8 here: http://www.zen-cart.com/forum/showthread.php?t=150835 offers an example and there's a decent tutorial here: http ://www.marketingtechblog.com/programming/css-image-map/

Looks a little daunting at first, but it's pretty easy once you understand the concept.

I'd do the coding manually, rather than in DW.

**makalele33** · 27 Dec 2010, 01:58 PM

Originally Posted by stevesh

Making images clickable (a good idea, I think) could be done with an image map. I like using CSS to create them. My post #8 here: http://www.zen-cart.com/forum/showthread.php?t=150835 offers an example and there's a decent tutorial here: http ://www.marketingtechblog.com/programming/css-image-map/

Looks a little daunting at first, but it's pretty easy once you understand the concept.

I'd do the coding manually, rather than in DW.

thank you so much for the quick reply...i just want to be clear an image map its just like a wrapper to be able to move the images with css and style them accordingly?

i just want to make sure i dont botch anything up

**stevesh** · 27 Dec 2010, 02:16 PM

Pretty much. All you're really doing is specifying areas with certain widths and heights within an area on your site (in this case the header) using the CSS in the stylesheet. Each is then linked (using the code that goes in tpl_header.php) to someplace on or off your site. Look over the code I mentioned in that post, and I think you'll see how it works.