CODEWITHSUNDEEP
phpcsspathheader
zhang ruiting
zhang ruiting

Reputation: 81

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

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?

Upvotes: 8

Views: 32424

Answers (8)

Tobias Buschor
Tobias Buschor

Reputation: 3335

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

Upvotes: 2

Ravi
Ravi

Reputation: 1784

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>

Upvotes: -1

Deplicator
Deplicator

Reputation: 34

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.

Upvotes: 0

user1873439
user1873439

Reputation: 91

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

Upvotes: 9

Tom
Tom

Reputation: 3040

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

Upvotes: 7

discomatt
discomatt

Reputation: 195

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

Upvotes: 16

Munteanu Sergiu
Munteanu Sergiu

Reputation: 381

Write the absolute path of the css file like:

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

Upvotes: 1

Paul Dessert
Paul Dessert

Reputation: 6389

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.

Upvotes: 0

Related Questions