CSS Hotspots on Centered Background Image

HTML & CSS
1

Hello, this issue is driving me nuts. I’m wondering if one of you good folks might be able to help me out.

The Problem:
I am working on a banner that has css hotspots over a div’s background image (the banner image) . I originally had the banner aligned to the left, and all worked fine. But then I decided I want to center the div and its’ background image in the div it was wrapped by, so the hotspots will need to move to follow the image when the browser window is resized. And that’s where it went wrong. No matter what I do, the hotspots stay in the same place.

I would love to link to the actual page I am working on, but it’s a client’s page in progress, and I’m not allowed. But, I can show you the styling and the structure.


here is the structure code:

<div class=“banner-wrap”>
<div class=“banner”>
<a href=“1.html” class=“hotspot1”>
<a href=“2.html” class=“hotspot2”>
<a href=“3.html” class="hotspot3>
</div>
</div>

Here is the styling:

This div takes up the entire width of the page. It wraps the banner div.:
.banner-wrap {
width:100%;
height:388px;
float:left;
position:relative;
background-repeat: repeat-x;
}

This div is 970px and is centered in in the banner-wrap. It contains the image that moves when the browser is resized, and wraps the hotspots:
.banner {
height:388px;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
background-position: center top;
}

This is a sample hotspot div. that contains the position and size specs for the hotspot. It wraps the hotspot links:
.banner .hotspot1 {
width: 90px;
height: 90px;
position: absolute;
top: 30px;
left: 30px;
}

What I’ve Tried:

I’ve tried the following to no avail:

(1) Set the .banner class to a fixed width of 970px.

(2) Set .banner .hotspot positioning to percentages instead of fixed coordinates. Made no difference.

(3) set .banner .hotspot position to relative. No effect

Can anyone tell me what I did wrong?

Thanks a bunch,
MIke

2

Can anyone tell me what I did wrong?

Hi Mike, Welcome to the forums :slight_smile:

You have placed position:relative; on the wrong div, it belongs on the .banner div.

AP elements always position themselves from the nearest positioned ancestor, by using position:relative; on the div you want to position from you will establish the containing block.

You should also be able to loose that 100% wide float on the .banner-wrap and just let it be a static block with a default width of 100%.
Looks like the hotspots have unique positions so I would opt for an ID on those.

Try this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
}
.banner-wrap {
    [COLOR=#ff0000]/*width:100%;*/[/COLOR]
    [COLOR=#0000cd]height:388px;[/COLOR]
[COLOR=#ff0000]    /*float:left;*/
    /*position:relative;*/[/COLOR]
    background-repeat: repeat-x;
}
.banner {
    [COLOR=#0000cd]width:970px;
    margin:0 auto;
    position:relative;[/COLOR]
    height:388px;
    background:red url(images/banner.jpg) no-repeat 50% 0;
}
    [COLOR=#0000cd]#hotspot1[/COLOR] {
        width: 90px;
        height: 90px;
        position: absolute;
        top: 30px;
        left: 30px;
        background:lime;
    }
    [COLOR=#0000cd]#hotspot2[/COLOR] {
        width: 90px;
        height: 90px;
        position: absolute;
        top: 90px;
        left: 230px;
        background:yellow;
    }
    [COLOR=#0000cd]#hotspot3[/COLOR] {
        width: 90px;
        height: 90px;
        position: absolute;
        top: 150px;
        left: 430px;
        background:orange;
    }
</style>

</head>
<body>

<div class="banner-wrap">
    <div class="banner">
        <a href="1.html" [COLOR=#0000cd]id[/COLOR]="hotspot1">1</a>
        <a href="2.html" [COLOR=#0000cd]id[/COLOR]="hotspot2">2</a>
        <a href="3.html" [COLOR=#0000cd]id[/COLOR]="hotspot3">3</a>
    </div>
</div>

</body>
</html>
3

Hi, thanks for the welcome and thanks for answering this post on a Saturday; I wasn’t expecting that.

My goodness, that worked perfectly! I was tearing my hair out over this for 5 days!

Thank you so much!!!

Mike