-1

I just finished working on my IA (Information Architecture) of my website. According to my IA I made my root folder and my folders and files in my root. This is how it is mapped out. I have my root folder called "root" and in my my root folder I have a "index.php" and a "style.css" files. I have three other directors from "docs" "images" and "nav" in my root folder. Inside nav I have the files that will code all the links on my navigation bar. 

                                    Root
                        /     |      |       |       \
                     docs  images   nav   index.php  style.css      
                                     |
        About Reports Documents Checklists LicenseTools Presentations SWRelease

I am planning on creating my template on the index page and use that same template throughout every one of these pages I create. Since I will add my line into lets say the About page. The style.css file and the About.php file are not in the same folder so how do I link it so that they are? Or does my code automatically try to find it no matter where it is in the root folder?

Krishp
  • 67
  • 1
  • 2
  • 9

3 Answers3

2

Personally, I'd keep all the files in the nav directory in the root directory but that's my own preference. Here's what you need to type:

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

Note the leading slash in /style.css. This indicates that the reference is absolute, i.e, relative to the root of your web-site. This will work for any HTML or PHP file on your site - no matter where it's located in your file hierarchy.

Anthony Geoghegan
  • 11,533
  • 5
  • 49
  • 56
  • The only reason I want to put them in different folders is organization and if the website was huge you wouldn't want hundreds of pages in your root dir though isn't that correct? – Krishp Jul 25 '13 at 20:54
  • 1
    Note my comment on the `BASE` tag. It will set all of the relative links, like `href="/css/style.css"` starting from a defined directory (defined in the `BASE` tag). – Sablefoste Jul 25 '13 at 21:28
  • 1
    @Krishp I'd agree that if you had 100s of files, it would make more sense to store them in a separate sub-directory but these are guidelines - not hard and fast rules. – Anthony Geoghegan Jul 25 '13 at 21:49
  • @SableFoste I remember learning about the base element many years ago. However, I never needed to use it as I always used server side includes and later PHP to reference assets such as CSS and JS files. I upvoted your comment as for reminding us of its existence though I see there are some [gotchas using it](http://stackoverflow.com/questions/1889076/is-it-recommended-to-use-the-base-html-tag). – Anthony Geoghegan Jul 25 '13 at 21:55
2

Nothing prevents you from using absolute paths in <link> tags' href attributes, and such paths are resolved from the document root. Thus

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

will correctly resolve to the stylesheet file, regardless of the page in which the <link> tag appears.

Aaron Miller
  • 3,692
  • 1
  • 19
  • 26
  • So then this is not the correct way of representing it.. href="http://abc.com/style.css"> or why does this not work since my page about.php is in the about folder which is in the nav folder in the root dir. – Krishp Jul 25 '13 at 20:53
  • @Krishp You don't want to use that. What happens if the site's name changes? – MiniRagnarok Jul 25 '13 at 20:53
  • So if my site name changes then I would have to change each href in each file I have correct? @MiniRagnarok – Krishp Jul 25 '13 at 20:57
  • @Krishp If you include the domain name in the `href`, then, yes, you would have to change it if the domain name changes. However, if you leave it out, the browser will infer it, so you can just use `href="/style.css"` and have it always point to a file called "style.css" in the top-level directory of your web site, regardless of what the domain name happens to be, or where in your site's directory tree the `` tag is included. – Aaron Miller Jul 25 '13 at 20:58
  • Oh I see what you mean. So the /style.css is just telling it you actually find it here at http://www.domain.com/style.css no matter if the domain name changes and that it will always be located in the root dir? @AaronMiller – Krishp Jul 25 '13 at 21:00
  • 1
    @Krishp Exactly. Nobody wants to do that though. Avoid hard-coding the site url where you can. If you have to, make a variable. Then you only have to change one variable to change the whole site. – MiniRagnarok Jul 25 '13 at 21:01
  • 1
    @Krishp Precisely -- and it's a path like any other, so if for example you were to create a directory "css" under the root and move style.css there, then `href="/css/style.css"` would work just the same way. – Aaron Miller Jul 25 '13 at 21:01
  • @MiniRagnarok What would be a more logical way based on the structure I have fore my filesystem? or is my filesystem the problem itself? The only reason I choose to do it that way is that it would be better organized than have all the files in the root folder. – Krishp Jul 25 '13 at 21:03
  • 1
    @Krishp, you may want to use the `BASE` tag too. It will set all of the relative links, like `href="/css/style.css"` starting from a defined directory (defined in the `BASE` tag). I suggest you google it. – Sablefoste Jul 25 '13 at 21:26
1

UPDATED per comments:

The best approach is as Aaron Miller answered:

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

This will resolve to load style.css in the root directory.

However, if you are loading a single stylesheet (or a static set of stylesheets) for your site, I'd suggest always calling the stylesheet(s) from a static template. It's good practice to avoid duplicating code, where possible.

So, in your case, if the items in your <head> are never going to change, it would be a good idea to include all those items in a header.php file. That way, if you ever have to add anything to the <head> (e.g. adding a second stylesheet), you only have to change the code in one file, instead of every template.

You can include your header file using PHP's require_once like:

<?php require_once 'path/to/header.php'; ?>
seancdavis
  • 2,739
  • 2
  • 26
  • 36
  • Downvoted for failure to answer the question; a relative path, in a template included at arbitrary depth into the tree, is guaranteed to resolve incorrectly at least some of the time. – Aaron Miller Jul 25 '13 at 20:42
  • @AaronMiller I agree with your answer but not your logic. It is only guaranteed to resolve incorrectly at least some of the time if some of the time you have different depths. Frankly, we don't know if there's different depths. It might not be. – MiniRagnarok Jul 25 '13 at 20:46
  • @MiniRagnarok We can reasonably assume there are different depths; the question implies that both /index.php and /nav/* will be making use of this template. In any case, recommending the use of relative links in a template is asking for enough trouble to be worth a downvote in my book. – Aaron Miller Jul 25 '13 at 20:50
  • @AaronMiller I agree with you as well. The follow-up comment to the question was how you can include style.css from /nav/about.php. Not recommending this as the best approach, just answering the question. – seancdavis Jul 25 '13 at 20:57
  • @scdavis41 isn't that the best approach if you have hundreds of files? It is better organized than having one root folder with all those files? – Krishp Jul 25 '13 at 20:59
  • @scdavis41 If it's not the best approach, and the best approach is both obvious and without offsetting drawbacks, then why recommend anything less? – Aaron Miller Jul 25 '13 at 21:00
  • Thanks for the comments, @AaronMiller. I've updated to add your preferred method with some context. – seancdavis Jul 25 '13 at 22:00
  • 1
    @Krishp I think the best approach is to not duplicate code when possible. If your `` isn't going to change much, it may be beneficial for you to create templates like `header.php` and `footer.php` to make your templates a lot cleaner. I've added context to the answer. – seancdavis Jul 25 '13 at 22:03