CSS not working from relative path with php 'includes'

Question

folder structure

 /
 |--index.php

 +--includes
 |--header.html

 +--css
 |--style.css

I have 2 subfolders in my main project folder. One is a folder called 'includes' and the other one is called 'css'. I have my -index.php file in the main folder -header.html in my 'main/includes' folder -style.css in my 'main/css' folder

My index.php includes the header.html like this:include_once('includes/header.html'); (this Works!)

My header.html file links the css like this:<link href='../css/style.css' type='text/css' rel='stylesheet'/> (this does NOT work!)

I don't understand why the css file is not loaded.
I have tried using the base tag, although I'm not sure I'm using it right. <base href="http://localhost/main" /> (this is NOT working)

Pupil · Accepted Answer · 2014-11-21 05:31:54Z

3

You should try using

<link href='css/style.css' type='text/css' rel='stylesheet'/>

As index.php and the css folder lie at the same level.

With

<link href='../css/style.css' type='text/css' rel='stylesheet'/>,

you are asking your server to look after the style.css in upper level directory of index.php which does not exist.

You can also use / because, it points do the document root of the website.

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

answered Nov 21, 2014 at 5:31

Pupil

24k6 gold badges49 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eric Over a year ago

Eric Over a year ago

Marlon Over a year ago

I was struggling with this exact same problem and when I read your answer I literally had to facepalm. It's so incredibly obvious, but I was thinking of the header.html as being nested in a folder. Thanks!

David · Accepted Answer · 2014-11-21 05:33:20Z

2

I don't think you understand how include works. Essentially the code in the referenced file will be copied into the main file, and then processed. So if you're including it into index.php, then you want to reference the CSS file accordingly.

The following should work:

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

You'll find it is the most easy to just use absolute paths when using HTML, that way the above like will still be valid, even if you copy it to a file that is in within a folder besides the root.

answered Nov 21, 2014 at 5:33

David

4,8815 gold badges37 silver badges76 bronze badges

Comments

Ameer Mousavi · Accepted Answer · 2019-07-03 00:11:54Z

2

$siteurl ="http://localhost/project";

(store this variable in config file so that you can use globally)

<link href='../css/style.css' type='text/css' rel='stylesheet'/>

will be changed to

<link href='<?php echo $siteurl;?>/css/style.css' type='text/css' rel='stylesheet'/>

edited Jul 3, 2019 at 0:11

Ameer Mousavi

1,3771 gold badge19 silver badges22 bronze badges

answered Nov 21, 2014 at 5:38

virendra

1639 bronze badges

Comments

Ahosan Karim Asik · Accepted Answer · 2014-11-21 05:31:18Z

0

just change from <link href='../css/style.css' type='text/css' rel='stylesheet'/> to <link href='css/style.css' type='text/css' rel='stylesheet'/>

answered Nov 21, 2014 at 5:31

community wiki

Ahosan Karim Asik

Comments

Ritesh Khandekar · Accepted Answer · 2019-10-24 05:13:56Z

0

If you are trying to add CSS in html file using PHP require:

<style><?php require("css/style.css");?></style>

Note: <style> tag is important otherwise it will echo plain text

answered Oct 24, 2019 at 5:13

Ritesh Khandekar

4,0153 gold badges17 silver badges31 bronze badges

Collectives™ on Stack Overflow

CSS not working from relative path with php 'includes'

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related