2015-04-04 76 views
0

位于根目录中的我的索引页的CSS不起作用。我正在使用PHP来包含一个包含导航栏的标题,但导航栏的CSS不起作用。它可以在其他页面上正常工作,但位于根索引中的任何页面都没有该CSS。CSS未显示在根目录中

编辑:通过更改路径到URL然后在css的文件目录解决。

Solved 
<link rel="stylesheet" type="text/css" href="/bootstrapwebsite/CSS/main.css"> 

Index.php 
    <html> 
    <?php  
     include '/includes/header.php'; 
    ?> 
    </html> 

header.php 
    <html> 
    <title>Bootstrap Basics</title> 

    <!-- Gather all Required CSS --> 
    <link rel="stylesheet" type="text/css" href="../CSS/main.css"> 
    <link rel="stylesheet" type="text/css" href="../CSS/header.css"> 
    <link rel="stylesheet" type="text/css"  href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <!-- End the css get --> 

    <!-- Gather the jquery --> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <!-- End the jquery get --> 

    <div> 
     <header id="navigationHeader" class="navbar" role="banner"> 
      <div class="container"> 
       <nav class="collapse navbar-collapse" role="navigation"> 
        <ul class="nav navbar-nav navbar-left mainnav-menu"> 
         <li> 
          <a id="logo" href="#"><img src=""></img></a> 
         </li> 
        </ul> 

        <ul id="navbar" class="nav navbar-nav navbar-right"> 
         <li> 
         <h4><i class="fa fa-group"></i><a href="http://localhost/bootstrapwebsite/players/players.php">&nbsp;&nbsp;Players&nbsp;&nbsp;</a></h4> 
         </li>  

         <li> 
         <h4><i class="fa fa-shopping-cart"></i><a href="http://localhost/bootstrapwebsite/shop/shop.php">&nbsp;&nbsp;Shop&nbsp;&nbsp;</a></h4> 
         </li> 

         <li> 
         <h4><i class="fa fa-list-ol"></i><a href="http://localhost/bootstrapwebsite/leaderboards/leaderboards.php">&nbsp;&nbsp;Leaderboards&nbsp;&nbsp;</a></h4> 
         </li> 

         <li> 
         <h4><i class="fa fa-phone"></i><a href="http://localhost/bootstrapwebsite/support/support.php">&nbsp;&nbsp;Support&nbsp;&nbsp;</a></h4> 
         </li> 

         <li> 
         <h4> 
          <a href="http://localhost/bootstrapwebsite/Registration/login.php"><i class="fa fa-user"></i>&nbsp;&nbsp;Guest&nbsp;&nbsp;</a> 
         </h4> 
         </li>   
        </ul> 
       </nav> 
      </div> <!-- /.container --> 
     </header> 
    </div> 
</html> 

<!-- javascript to determine current page and set it as active --> 
<script> 
$(document).ready(function() {  
    //Get CurrentUrl variable by combining origin with pathname, this ensures that any url appendings (e.g. ?RecordId=100) are removed from the URL 
    var CurrentUrl = window.location.origin+window.location.pathname; 
    //Check which menu item is 'active' and adjust apply 'active' class so the item gets highlighted in the menu 
    //Loop over each <a> element of the NavMenu container 
    $('#navbar a').each(function(Key,Value) 
     { 
      //Check if the current url 
      if(Value['href'] === CurrentUrl) 
      { 
       //We have a match, add the 'active' class to the parent item (li element). 
       $(Value).parent().addClass('active'); 
      } 
     }); 
}); 
</script> 
<!-- end javascript --> 

The result of the page

回答

1

的问题是在这里:

<link rel="stylesheet" type="text/css" href="../CSS/main.css"> 
<link rel="stylesheet" type="text/css" href="../CSS/header.css"> 

如果PHP文件是在根目录下,它以 “..”,因为它doesn't存在不容访问。只要将href从“../CSS/main.css”更改为“CSS/main.css”,它应该可以正常工作。

0

如果你的文件根目录中比这必须是你的CSS文件是位于根目录中,以便修改您的代码名为“CSS”的文件夹里面的情况:

<link type="text/css" rel="stylesheet" href="CSS/main.css" /> 
<link type="text/css" rel="stylesheet" href="CSS/header.css" /> 
0

我觉得使用基本标签可能对此有所帮助。

<head> 
    <base href="websiterootdirectorypath/or/baseurl/" /> 
</head> 

这应该在您的任何CSS或脚本链接之前进行。然后在你的CSS或脚本的路径中,你只需引用从根进入的路径。因此,

<link rel="stylesheet" type="text/css" href="CSS/main.css"> 
<link rel="stylesheet" type="text/css" href="CSS/header.css"> 

而且无论路径位于站点结构中的哪个位置,页面的路径都不会中断。