-1
Je crée un site Web qui fait défiler les différentes divs à l'aide d'ancres. Cependant, lorsque je clique sur un lien, ce div ancré n'est pas centré sur la page. J'ai placé mes divs absolument mais je n'ai aucune idée si cela l'affecte? Quelqu'un at-il la moindre idée de comment centrer les divs en utilisant des ancres? S'il vous plaît aider!Balise d'ancrage non centrée sur la page après avoir cliqué sur
<!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>
Et voici mon 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;
}