I have a site with index.php in the root folder, images in /img , and overview.php in /content. I have a sidebar.php file that is included in both index.php and overview.php. How should I refer to /img/image.gif if I include a link in each file?
The location of image.gif changes relative to the location of the file that references it.
Using /img/image.gif in sidebar.php will work in index.php, but it fails for the file located at /content/overview.php.
The only solution that I can see is to either include a separate sidebar.php in each sub-directory, or include an /img directory in every sub-directory.
The best suggestion that I can find is to use the <base> HTML tag as suggested here:
Change relative link paths for included content in PHP
However, in the same link, SamGoody suggests that the <base> tag is no longer properly supported in Internet Explorer, since version 7.
I'd like some insight on the matter before committing to a course of action.
Thanks.
EDIT: I am using the wrong approach below with "../"
Example-
root/index.php:
...
<link rel="stylesheet" type="text/css" href="style.css" />
<title>title</title>
</head>
<body>
<?php include('include/header.php'); ?>
<?php include('include/menu.php'); ?>
...
root/include/header.php:
...
<div id="header">
<span class="fl"><img src="img/dun1.png"/></span><span class="fr"><img src="img/dun2.png"/></span>
...
root/content/overview.php:
...
<link rel="stylesheet" type="text/css" href="../style.css" media="screen" />
<title>Overview</title>
</head>
<body>
<?php include('../include/header.php'); ?>
<?php include('../include/menu.php'); ?>
...
Using /img/image.gif in sidebar.php will work in index.php, but it fails for the file located at /content/overview.php
But it shouldn't. The preceding / makes it an absolute path which will work from any point on the server. If this doesn't work for you, there's a problem somewhere - in that case, post some examples.
Unless you are planning to move the whole site into a sub-directory one day, or move images to a Content Delivery Network (both actions would require re-writing the addresses) you can safely use absolute URLs.
Related
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:
Instead of this:
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>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<title> Water Polo, The Best Sport</title>
</head>
<body>
<div class="wrapper">
<?php
include'../includes/header.php';
?>
<?php
include'../includes/navbar.php';
?>
<div class= "content">
</div>
<?php
include'../includes/footer.php';
?>
</div>
</body>
</html>
Header.php
<?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"> Water Polo!</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.
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:
href="styles.css"
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:
public_html
- css
- js
- includes
- img
Your website seems to be structured like this:
includes
public_html
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):
public_html/style.css
If they are really inside a CSS folder, then perhaps this will fix it:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Update:
No need to echo out your HTML in PHP, you can literally just do this:
header.php
<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"> Water Polo!</h2>
</div>
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:
localhost/styles.css
And see if your stylesheet appears. If not, try this:
localhost/css/styles.css
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.
Short answer = no.
You may want to look into using SASS. Besides minifying the css files, you can also set it up so the main (in your case styles.css) pull from several SASS files. For example you could have the following SASS files: main.scss, header.scss, navbar.scss, & footer.scss. If your IDE supports SASS, when you save any one of these files it can automatically compile all four into your styles.css file. Then all you need is to reference that one file and you are set.
http://thesassway.com/beginner/how-to-structure-a-sass-project
rootFolder
index.php
cssFolder
fontAwesomeFolder
-main.css
-tablet.css
imagesFolder
-image.jpg
includesFolder
-navMain.php
-footer.php
pagesFolder
-contactUs.php
jsFolder
-core.js
I have topology here about my website. Thing is, when I tried to link/include navMain.php in the includesFolder to the contactUs.php in the pageFolder, some other links are messed-up, particularly - css and images files. They don't seems to work.
The issue is the PHP INCLUDE. Alright. It works fine with the index.php. But not with the file in the subdirectories.
How am I going to bring this around. Some said, I'd use config.php. I tried, didn't work. If ever I'm going to use Config.php, what exact codes do I have to place in there and what codes to the other documents.
Thanks for the help!
The problem seems to be that your assets urls are relative to your file location. To avoid this you can always use / to make them relative to your root url and avoid getting 404 errors:
<link rel="stylesheet" type="text/css" href="/cssFolder/main.css" />
<link rel="stylesheet" type="text/css" href="/cssFolder/tablet.css" />
I'm building a PHP based site with this directory structure
index.php
css
style.css
bootstrap.css
includes
header.php
footer.php
bikes
road.php
mountain.php
The Problem
So I'm working on road.php and I obviously need to be able to link to both style.css and bootstrap.css, but when I declare at the start of road.php to include the header.php and footer.php it is like as if it cannot find the stylesheets and the site reverts back to the default 1990s look.
I have also found that any form of link on the page loads a 404. I'm only just starting out with PHP because I need some more power in my sites, but I just can't seem to get my head around the super basic things.
I just don't know what to do and I'm finding myself turning my back on the whole PHP language.
Thanking you in advance,
Stu :)
I can't be certain without seeing the actual content of header.php (in perticular the part where you import the stylesheets), but it sounds like you are using a relative path to your stylesheets. Something like <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />. This works fine for index.php, but since the other pages are inside the subfolder bikes, they will be looking for the CSS files in yoursite.com/bikes/css.
The solution is to provide an absolute path. Something like this:
<link rel="stylesheet" type="text/css" href="http://yoursite.com/css/style.css" media="screen" />
This way, it doesn't matter if the page is inside a subfolder (or a subfolder of a subfolder) - it will allways look for the CSS file in the right location.
If you are using multiple domain names, or for some other reason you cannot hardcode the domain name, you can prepend a slash (/) to the path as well:
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" />
This path is relative to the root of the website, not to the current directory.
Here is a structure example:
/main
/css
style.css
/include
article1.php
article2.php
header.php
index.php
In my header.php I have the following code for the css:
<link rel="stylesheet" type="text/css" href="css/style.css" />
And, for example, in my index.php I have the following as the first line:
<?php include 'header.php'; ?>
Now, everything works fine as it is. Next I'm going to insert the following code in the article1.php file:
<?php include '../header.php'; ?>
The contents (menus and other html) are displayed correctly, however the CSS won't be displayed/recognized at all. Basically what's happening is that the header file is being included but the server isn't respecting the directory parenting. For the CSS to be displayed correctly I'd have to change the link rel for the CSS to ../css/style.css, but if I do so it won't work on files located in the main directory.
I hope I made my problem clear. What am I doing wrong? How can I include files from different directories and preserve the links inside them?
In your site's <head> section, insert a <base> element with the href attribute. Set the href attribute to the base URL of your website, and all relative requests will be sent through that base URL.
<base href="http://my-website-url.com/" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
With a correctly-set base tag, the user's browser will attempt to load your stylesheet from the URL http://my-website-url.com/css/style.css.
Note: this not only affects stylesheets, but all relative links in the document.
It has to do with how pathing works in includes. I recommend pathing things from the doc root whenever possible.
<?php include( $_SERVER['DOCUMENT_ROOT'] . '/header.php' ); ?>
That will work in any of your files.
Instead of using relative paths:
href="css/style.css"
use absolute paths from the webroot:
href="/css/style.css"
You should include your css file from the root. So /css/style.css so way it will always start at the root and then go down from there. I believe that should fix your problem in all cases.
First off, the problem is that your link to your CSS files is wrong. The best thing to do is look at the output of the HTML (view source) from the page. So lets break it down (form index.php):
Index.php is located at domain.tld/index.php. Your css files are located at domain.tld/css/*. When viewing the index file, your header is
<link rel="stylesheet" type="text/css" href="css/style.css" />
which works because you are at the top of the directory (or root) and the links are made relative to this directory. Now when you go up to domain.tld/include/article1.php, you are no longer at the root. It is trying to access:
domain.tld/include/css/style.css
This means you have to build the full link or change your relative. The easy way since the CSS is at the root is just to use the following
<link rel="stylesheet" type="text/css" href="/css/style.css" />
^
This means it will look at the root of the domain for the css directory as such domain.tld/css/styles.css. If your top directory is /main, use /main/css/styles.css
Using relative includes from filed already called as includes is always a problem, each time you specify a relative location, replace your
../some_directory/some_file.php
with
dirname(dirname(__FILE__)) . '/some_directory/some_file.php'
dirname(__FILE__) is the current directory.
May I explain your problem and how to solve it.
An include in php works as in C.
When you include a page that copy/paste content of the page into the first one.
So, there are two files:
include.php
<?php
$var = 'PHP';
?>
main.php
<?php
include 'include.php';
echo $var; // affiche 'PHP'
?>
When you request for "main.php" page you will get the following:
<?php
$var = 'PHP';
echo $var; // affiche 'PHP'
?>
So if you need to include an element to your page. You have two choices:
1. absolute path (better way)
Instead of using relative path, use absolute path. This way allows you to include a file from everywhere without of use of the current path.
2. variable
You can use a variable containing the relative path to the root directory of your repository/website. So each time you have to include a page or create one you have to define a variable as following:
include.php
<?php
$var = 'PHP';
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"".$currentPath."css/style.css\" />";
?>
main.php
<?php
# path to the root of the website
$currentPath = "../";
include 'include.php';
echo $var; // affiche 'PHP'
?>
To learn more about include, see this page
You have two options
Pass the relative path to the included file
ie.
<link rel="stylesheet" type="text/css" href="<?=$path ?>css/style.css" />
and
$path = "../";
include "header.php";
or 2. you use absolute paths to your files
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<?php
// This is index.php
ob_start();
include 'tem/u.html';
ob_end_flush();
?>
<html>
<!-- This is u.html -->
<link rel="stylesheet" href="style.css" media="screen" />
<body>
<p> abc </p>
</body>
</html>
Now my problem is when i run h.html -> Ok with style.
But when i run index.php -> Ok without style (because now the index.php include style.css, not tem/style.css)
Need a fix
If possible, refer to a domain relative path to the style.css, for example
<link rel="stylesheet" href="/style.css" media="screen" />
If that is not possible, you need to keep track on the page base in some way, which I cannot tell because I do not know enough about your application. But anyway, like
<link rel="stylesheet" href="<?php echo $pageBase; ?>/style.css" media="screen" />
where $pageBase is a variable containing the url to the root of your application.
I'm assuming that the tem directory is supposed to be for some sort of template, and so you don't want it to be directly exposed to the user; rather, you want to be able to include the files so that they're accessible via index.php, possibly with the option of later changing what files are included.
You could create another PHP file called style.php (in the root directory) which would include tem/style.css. You could do this for any other files that your templates used as well — the idea being that each PHP file in the root directory would correspond to a "role" in the template, not a particular template file, so that the template could later be changed without everything needing to be rewritten.
This might get a bit cumbersome if you had a lot of files required by your template, so it might be better to have a single script that could be instructed which file to load (through a $_GET variable). But in that case, you need to be very careful not to allow the user to specify arbitrary files. I'd suggest avoiding this approach until you're more proficient in PHP.
EDIT: On second thought, I'd suggest using a <base> tag in your template HTML file, as suggested in my comment on #gnud's answer.
This has nothing to do with PHP or include. This has to do with your browser, and how URLs are interpreted.
When your browser is pointed at http://xyz.abc/tem/h.html and asked to load "style.css", it tries to load http://xyz.abc/tem/style.css - this is known as a relative url, relative to the current document location.
When your browser is at http://xyz.abc/index.php and is asked to load the stylesheet in the same way, it tries http://xyz.abc/style.css. Maybe you see the problem?
As for a solution, you might use a domain-relative path for the stylesheet ("/tem/style.css").
just always use absolute path to your css file
<link rel="stylesheet" href="/tem/style.css" media="screen" />
that's all