Jquery 为什么我的内容总是在一个div中向左移动？_Jquery_Css

Jquery 为什么我的内容总是在一个div中向左移动？

jquery css

Jquery 为什么我的内容总是在一个div中向左移动？,jquery,css,Jquery,Css,基于本教程，网址为：为什么我的内容总是左移而不居中我的意思是，整个content div从浏览器窗口的最左侧开始，然后返回到网站的中心始终向左移动，然后返回中心起初，我把我的网站全部放在浏览器窗口的左边，现在我决定把它全部放在中间。通过这样做，网站现在全部居中，但当我单击“features”选项卡时，代码中未包含的jQuery动画将从浏览器的最左侧执行，而不是从中心执行我认为我的CSS中有某种东西导致了它。我还特意留下了html头标签 <style type="text/css

基于本教程，网址为：

为什么我的内容总是左移而不居中

我的意思是，整个content div从浏览器窗口的最左侧开始，然后返回到网站的中心

始终向左移动，然后返回中心

起初，我把我的网站全部放在浏览器窗口的左边，现在我决定把它全部放在中间。通过这样做，网站现在全部居中，但当我单击“features”选项卡时，代码中未包含的jQuery动画将从浏览器的最左侧执行，而不是从中心执行

我认为我的CSS中有某种东西导致了它。我还特意留下了html头标签

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


$（文档）.ready（函数（）
{
$（“#content”）.load（'home.html'）；
$（'#导航a'）。单击（函数（）{
$（“#nav”）.find（“a”）.removeAttr（“id”）；
$（this.attr（“id”，“current”）；
});
$（'#nav li a'）。单击（函数（）{
var toLoad=$（this.attr（'href'）；
$（'content'）.hide（'fast'，loadContent）；
函数loadContent（）{
$（'#content'）.load（toLoad'，showNewContent（））
}  
函数showNewContent（）{
$（'内容'）.show（'正常'）；
}  
返回false；
});
});




欢迎
版权所有©2010保留所有权利。

另外，我如何将标题图形图像转换为a href，以便用户单击时转到a href url？

这可能是

hide（）

show（）

动画的产物（因为您使用了持续时间）

如果您尝试不同的动画，如

slideUp（）

slideDown（）

，效果很好

[更新]

代码中的问题是

margin: 0 auto;

属于

#内容

规则

它应该是

#navwrapper

规则，它也不应该是

100%

，而是

996px

。。。这样，整个网站都可以居中运行。

如果您想单击标题图像并将其带到某个URL，请将其粘贴到Href标记中。

这个问题是如何获得投票的？没有可能的答案。。。在教程页面上的css中，没有任何迹象表明你的div应该在中间。对不起，我现在添加了我的代码，而且，我的网站与实际的tute有点不同。希望你能发现为什么它会移动/轻弹到浏览器的左侧，然后回到中间。谢谢。但是你说你已经编辑了标记，并且没有包括jQuery，这是一个值得商榷的地方。仅仅是你制作实际动画的一点点地方就足以让我们开始了。不用担心，现在我已经将jQuery组件包括到了我的原始文章中。谢谢。谢谢你-不确定为什么它会起作用。我只是想知道，我需要做什么来替换slideUp和SlideDown？只需将

hide（'fast'，loadContent）

更改为

slideUp（'fast'，loadContent）

和

$（'content'）。将（'normal'）

更改为

$（'content'）。SlideDown（'normal'））

谢谢，加布-我已经准备好了，不过还是要谢谢你。就像你说的，现在很好用。还不明白那个穿短裙的家伙是怎么用hide/show的？对幻灯片效果满意。谢谢。@扁桃体，刚刚发布了css的问题。。。你用两种不同的方法集中了内容和网站的其他部分。谢谢加比，你做到了。感谢您发现css的问题。现在一切都很好。