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

而且無論路徑位於站點結構中的哪個位置,頁面的路徑都不會中斷。