PHP and HTML5 header

Dear PHP Help Forum,

I always thought that I was at least good enough with PHP to make my Wordpress websites work properly. However, I now seem to have stumbled upon a problem I cannot fix myself. Therefore I am politly asking if anyone could help me out with the following:

I have made a website for use in Wordpress and I wanted to add a HTML5 header into it, which becomes smaller when scrolling down but stays at the top of the browser. However, I have made a mistake and it is probably enormously simple, but I do not know PHP and HTML5 well enough to fix it. I have created two pages, of which you can find the source code down below, to illustrate the problem.

First of all, what it is supposed to do. This is a .html file.
http://www.bananaweb.nl/wp-content/themes/lauwersloop/index.html

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Lauwersloop 2014</title>
	<link rel="stylesheet" type="text/css" href="style/reset.css">
    <link rel="stylesheet" type="text/css" href="style/default.css">
	<script src="style/jquery.js"></script>
	<script type="text/javascript">
		$(document).on("scroll",function(){
			if($(document).scrollTop()>100){ 
				$("header").removeClass("large").addClass("small");
				}
			else{
				$("header").removeClass("small").addClass("large");
				}
			});
	</script>
</head>

<body>
	<header class="large">
    <nav>
	<img class="logo" src="wdd.png"/>
	</nav>
	</header>

	<section class="stretch">
	<p>Let's get that menu small!</p>
	<p class="bottom">End of the line.</p>
	</section>
	
</body>

</html>

However, when putting it into a .php file (multiple .php files actually) I do something wrong. Here is the example:
http://www.bananaweb.nl/lauwersloop/

HEADER.PHP

[code]

Lauwersloop 2014 This is the header. [/code]

INDEX.PHP

[code]<?php require("header.php"); ?>

<section class="stretch">
<p>Let's get that menu small!</p>
<p class="bottom">End of the line.</p>
</section>
<?php require("footer.php"); ?> [/code]

FOOTER

[code]Here is the footer.

[/code]

The CSS-files and JS-file which are referred to in the respective heads are the same for both documents. Can anyone help me out with this (probably very simple) problem?

The problem is here:

[code]

[/code]

The URL’s they are producing are as follows:

[code]

[/code]

Notice the style.css bit near the end of the url, well that’s causing all 3 lines to open the style.css file instead of the correct files, reset.css/default.css/jquery.js

Fix that up and you should be good to go.
Red :wink:

Sponsor our Newsletter | Privacy Policy | Terms of Service