2014-08-27 42 views
0

我正在開發一個網站,並在主頁中包括兩個菜單。主頁和兩個菜單的擴展名爲.php。我在Apache服務器上進行本地測試。PHP菜單在獨立工作,但不包括時

問題:我的一個菜單是頂部導航欄,它在我的本地服務器上正確顯示,但其菜單項/鏈接不可點擊並且不顯示翻轉效果。這是僅當我通過PHP包含的菜單加載主頁時。 當我加載菜單頁面時(仍在本地服務器上),問題不存在,我的菜單顯示並正常工作,包括鏈接。

請參閱下面的代碼:

首頁

<!doctype html> 
<html> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 

<title>Home</title> 

<!-- various css imports, removed for readability --> 

</head> 

<body id="home"> 

<?php include('top-bar.php'); ?> 

<!-- Container div --> 
<div id="container"> 

<?php include('menu.php'); ?> 

<!-- Container div --> 
</div> 

</body> 
</html> 

菜單欄

<!doctype html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<!-- various css imports, removed for readability --> 

<title>Topbar</title> 
</head> 


<body id="home"> 

<div id="headerbar"> 

     <!-- Centered container --> 
     <div id="container"> 

     <!-- Top bar --> 
     <div id="header"> 


     <div id="maintitle"> 
      <span style="color: #499DF5">My</span><span style="color: #FFFFFF"> Name</span>  </div> 

     <!-- Second menu bar --> 
     <div id="menutop"> 
      <ul> 
       <li id="contactme" title="Write me an email"><a href='#'><span>Contact me</span></a></li> 

       <li class="last" id="vcf"><a href="#" onClick="MyWindow=window.open('contact-card-popup.html','MyWindow','width=300,heig‌​ht=150'); return false;" title="Download my contact card (.vcf or .csv)">Download 
    contact card</a></li> 

       <li class="last" style="float: right;" id="googleplus"><a target="_blank" title="Follow me on Google+" href="https://plus.google.com/u/0/114402922247766544960/posts"> 
     <i class="fa fa-google-plus fa-fw"></i></a></li> 


       <li style="float: right;" id="linkedin"><a target="_blank" title="View my LinkedIn profile" href="http://www.linkedin.com/in/myprofile"> 
     <i class="fa fa-linkedin fa-fw"></i></a></li> 

       <li style="float: right;" id="visualize.me"> <a target="_blank" href='http://vizualize.me/myprofile?r=myprofile' title='View my infographic resume on Vizualize.me'><span style="font-weight:bold">Visualize.me</span></a></li> 

      </ul> 
     </div> <!-- End Second menu bar --> 

     <div id="jobtitle">Jobtitle</div> 

     <!-- End header div --> 
     </div> 

     <!-- End Centered container --> 
     </div> 

<!-- End headerbar div --> 
</div> 

</body> 
</html> 

和CSS:

/* Layout 
-----------------------------------------------------------------------------*/ 
body { 

} 


#container { 
width:1020px; 
position:relative; 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -100px; 
} 

#headerbar{ 
width:100%; 
min-width:500px; 
height:130px; 
position:absolute; 
background: #414141; 
} 

#menutop { 
min-width:500px; 
width:1020px; 
position:absolute; 
margin-top:20px; 
} 

#wrapper { 
clear:both; 
height:900px; 
width:1020px; 
position:relative; 
margin: 0 0 0 -25px; 
} 


/* Top menu: header 
-----------------------------------------------------------------------------*/ 

#header { 
font-family:'Open Sans', sans serif; 
} 

#maintitle { 
font-weight:bold; 
font-size:34px; 
width:250px; 
height:40px; 
min-height:60px; 
position:relative; 
margin-left:40px; 
margin-top:25px; 
} 

#jobtitle { 
color: #FFFFFF; 
font-size: 14px; 
width: 230px; 
height: 25px; 
position: absolute; 
margin-left: 270px; 
margin-top: 9px; 
left: 16px; 
top: 36px; 
} 

我試圖取代我的PHP包括

<?php include('top-bar.php'); ?> 

相對於根的鏈接:

<?php include($_SERVER['DOCUMENT_ROOT']."/my-website/top-bar.php"); ?> 

這並沒有改變任何東西。

我也對W3C進行了驗證,以防萬一它會拋出任何明顯的錯誤,但事實並非如此。

