How to use relative paths for included files such as .css

Question

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?

Why not use paths relative to your domain, such as `/styles/your.css` — Mike Christensen, Sep 14 '12 at 22:46

score 16 · Answer 1 · answered Sep 14 '12 at 22:52

16

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">';

answered Sep 14 '12 at 22:52

discomatt

195
1
4

If I store the absolute URI to config.php, then I need to include the config.php to header.php. As I said the header.php and the new php are not in the same folder, the new php file now can not find the config.php instead of .css file. That does not make things easier. – zhang ruiting Sep 15 '12 at 05:01
If your code isn't aware of 'where it is' in any given directory structure, I'm not sure I can help you. Can't you hard-code a relative location to the config file? – discomatt Sep 15 '12 at 15:41

score 9 · Answer 2 · answered Dec 03 '12 at 19:17

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';
?>

It's a great solution! Thanks a lot! – Casandra Aug 19 '19 at 07:37 — Casandra, Aug 19 '19 at 07:37

score 7 · Answer 3 · answered Sep 17 '12 at 14:16

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' />

score 2 · Answer 4 · answered Jun 26 '19 at 12:21

2

Have a look at this answer to load css relative to the current js-file:
https://stackoverflow.com/a/56580810/4865307

With this trick, you just call c1CssImport() where you like to include relative-url based css files:

c1CssImport('./ui.css');

answered Jun 26 '19 at 12:21

Tobias Buschor

3,075
1
22
22

score 1 · Answer 5 · answered Sep 14 '12 at 22:49

1

Write the absolute path of the css file like:

<link href="http://site.com/css/style.css" />

answered Sep 14 '12 at 22:49

Munteanu Sergiu

391
1
10

score 0 · Answer 6 · answered Sep 14 '12 at 22:47

0

Like this:

<link rel="stylesheet" href="/css/style.css" />

The first / says "Go to the root directory and look from there". It's a relative path.

answered Sep 14 '12 at 22:47

Paul Dessert

6,363
8
47
74

score 0 · Answer 7 · edited May 23 '17 at 12:16

0

Based on Tom's answer I did a combination of base url and a PHP define (for less typing).

Somewhere in PHP:

define("HOST_BASE", "http://example.com/");

Then in the header file:

<base href="<?php echo HOST_BASE ?>">

The base tag was new to me and I was worried about compatibility, but it appears to work well. There is more info about it at MDN.

edited May 23 '17 at 12:16

Community

1
1

answered Mar 05 '16 at 17:28

Deplicator

34
5

score -1 · Answer 8 · answered Mar 20 '18 at 05:49

Simply define your base URL and concatenate it in CSS or JavaScript reference.

Define it as below.

define ('host_address','http://localhost:85/grc/');
define('css', host_address.'styles/');

I have defined base URL by host_address and CSS and used both of them as below.

<link rel="stylesheet" href='.css.'custom.css>

How to use relative paths for included files such as .css

8 Answers8

Linked