sbswim sbswim - 2 years ago 90
PHP Question

How can a php include access the css files

I recently asked a question about my php includes and received the answer. Now that the include accesses the correct file, my html/css/javascript web pages show some hope. The only issue is that the php includes of the pages have this look:

PHP include page (not accessing css)

Instead of this:

What the page should look like (this page is not using php includes)

Is there a way for the php includes to access the css files? My current code for one page that contains the includes is:

<!DOCTYPE html>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<title> Water Polo, The Best Sport</title>
<div class="wrapper">
<div class= "content">


<?php echo'<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> <a href ="index.html">Water Polo!</a></h2></div>';>

To develop the website I am currently using MAMP and running the code which is in a folder by putting it in htdocs.

I took the header out of the php include and made the css file work with the document, but one thing remains the same. The code that I included in the document via php does not take on the effects of the css document, but the header, which now is out of the include and is written write in the document works. Is there a way to allow the code which has been included via php to access the working css file? If it would facilitate the answering process, I'll post any necessary pictures. Just comment below.

Answer Source

You have correctly identified the problem, that the HTML cannot find the CSS. That is directly because of this tag:

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

Specifically, this part of the tag:


You have told your code to look for the styles.css file in the same directory as the index.php file. Is that correct?

Usually, the web site structure looks like this:

    - css
    - js
    - includes
    - img

Your website seems to be structured like this:


Imagine yourself inside the index.php file. All files that are INCLUDEd become part of index.php, as if they were there originally. So, you are expecting to find the CSS file here (as per your <link rel="stylesheet" tag):


If they are really inside a CSS folder, then perhaps this will fix it:

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


No need to echo out your HTML in PHP, you can literally just do this:


<div class ="header">
    <h1>The Best Sport</h1>
    <h1 class="sitetitle">AllWaterPolo</h1>
    <img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
    <h2 class="homeScreenLink"> <a href ="index.html">Water Polo!</a></h2>

If the other include files are similar, then it appears your rendered file will all be HTML. Therefore, the next step is: where is your style sheet? Try this. In the address bar of your browser, type:


And see if your stylesheet appears. If not, try this:


If the second one works, then change this:

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

to this:

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

Note: I might not have your path structure correct. Amend as required.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download