problem positioning a hotspot over an image

I'm having a problem positioning a hotspot (should be a rectangle 230px wide by 88px high) over an image in a web page header. Rather than appearing over top of the image using the coordinates defined in the CSS, it displays right before the image. What am I doing wrong?

Here's what I have:

HTML

<div class="art-Header">
<jdoc:include type="modules" name="Search-box" />
<div class="art-Header-jpeg">
            <a href="http://www.agro-k.com/index.php?option=com_alfcontact&Itemid=148" class="hotspot" title="Contact Us">&nbsp</a>
      </div>
</div>

CSS

div.art-Header-jpeg
{
      position: absolute;
      z-index:-1;
      top: 30;
      left: 0;
      width: 906px;
      height: 150px;
      background-image: url('../images/Header.png');
      background-repeat: no-repeat;
      background-position: center center;
}

div.art-Header-jpeg .hotspot a
{
width: 130px; height: 88px;
position: absolute;
top: 567px; /* Top coord of hotspot (relative to parent, bottom: 20px is also valid) */
left: 44px; /* Left coord of hotspot (right: 20px is also valid); */
      z-index:100;
}

HTMLCSS

Last Comment

Chris Stanyon

8/22/2022 - Mon

Mrunal

12/20/2012

Hi mycomac,
Can you share link for this problem you are facing, so that we can get bette clear picture what you want.

SOLUTION

Chris Stanyon

12/21/2012

Become an EE member today7-DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.

Not exactly the question you had in mind?

Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.

ask a question

Jeff McClellan

12/21/2012

ASKER

I made the changes (I think) that you suggested, but still don't have the hotspot positioned over the Name/address area of the header. I've left it for you to see at http://www.agro-k.com/

The hotspot is located right below the search box.

here is the html and css I have

HTML
<div class="art-Header">
<div class="art-Header-jpeg">
<a href="http://www.agro-k.com/index.php?option=com_alfcontact&Itemid=148" class="hotspot" title="Contact Us"> </a>
</div>
</div>

CSS
div.art-Header-jpeg
{
      position: absolute;
      z-index:-1;
      top: 30;
      left: 0;
      width: 906px;
      height: 150px;
      background-image: url('../images/Header.png');
      background-repeat: no-repeat;
      background-position: center center;
}
div.art-Header-jpeg a.hotspot
{
width: 130px; height: 88px;
position: relative;
top: 44px; /* Top coord of hotspot (relative to parent, bottom: 20px is also valid) */
left: 567px; /* Left coord of hotspot (right: 20px is also valid); */
      z-index:100;
}

ASKER CERTIFIED SOLUTION

Get an unlimited membership to EE for less than $4 a week.

Unlimited question asking, solutions, articles and more.

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck