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;
}
