Hi.
Based on this tutorial at:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
Can anyone pls assist as to why my content always shifts to the left and doesn't stay centered?
By this I mean the whole content div starts from the leftmost side of the browser window and then returns back to the center of the website.
Always shifts to the left and then returns to the center.
Initially I had my website all to the left of the browser window and now have decided to move it all to the center. By doing this though, the website is now all centered but when I click on the "features" tab, the jquery animation which I have not included in the code gets performed from the leftmost of the browser and not the center.
Hopefully there is something in my CSS that is causing it. Also I have left how html head tags on purpose.
<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>
Thanks.
ps Can people also let me know how to turn my header graphic image into a a href so when the user clicks on it, goes to the a href url?