WordPress.org

Ready to get started?Download WordPress

Forums

CSS path question: to ../ or not (13 posts)

  1. Anonymous
    Unregistered
    Posted 10 years ago #

    Hi there,
    I am not sure how to do this but I notice that a lot of sites use something like /css/file.css to call their CSS file even for the index.php file of the route.
    Now my strufture is this:
    index.php
    css (folder)
    images (folder)
    js (folder)
    Now if I call my css from the index I would have to use ../css/file.css but on a lot of the sites I have looked at I notice that all seem to call them like this /css/file.css - so they don't have to jump a directory.
    Can someone tell me how this is done please?
    Thanks a lot

  2. Mark (podz)
    Support Maven
    Posted 10 years ago #

    "../css" means "look up one directory level, find a folder called css, and go in there.
    "/css" means look *here* for the folder called css and go in there.
    That make sense ? It's just a way of organising one's site.

  3. Nick Momrik
    Member
    Posted 10 years ago #

    "/css/" actually means look to the root for a folder called css and then pull from there

  4. Anonymous
    Unregistered
    Posted 10 years ago #

    It also means the same directory and files can be accessed by multiple sites / blogs. Cool. Reuseable code.

  5. TechGnome
    Moderator
    Posted 10 years ago #

    *Looks at anon funny* HUH?
    If the path to CSS (or any file for that matter) leads off with the / that means go to the root and begin look there. A single DOT in front of the slash means look in current dir, and two dots means go up one level and look there.
    So, if I'm currently in say http://www.mysite.com/posts/2004/06/04/Test_Post
    and the path to my CSS (which is in the CSS folder off the root) is:
    css/style.css - it will try to find the css folder under Test_Post, which doesn't exist, and not load the css file.
    If I have ../css/style.css, it will attempt to go to the css folder under the 04 folder, again it doesn't exist.
    If the path is: /css/stle.css then it will go all the way up the tree to my root and find the css folder (which does exist) and then load the css from there - which it will do successfuly.
    BTW: same thing happens with images. If you are using permalinks and images disapper, this maybe the cause.
    TG

  6. unoamigo
    Member
    Posted 10 years ago #

    Something to note. Relative URIs based on where you are currently at are not the best of things.
    If you make a call to ../style.css and have re-directs on (ie for permalinks), your style will not be found.
    If your going to use relative URIs make them relative to root not the current working directory. Of course, this means you will need to maintain the same directory structure when moving hosts. That shouldn't be too big of a problem though.

  7. Oisin
    Member
    Posted 10 years ago #

    A single DOT in front of the slash means look in current dir, and two dots means go up one level and look there.

    So what, if any, is the difference between calling ./css/styles.css and css/styles.css?
    And does the system continue? Does .../css/styles.css mean 'go up two levels and look for the folder css?

  8. Anonymous
    Unregistered
    Posted 10 years ago #

    And does the system continue? Does .../css/styles.css mean 'go up two levels and look for the folder css?
    Only if the system supports it.

  9. tcervo
    Member
    Posted 10 years ago #

    And does the system continue? Does .../css/styles.css mean 'go up two levels and look for the folder css?

    No. To go up two levels using relative paths, you'd use ../../css/styles.css
    As was said earlier, though, relative paths are a bad idea. Use root relative (/css/styles.css) and it's never an issue no matter what directory of the site you're in (as long as you don't move /css/sytles.css, that is...)

  10. KarlB
    Member
    Posted 10 years ago #

    Whats confuses me on this topic is that, for instance, on Dougs site - http://www.stopdesign.com - he appears to have /css/blank.css for all pages in all directories when I would have thought that a folder for example 'portfolio' would have had to go '../css/blank.css' to pull in the css but on Dougs it is /css/blank.css
    Any suggestions how that is done?
    Thanks
    Karl

  11. Oisin
    Member
    Posted 10 years ago #

    He has the style sheet at http://www.stopdesign.com/css/blank.css.
    From each page, he calls this sheet by using /css/blank.css, which means "go to the root [ie. www.stopdesign.com/] and find the folder css, then find the file blank.css in that folder".
    If he'd used ../css/blank.css from a file in www.stopdesign.com/portfolio/, it would have the same effect, but the address would be relative, it would mean "go up one level, then find the folder css, [etc.]".

  12. KarlB
    Member
    Posted 10 years ago #

    Hmmm when I do that for my site it does not find the css.
    This is what I use:
    <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen,projection" title="Default" /> but if I use it with the ../css/screen.css it does work.
    What might I be doing wrong?
    Thanks
    Karl

  13. tcervo
    Member
    Posted 10 years ago #

    Oisin - yes, that's correct.
    Using root relative paths (/css/screen.css) means "start at the root of this domain, then look for the css folder, then find the screen.css file." The root of the domain is the highest level of your domain. For example, on this board it would be http://wordpress.org. For my site it would be http://www.tcervo.com. Etc...
    To sum up the difference between root relative and document relative:
    Site-root-relative paths always begin at the site root of the current server (which will be accessed via your domain name). All files on the site that are visible to the public branch from the site root. Site-root-relative paths begin with a slash that identifies the site root. Using site-root-relative paths, links continue to work even if the document is moved within the site.
    Document-relative paths are relative to the directory containing the current document. For example, document.htm specifies a document in the current directory, ../document.htm specifies a document in the directory above the current directory, and htmldocs/document.htm specifies a document in a subdirectory named htmldocs of the current directory.
    Not to confuse things even more, but there are also paths known as absolute paths. All these are are paths that contain the full URI (http://www.mysite.com/css/mycssfile.css).
    Let's say we were in the folder http://www.mysite.com/wp/, and our css file was located at http://www.mysite.com/css/. Here are the three different path types to point to the css file called styles.css located in the css folder, assuming we're linking from a file (say, index.php) in side the wp folder:
    Root relative (best method): /css/styles.css
    This says: start at the root, then go forward to the css folder.
    Document relative: ../css/styles.css
    (This says: go up one level from the wp folder, which brings us back to the root folder, then go forward to the css folder.)
    Absolute: http://www.mysite.com/css/styles.css
    Self explanatory. Notice the similarity to root relative path. It's the same with the http://www.mysite.com part taken off.
    Now, just for sake of example, let's say we moved the css folder *inside* the wp folder. Now the links would be:
    Root relative (best method): /wp/css/styles.css
    This says: start at the root, then go forward to the wp folder, then forward to the css folder.
    Document relative: css/styles.css
    (This says: start in the folder we're currently in (wp) and go forward to the css folder)
    Absolute: http://www.mysite.com/wp/css/styles.css
    Self explanatory. Notice the similarity to root relative path. It's the same with the http://www.mysite.com part taken off.
    Last example. Let's say we create another folder inside wp called "archives". So, we're now in http://www.mysite.com/wp/archives/index.php. What will our css link look like?
    Root relative: stays the same. Since our css file hasn't moved (it's still in /wp/css/styles.css), the link still works. No matter *where* in the site we're calling it from. (See why this is the best method?)
    Document relative: If we try to use the same path as before, it will break. Our most recent example had us "start in the folder we're currently in, and go forward to the css folder." Well, we're now in the /wp/archives/ folder, so that path no longer works. We'd have to change it to ../css/styles.css. This can be a pain if you have many directories or you move things around alot.
    Absolute: stays the same.
    Hope this makes it clearer. (Yeah, right, clear as mud...)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.