Sur la base de ce tutoriel à:Pourquoi mon contenu est-il toujours décalé vers la gauche dans un div?
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
Quelqu'un peut-il aider pls à pourquoi mon contenu se déplace toujours vers la gauche et ne pas rester centré? Je veux dire par là que tout le div de contenu commence du côté le plus à gauche de la fenêtre du navigateur et revient ensuite au centre du site Web.
Décale toujours vers la gauche, puis revient au centre. Au départ, j'avais mon site Web tout à gauche de la fenêtre du navigateur et maintenant j'ai décidé de tout déplacer vers le centre. En faisant cela, le site est maintenant centré mais quand je clique sur l'onglet "caractéristiques", l'animation jquery que je n'ai pas incluse dans le code est jouée depuis le navigateur le plus à gauche et non le centre.
Heureusement, il y a quelque chose dans mon CSS qui le cause. J'ai également laissé comment les étiquettes de tête html sur le but.
<style type="text/css">
<!--
/** {
border: 1px solid red !important;
}*/
body {
background-color: #FFF;
text-align: center; /* Center align for IE */
}
#navwrapper {
width: 100%;
}
#header {
width: 100%;
height: 113px;
}
#listnav {
width: 996px;
height: 59px;
margin-left: 1px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #393;
margin: 0 auto; /* Center align for Good browsers like Firefox, Opera, Netscape */
text-align: left;
}
#listnav ul {
list-style-type:none;
padding: 0;
margin: 0;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
#listnav li {
display: inline;
float: left;
margin-right: 4px;
width: 160px;
border: 1px solid #990;
border-bottom: none;
font-weight: lighter;
background-color: #9C0;
background-image: url(images/backtab.jpg);
background-repeat: repeat-x;
}
#listnav li a {
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
color: #FFF;
text-align: center;
display: block;
}
li {
text-decoration: none;
}
li a {
text-decoration: none;
}
#listnav li a:hover {
text-decoration: none;
background-color: #71BFEE;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
color: #FFF;
background-repeat: repeat-x;
}
#listnav li a:active {
text-decoration: none;
}
#listnav li a#current
{
color: #FFF;
background-color: #71BFEE;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFF;
}
#nav {
margin: 0 auto;
}
#content {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #333;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #990;
border-bottom-color: #990;
border-left-color: #990;
padding: 5px;
background-color: #FFF;
width: 984px;
margin: 0 auto;
text-align: left;
}
#foot a {
color: #FF9933;
float: none;
}
-->
</style>
<script src="jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#content").load('home.html');
$('#nav a').click(function(){
$("#nav").find("a").removeAttr("id");
$(this).attr("id" , "current");
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href');
$('#content').hide('fast',loadContent);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal');
}
return false;
});
});
</script>
</head>
<body>
<div id="navwrapper">
<div id="header">
<img src="images/header.jpg" width="996" height="112" alt="myWebsite" longdesc="http://www.myWebsite.com" />
</div>
<div id="listnav">
<ul id="nav">
<li><a href="home.html" id="current">Home</a></li>
<li><a href="features.html" >Features</a></li>
</ul>
</div>
<div id="content">
<h2>Welcome!</h2>
</div>
<div id="foot">Copyright © 2010 All rights reserved. </div>
</div>
</body>
Merci.
ps Est-ce que les gens peuvent également me faire savoir comment transformer mon image graphique en en-tête en un href alors quand l'utilisateur clique dessus, va à l'URL href?
Votre code s'il vous plaît? – Finbarr
Comment cette question a-t-elle été mise à jour? Il n'y a pas de * réponse * possible ... O.o –
Dans le css qui est sur la page du tutoriel, il n'y a aucune indication que votre div devrait être au centre. – MyGGaN