Anchor tag not centered on page after clicking
- by jennyjune
I am creating a website that scrolls down to different divs by the use of anchors. However, when I click on a link, that anchored div is not centered on the page. I positioned my divs absolutely but I have no idea if that is affecting it? Anyone have any clue how to get the divs centered using anchors? Please help!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jean and James</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.anchor.js" type="text/javascript"></script>
<link href="jj_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navigation" align="center">
<a href="#jeanandjames" class="anchorLink">JEAN AND JAMES</a>
<a href="#feature" class="anchorLink">FEATURE PRODUCT</a>
<a href="#contact" class="anchorLink">CONTACT</a>
<a href="#work" class="anchorLink">WORK</a>
</div>
<div id="logo">
<img src="logo.gif" />
</div>
<a name="jeanandjames" id="jeanandjames">
<div id="jeanandjames" align="center">
<img src="jeanandjames.jpg" /><br />
A boutique design firm specializing in hand crafted products and graphic print work.
</div>
</a>
<a name="feature" id="feature">
<div id="feature">
<img src="baby_bowtie.gif" />
</div>
</a>
<a name="contact" id="contact">
<div id="contact">
Jean & James
Chicago, IL<br /><br />
Donec faucibus nunc eget quam pretium vel porttitor diam venenatis. Nullam egestas, quam et congue rutrum, diam mauris tempus urna, eget mattis quam quam ac erat. Vivamus lobortis nunc quis arcu lobortis vel euismod felis tincidunt. Etiam facilisis, metus et mattis tempor, erat ipsum tincidunt diam, nec aliquam velit risus a lacus. Duis tempor bibendum felis, adipiscing mattis lorem eleifend fermentum. Nulla adipiscing consequat enim id sagittis. Suspendisse venenatis scelerisque orci, sed sollicitudin erat egestas in. Nunc orci leo, adipiscing vel consectetur sit amet, rutrum vitae nulla. Mauris ut mi nunc, non condimentum risus. Donec varius consequat quam vel lacinia. Etiam et eros nec quam egestas pellentesque sit amet ac nunc.
</div>
</a>
</body>
</html>
And here is my css:
#navigation A:link {text-decoration: none; color: #FFFFFF;}
#navigation A:visited {text-decoration: none; color: #FFFFFF;}
#navigation A:active {text-decoration: none; color: #FFFFFF;}
#navigation A:hover {text-decoration: none; color: #CC9;}
#navigation {
position: fixed;
top: -1px;
left: -1px;
width: 100%;
height: 20px;
padding: 10px;
z-index: 10;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #000;
color: #FFF;
}
#logo {
position: fixed;
top: 150px;
left: 50px;
}
#jeanandjames {
position: absolute;
top: 230px;
left: 200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#feature {
position: absolute;
top: 600px;
left: 200px;
}
#contact {
position: absolute;
top: 1200px;
left: 200px;
width: 500px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
