I have a php document and am using include to include my drop down navigation. The navigation is an external html with external js and css elements.

Code is:

<div id="nagivation">
    <?php include ("navigation.html");?>
  <!--end #navigation!-->

Unfortunately my drop down works great in it's html page, but once brought into my main page, none of the hovers work.

In my navigation.html, I have included:

<script type="text/javascript" src="js/ecmNavigation.js"></script>

<link href="css/ecmNavigation.css" rel="stylesheet" type="text/css" />
<link href="css/ECM_HelpFile.css" rel="stylesheet" type="text/css" />

in my template.php, I have included:

<link href="css/ECM_HelpFile.css" rel="stylesheet" type="text/css" />
<link href="css/ecmNavigation.css" rel="stylesheet" type="text/css" />

Any suggestions? I need to keep the navigation in a global document, but have not been able to use iframe or obkect in order to embed as the whole menu will not display as it is confined to the size of iframe and object. (the menu is huge)

  • If you just want to include a file's contents without processing it as PHP, then just use readfile(). include() and require() are only used when the file contains PHP. Sep 3, 2010 at 13:08

4 Answers 4


This is more suited to Stack Overflow, but regardless...

Like bpeterson said, it sounds like a relative path problem with the CSS/JS. This is easily fixed by starting all URLs with a leading slash and putting the path from the site root. For example, if a file is at:


You can include it with:

<link href="/css/ecmNavigation.css" rel="stylesheet" type="text/css" />

Secondly, it looks like you are including the CSS twice, so will want to remove those two lines from the template.php file.

  • +1 Good call, goat....duh, relative to root...that's what I get for staying up until 2:30am debugging JQuery.... Sep 3, 2010 at 14:59
  • "including the CSS twice" - It would actually be invalid HTML to include the CSS (link elements) inside "navigation.html", which is inside the body element of the parent document.
    – MrWhite
    May 5, 2015 at 7:56
  • @w3d No it's not, you can have <link> elements anywhere. May 6, 2015 at 11:19
  • @DisgruntledGoat In HTML5 you can have link elements in the body but there are restrictions - the itemprop attribute is required but the rel attribute should be omitted. With the RDFa 1.1 extension the property attribute allows you to have link elements in the body - but isn't this a different animal? I'm not convinced it is strictly valid to have link elements that reference external stylesheets (ie. rel="stylesheet") in the body? (Although browsers do support this.)
    – MrWhite
    May 6, 2015 at 15:51
  • @w3d hmm strange, the spec does say "If the rel attribute is used, the element is restricted to the head element" but right before that it says "A link element must have a rel attribute" so it's kind of contradictory. Anyway I don't think this matters one bit since browsers allow link elements anywhere. May 7, 2015 at 17:21

If I was a betting man, I'd say that the links you provided inside your navigation html are trying to go relative to the URL of the page your're including it from. To test, change the links to absolute (http://www...) and see if they work...if they do, then you know what the problem is.

When I'm confused about includes, I'll load the page and view source. There, you can click on the links and see if they return the included file. You'd be surprised how many times they fail without error. I suspect that the second set of includes you did in the .php file are giving it the css it needs, but the javascript file it needs is what's causing the entire thing to fail. Clicking links in source will tell you for sure.

If the above tests works, you've got choices....leave it absolute, in which case you know where it's going to come from every time, no matter where you include from. Or, you could include the JS from the main file that does the include, which certainly could be appropriate depending on your structure and coding style. Finally, you could change over to .php on the nav file and dynamically condition the URL prior to including it.


I had a similar problem when using dreamweaver with fluid grid layouts and the issue for me was the boilerplate.css file that dreamweaver adds.

removing line 245:

.hidden { display: none !important; visibility: hidden; }

fixed it for me

  • This isn't really the "same problem". The OP's problem was caused by the use of relative paths.
    – MrWhite
    May 5, 2015 at 8:00
  • Similar then..? I think it'd be useful for others with similar problems who wind up here through google as maybe my solution also works for them. May 5, 2015 at 9:10

I believe that you will need to rename your navigation file to navigation.php and then use

<div id="nagivation">
    <?php include("navigation.php");?>

to get what you are looking for. Most scripting languages will not include raw .html files. Also make sure there is not space between 'include' and '()' otherwise it will not execute. S a simple rename with no changes to what is inside should fix this.

One last thing you should look at is including the .js file

<script type="text/javascript" src="js/ecmNavigation.js"></script>

after your css files instead of before. This should improve the download speed for your users.

  • 2
    Actually, it will work when using include() regardless of the file extension. The file extension directive is only used by the webserver to determine which files to parse with PHP. PHP itself doesn't care what the file extension is, nor do include(), require(), etc. However, it's a bad idea to put PHP code in .html files since the user could fetch the file directly and see your code. Sep 3, 2010 at 13:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy