CSS powered fake image map

programming web dev
1

I’m trying to make this fake image map so I can make that post-it note a link. (big red box)
I think it’s coming together pretty nicely but when you zoom in/out its position stays relative with the page.

I’d like to keep it over the post-it at all times. Any suggestions?

The Problem

CSS:


html {
	height:100%
}
body {
	margin:0 auto;
	background-color:white;
	font-family:Verdana, Geneva, sans-serif;
	font-size:1em;
	line-height:1.8em;
	color:black;
	height:100%;
}
#container {
	width:969px;
	margin:0 auto;
}
#header {
	margin:0 auto;
	clear:both;
	background-image:url('../images/header.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	background-color:white;
	min-height:200px;
text-indent:-9999px;
	width:100%;
	min-width:969px;
}
.imagemap {
	display:block;
	height:125px;
	width:130px;
	float:left;
	position:relative;
	top:50px;
	left:720px;
background-color:red;
}

HTML:


<body>

<div id="header"><a href="#"><div class="imagemap"></div></a></div>
<div id="container">
	<div id="mid">
		<div class="dropdowns">Drop Downs</div>
		<div class="summary">Summary</div>
	</div>
	<div id="content">
		<div class="links">Links</div>
		<div class="video">Video</div>
	</div>
</div>
<div id="footer">Footer</div>

</body>

Thanks in advance for the help guys. :beer2:

[whisper]In contrast to other questions I’ve posed and not received answers on, I’m trying to make this as clearly laid out as possible.[/whisper]