Question

修改

我的index.css覆盖了我原来的标题布局。观看您的身份证和课程！

修改

我使用jQuery加载我的网站页眉和页脚部分。然后在我的索引＆amp;上显示它们其他页面。但是，每当我尝试加载它时，它似乎调整了我的标题。任何人都有任何线索可能是为什么？我对这个问题进行了一些研究，但没有找到任何有用的东西。

这是影响它的网站。

INDEX

HEADER

这里是JSFiddle，其代码中包含我的代码

JSFiddle for Header

和我的索引代码我如何调用标题

<html>
    <head>
        <title>HobbsBear Studios</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link href='http://fonts.googleapis.com/css?family=Exo' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="_css/index.css" type="text/css" />
        <link rel="stylesheet" href="_css/photobanner.css" type="text/css" />
        <script type ="text/javascript" src="_javascript/photobanner.js"></script>
        <link rel="icon" href="../favicon.ico" type="image/x-icon">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            $(function(){
                $("#header").load("header.html");
                $("#footer").load("footer.html");
            });
        </script> 
    </head>
    <body>
        <div id="header"></div>
        <!-- A buncha stuff in the middle --!>
        <div id="footer"></div>
    </body>
</html>

所以它显示的所有元素都没有在正确的布局中。有什么想法吗？

Answer 1

这是因为＆＃39; Slidy容器＆＃39;您正在使用的代码会覆盖您在标题中使用的类名。您可能必须更改这些类名。在2分钟内，我发现以下两个类正在为您打破它们，它们来自index.css页面。

#menu {
 position: absolute; 
 top: 80%; 
 left: 25%; 
 width: 50%; 
 font-family: 'Exo', sans-serif; 
 font-weight: bold; 
}
#logo {
 display: block; 
 margin-left: auto; 
 margin-right: auto; 
 width: 550px; 
}

你需要在内容或标题中更改ID，因为在页面上拥有多个相同ID并不是一个好习惯，并且在某些浏览器上会抛出错误导致它＆＃39;不是有效的＆＃39; HTML结构。 ID用于定位页面上的确切特定元素，其中类用于同时定位多个元素。

解决这个问题，你应该好好去。

jQuery加载混乱布局

1 个答案: