I have been struggling to place a div over another div that contains an image. The div needs to have a simple HTML link just like the example shown in this picture:
However, when the page loads, the URL is not centered on the image as you can see on the live site here:
Here is the HTML code:
<html>
<head>
<meta charset="utf-8">
<title>ThreatMetrix Maintenance Page</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="apDiv1"><a href="http://threatmetrix.com/support">http://threatmetrix.com/support</a></div>
<div id="image"><img src="fraud-fighter.png" width="977" height="750" alt="ThreatMetrix Maintenance Page" /></div>
</div>
</body>
</html>
In the CSS section:
@charset "utf-8";
/* CSS Document */
body {
background-color: #3fa9f5;
/*background-image:url(fraud-fighter.png);*/
background-repeat:no-repeat;
background-position:center;
background-position:top;
font-size : 1.5em;
font-family : Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a:link { background-color: transparent; color:#f28a1a}
a:visited { background-color: transparent; color:#f28a1a}
a:active { background-color: transparent; position:relative}
a:hover { background-color: transparent; color:#cb7518}
a.noformat { text-decoration: none; color: #121212}
#container {
width: 1000px;
height: 800px;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}
#apDiv1 {
margin-top: 240px;
text-align: center;
position:absolute;
}
#image {
z-index: 10;
}
I appreciate any assistance with this issue. Thank you! -Dean