Menu
I have a header.php file which contains a .css file link.
When I "include" header.php into another php file in different folder, the .css href for that header.php is not correct for the new php file.
How should I declare the href in my .css file to include the header.php with it that will be correct for any folder that php file is in?
829
Relative paths make use of two special symbols, a dot (.) and a double-dot (..), which translate into the current directory and the parent directory. Double dots are used for moving up in the hierarchy. A single dot represents the current directory itself.
Relative: If you want to reference something you know is in the same path on the url - that is, if it is in the same folder, for example http://mysite.com/myUrlPath/index.html and http://mysite.com/myUrlPath/css/style.css , and you know that it will always be this way, you can go against convention and specify a ...
A relative path is a path that describes the location of a file or folder in relative to the current working directory. It can be best used to refer to websites that are located on the same domain, ideally on certain sections of websites in which the documents never change relationships to each other.
This is a reason many large applications will try to set a 'root URI' constant/variable when installing.
While /css/style.css will work if your application is located in the root directory of the domain/subdomain, it will fail if it isn't (/appName/css/style.css)
Store the absolute URI to the 'root' script folder along with other configuration constants/variables, and building absolute links becomes a breeze.
define( 'SCRIPT_ROOT', 'http://localhost/yourApplication' );
// ...
echo '<link rel="stylesheet" type="text/css" href="'.SCRIPT_ROOT.'/css/style.css">';
I can see one reason for wanting to have dynamic and relative path generation for href links, and that is if you run your project on multiple domains or sites that have different paths. (For example, your project is available on http://myproject.example.org/ and also on http://example.org/myprojecttest/). If this is not the case, I would suggest directly specifying your css includes relative to the root folder:
<link href="/css/style.css" />
If this does apply to you, try this:
In every top-level document that requires header.php, add a $ROOT variable that indicates the top-level document's location compared to the root. e.g.:
$ROOT = './';
or
$ROOT = '../';
or
$ROOT = '../../';
Now, in your header.php file, you can use:
<link href="<?php echo $ROOT; ?>css/style.css" />
This allows you to make a header.php file that will work for any page at any relative path.
Full Example
Included File (/path/header.php)
<html><body>
<head>
<link href="<?php echo $ROOT; ?>css/style.css" />
[...]
File 1 (/path/index.php):
<?php
$ROOT = './';
include 'header.php';
?>
File 1 (/path/admin/index.php):
<?php
$ROOT = '../';
include '../header.php';
?>
File 3 (/path/admin/test/magic.php):
<?php
$ROOT = '../../';
include '../../header.php';
?>
You have few options, which i've tried to gather here
base href
<head>
<base href="http://www.mysite.com/" />
</head>
What it does, is sets all hrefs to point to certain path.
With this set, you can use <link rel='stylesheet' href='css/mycss.css' /> and successfully load mycss.css file even if you're page is deep down in http://www.mysite.com/pages/2012/public/secret_folder/myownphpfile.php
absolute paths
You can always use aboslute paths such as, but it can be a pain to change folders of files later on.
<link rel='stylesheet' href='http://www.mysite.com/css/mycss.css' />
defined pats
As @Discomatt told, using PHP defined paths is a easy way to keep things working. Downside; you have to use PHP. if you use it anyways, no problems ^^
define('CSSDIR', 'http://www.mysite.com/css/);
<link rel='stylesheet' href='<?= CSSDIR ?>mycss.css' />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