關於爲什麼PHP菜單在獨立模式下工作但不包括在何時的任何想法?謝謝。

編輯:

在我更新了他所創造的的jsfiddle摩西的一個很好的建議。由於看起來我不能在其中使用多個文件,因此我將頂層菜單的代碼放在執行php導入的主頁中。這樣做顯然會使菜單中的鏈接不工作,所以聽起來像是一個CSS問題。然而,我不知道問題出在哪裏。

http://jsfiddle.net/0ows5vym/4/

而這只是菜單,在獨立工作的罰款:http://jsfiddle.net/fdbvwL3t/

注:請diregard最右側的菜單中沒有顯示的圖標,它們是基於其他進口我不能很容易在這裏重現。這部分工作在當地很好。

+0

它可能只是一個路徑問題。你嘗試過相對路徑嗎? 'include'../ aFolder/AnotherFolder/top-bar.php';' – Jay 2014-08-27 17:38:20

+0

您包含的CSS似乎並不完整 - 請參閱http://jsfiddle.net/0ows5vym/。請在jsFiddle上發佈完整的工作示例。還將該非工作示例的「查看源」作爲單獨的jsFiddle發佈。 – 2014-08-27 17:43:14

+0

傑伊,我試過絕對路徑和相對路徑,都不行。我的路徑是正確的,因爲首先加載並顯示菜單,所有php文件都在同一個文件夾中,這使得它非常簡單。還嘗試了下面的dirname(FILE)消化,它會像($ _SERVER ['DOCUMENT_ROOT'] ...)一樣加載並顯示菜單,但在任何情況下鏈接都不起作用。 – Darkane 2014-08-27 20:13:47

回答

0

我終於明白了。在這裏玩JsFiddle:http://jsfiddle.net/0ows5vym/4/讓我走上正軌。

我有一個「容器」元素被稱爲兩次,一次在我的PHP菜單,然後再次在主頁面。如果我想多次調用它,我犯了一個錯誤,即爲該容器提供了一個應該是類的唯一ID。

將容器「id」替換爲「class」可以修復它,請參閱此處。 http://jsfiddle.net/0ows5vym/6/

<!-- Container div --> 
<div class="container"> 

<?php include('menu.php'); ?> 

<!-- Container div --> 
</div> 

Moshe - 謝謝你讓我知道JsFiddle。我喜歡那個工具。你的建議也幫助我找到答案。

0

您將使用dirname(FILE)來獲取當前目錄。

嘗試使用

include(dirname(__FILE__). "/my-website/top-bar.php") 

代替$ _ SERVER [ 'DOCUMENT_ROOT']

FILE不斷會給你到當前文件 和目錄名(FILE)的絕對路徑來獲得目錄當前包含的文件

+0

我試過了,它給了我相同的結果比使用($ _SERVER ['DOCUMENT_ROOT'] ...),我認爲是有道理的,因爲我所有的PHP文件都在同一個網站的根文件夾。通過「相同的結果」,我的意思是菜單正確加載並顯示在主頁中,但菜單項不起作用,它們不可點擊並且鏈接沒有翻轉。 – Darkane 2014-08-27 20:16:37

0

在哪個文件中試圖加載你的php文件?

,如果它在你的index.php(可能), 那麼你需要您考慮您的路徑面對,你有它

讓假設文件:

你有一個絕對路徑爲您的index.php像

/var/www/html/thisismywebsite/index.php 

,你的文件是

/var/www/html/thisismywebsite/project/someinnerfolder/topbar.php 
上面的

不會解決它。

相反,你可以選擇一個解決方案一樣

<?php 
define('BASEPATH', dirname(__FILE__) . "/"); 

include(BASEPATH . "project/someinnerfolder/topbar.php"); 

只要記住,在包括必須是相對於應用程序的入口點,因此您必須包括相對於你開始你的應用程序。

獎金:

不要與標籤開始所有的文件,等等,因爲這將在稍後給你的問題。寧願選擇用高手來保持這種html

+0

謝謝 - 但是這不是一個路徑問題,尤其是因爲所有的php文件都在我網站的根目錄下(現在)。我知道,直到我發佈小提琴之前,我不會很容易地理解實際展示的內容,下次我會記得。你的獎勵聽起來有趣!我會看看主頁。 – Darkane 2014-08-27 21:01:17

+0

它刪除了我的標籤,傻了我。 – Bolovsky 2014-08-28 16:17:48