CSS Image Map Problem

[pamela631]

Hi everyone,

I am using v1.5.0
I am trying to create a CSS Image map for my whole header area, the majority is the homepage link, then I have links for social icons. I am at a loss as to what I did wrong.. I would so appreciate if someone could help me.

I followed the instructions on this post here:
http://www.zen-cart.com/showthread.p...n-a-main-image to a T, but it broke the layout and the header.png image disappeared..

Here is the site with the broken layout and missing header.png: http://theposhbox.net/ZenCart/

Here is what I placed in tpl_header.php in between <!--eof-navigation display--> and <!--bof-branding display-->

<!--begin social icon image map-->
<div id="imagemap">
<a id="home" href="http://www.theposhbox.net/ZenCart/" title="Welcome"><span class="hide">Home</span></a>
<a id="facebook" href="#" title="Find me on Facebook"><span class="hide">Facebook</span></a>
<a id="googleplus" href="#" title="Find me on Google Plus"><span class="hide">Google Plus</span></a>
<a id="pinterest" href="#" title="Find me on Pinterest"><span class="hide">Pinterest</span></a></div>
<a id="twitter" href="#" title="Find me on Twitter"><span class="hide">Twitter</span></a></div>
<a id="cart" href="#" title="View your Shopping Cart"><span class="hide">Cart</span></a></div>
<!--end social icon image map-->

And I added Display: none; to my #logowrapper

Then added this to the CSS:

.hide {display:none;}

#imagemap {
background-image: url(../images/header.png) no-repeat;
height: 372px;
width: 1085px;
margin: 0;
}

#home {
float:left;
position:absolute;
width: 759px;
height: 372px;
margin-left:43px;
margin-top:1px;
}

#facebook {
float:left;
position:absolute;
width: 36px;
height: 50px;
margin-left:801px;
margin-top:1px;
}

#googleplus {
float:left;
position:absolute;
width: 36px;
height: 50px;
margin-left:850px;
margin-top:1px;
}

#pinterest {
float:left;
position:absolute;
width: 36px;
height: 50px;
margin-left:898px;
margin-top:1px;
}

#twitter {
float:left;
position:absolute;
width: 36px;
height: 50px;
margin-left:946px;
margin-top:1px;
}

#cart {
float:left;
position:absolute;
width: 36px;
height: 50px;
margin-left:992px;
margin-top:1px;
}

Pamela

[stevesh]

What's the purpose of the # in the href of your social links ?

[pamela631]

Oh, I put that in place of actual links.. do you think that is the problem? I'll take them out and just put in the homepage link and see.. Ok, I put in normal links.. still the layout is broken and header.png is not showing...

[pamela631]

I have a temporary fix for this.. will post about it next so that everyone can use or improve on what I came up with..
Pamela