1

i am working on a website and i am looking for a way to include all my stylesheets and scripts relatively. Including the php-files is easy: 

<?php include 'header.php'; ?>

or

<?php include '../header.php'; ?>

or by referencing the root-path:

<?php include '/header.php'; ?>

But: All the stylesheets and scripts are not loaded on pages located in ‘/products‘, because they are located relatively to the root-directory and not to root/products.

For example: 

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

Is there a way to include stylesheets and scripts relativlely, without taking care of where the page is located, that is calling header.php?

I am working on a local server with mamp and there are many websites in the mamp-directory.

Thanks in advance!

Tim

timrodenbroeker
  • 115
  • 11

2 Answers2

2

It's all about the HTML. The following will load a stylesheet relative to the page you are currently on.

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

For example, if your page is /products/page1.html. The browser will try to load /products/css/styles.css

An absolute path would look like: 

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

Note the additional forward slash. In this case although your page is /products/page1.html. The browser will try to load /css/styles.css

You can also use the base tag to change the relative urls as in the first example. 

<base href="/assets/" />
<link href="css/styles.css" rel="stylesheet">

This time the browser will try to load /assets/css/styles.css

Steve E.
  • 9,003
  • 6
  • 39
  • 57
0

Okay, i've found the solution:

The base-function tells my website to be based in http://localhost/planilux/02/

<base href="http://localhost/planilux/02/" />

I've been trying to get my stylesheet by telling the path to be root-based:

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

The little slash before cssin the path was the problem.

This works out fine: 

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

Thanks !!! Have a nice day!

timrodenbroeker
  • 115
  • 11