Welcome to WebmasterWorld Guest from 184.72.177.182

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

How to to reference a CSS file from a “header.php” include file

     
5:43 pm on May 9, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 3, 2009
posts: 227
votes: 0


What is the correct way to reference a CSS file from a “header.php” include file? I have a few subdirectories within my site that I would (of course) like to use the same CSS file with, via a header include. However I am unsure of what the general standard is when referencing the css header link in my “inc/header.php” file. Searching around, I haven’t found one agreeable solution. Here is a general example of my site directory:

wwwRoot/
wwwRoot/subDirectoy1
wwwRoot/subDirectoy1/index.php // uses include(../inc/header.php)
wwwRoot/subDirectoy2
wwwRoot/subDirectoy3
wwwRoot/css
wwwRoot/css/style.css // stylesheet
wwwRoot/inc
wwwRoot/inc/header.php // header include that references style.css for whole site

So far I have seen some thing as simple as:
link href="http://wwwRoot/css/style.css" rel="stylesheet" type="text/css"

TO:
link href="http://<?php echo $_SERVER['HTTP_HOST'] . '/css/style.css'; ?>" rel="stylesheet" type="text/css"

And Even seen somewhere where they said to change the include path in the php.ini file, which isn’t an option, because I will not always have access to do this.

So what is the Common Practice for something like this?
6:39 pm on May 9, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 0


The CSS file is requested by the browser as a URL.

The URL is a reference system used outside on the web. Therefore in the link to the CSS file use a URL that begins with a slash and counts, in URL terms, from the root of the site, e.g. href="/css/style.css".

Do not use a relative URL, otherwise each page of the site will be looking for a CSS file at a place that is relative to that page... and which will therefore fail to find the CSS file.

You could add the protocol and domain name to the CSS link but this will cause extra work if you have a mix of HTTP and HTTPS pages.
4:24 pm on May 10, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


In addition this gets really important if you are using mod_rewrite for friendly URL's. If you rewrite some request

h t t p://www.example.com/my-widget-category/

to a script in a directory

/products/script.php

The request still appears to come from example.com/my-widget-category/, even when you're in /products/ - the leading slash always fixes this. It's the same for any CSS, JS, Image, or other objects too, always reference with a leading slash.

The down side is, it doesn't work locally unless you set up a virtual server of some sort. Not a big deal, but you (generally) have to mod all paths for offline work, update them before deployment.
4:41 pm on May 10, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 0


With XAMPP installed and running in just a few minutes, everyone should be testing changes to their sites on /localhost/ or /127.0.0.1/.
7:24 pm on May 12, 2011 (gmt 0)

New User

joined:May 12, 2011
posts: 3
votes: 0


after many years of doing websites, I didn't know that starting a link with / goes back to the root. Exciting! except that I just tried it with php files that I'm using (for first time - converting website built with FrontPage).

the file I'm testing is [findajp.com...]

which has this Code:
<?php require("/includes/navhoriz.php"); ?>

not working - it isn't going back to the root for the includes folder, instead looking for the includes folder in the findajp.com/jpnh/ directory.

thanks for your help.
8:11 pm on May 12, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 0


You need to be aware of another thing; "includes" are an internal request within the server, so you need the full internal server path.

To be clear, "includes" do NOT use a "URL". URLs are used only outside the server, out there on the web. The URL path begins at the site root not at the internal file system root.
9:09 pm on May 12, 2011 (gmt 0)

New User

joined:May 12, 2011
posts: 3
votes: 0


I didn't know that.
I changed the call to
<?php require("/home/bjassoc/public_html/includes/navhoriz.php"); ?>
which I think is the full path.

I dont understand the error msg: "No such file or directory in /home/bjassoc/public_html/jpnh/rockingham.php on line 102."

It's still looking in the folder that's doing the call?
thanks again.
5:32 pm on May 13, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Try this instead.

<?php require($_SERVER['DOCUMENT_ROOT'] . "/includes/navhoriz.php"); ?>

Or you could get it from phpinfo() and hard code it, but hard coding it is a lot less flexible.

<?php
php_info();
?>

<aside>(W.O.W., please do not leave phpinfo.php on your server. Use it, then delete it. It reveals far too much info about your server configuration and is one of the files that hackers look for.)</aside>
11:17 pm on May 13, 2011 (gmt 0)

New User

joined:May 12, 2011
posts: 3
votes: 0


the call you suggested worked - thanks so much. Don't understand how to do the php_info. I think I was wrong to put my path out there (earlier post) but dont see a way to delete it. too late to edit.
4:16 pm on May 16, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


That bit of code I posted is a php_info() in entirety, put it in a file and upload to your server. I meant, don't leave **that** on your server - obviously the path you posted is incorrect anyway or it would have worked. :-)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members