6

I have a folder for all my css in my main folder called "main." In "main" I have another folder called "math." I would like to use my css in the "math" folder, but when I type:

      <link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />

on the index.html of the "math" folder it doenst work. I think it's because it's looking for the css folder inside of the math folder. How can i link to the css folder, which is not in the math folder?

kirby
  • 3,981
  • 14
  • 41
  • 54

6 Answers6

15

If I am understanding, your directory structure is as follows:

siteroot
    main
       math
       css

You are looking to link to a style sheet in /main/css from /main/math/index.html.

There are two solutions, the easiest is to use an absolute path:

  <link rel="stylesheet" href="/main/css/basic.css" type="text/css" media="screen" />

Absolute paths are a better solution and will cause less headache down the road. I do not know of any drawbacks, either.

Alternatively, you could use '..' to traverse up a directory

 <link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
Cory Dolphin
  • 2,650
  • 1
  • 20
  • 30
7

For example your directory is like this:

Desktop >
        ProjectFolder >
                      index.html
                      css        >
                                 style.css
                      images     >
                                 img.png

You are at your style.css and you want to use img.png as a background-image, use this:

url("../images/img.png")

Works for me!

KarenAnne
  • 2,764
  • 1
  • 28
  • 21
1

Use absolute path:

href="/main/css/..."
OSMadeIT
  • 57
  • 3
  • 11
Pleun
  • 8,856
  • 2
  • 30
  • 50
0

If you Want To locate a file inside of that folder use this

<link rel="stylesheet" href="./css/basic.css" type="text/css" media="screen" />

and if you want to locate a file outside of that folder you could use this snippet

<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
AR Ayush
  • 1
  • 1
0

The answer also has some dependency on whether or not the site is being developed and tested locally or if your publishing your content to a web server and testing links on the Live Site.

If your href attribute's URL is using a Relative URL and has a domain name being mapped to your Document Root on a Live Site, the above answers are correct.

However, if your testing your links where all the files are on a local PC's file system where no web server is being used locally, then you might find the following information helpful too.

If you are testing locally, there is usually no domain associated with your Document Root and the pathing changes in a number of ways.

  1. If you link to a file in any child directories, you will NOT have an initial slash ("/") in your href or in this case a src attribute because there is no domain and the Relative URL is relative to the current page. (The same rules apply to your href URLs as well)

Local testing URLS:

<img src="images/image-1.jpg" alt="my-Image-1">

..as opposed to a Relative URL on a page in a Live Site that has a domain name where you WOULD use an initial forward slash because it will be relative to the domain.

Remote Live Testing:

<img src="/images/image-1.jpg" alt="my-Image-1">

I am aware this is not the situation you ask about but it should help with the following two examples where the folders are adjacent and parent directories on a local file system. Your situation is that your Relative URL is to a file located in an adjacent directory. See below if your developing and testing locally.

  1. For Relative URLs linking to your css stylesheet files in an adjacent directory or even links to files a parent directory above your current page on a local filesystem (usually without a domain), your href attribute URL pathing should use a double-dot-slash (../). So your situation (if testing locally without a domain) is:
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />

...as indicated by @Cory Dolphin above.

I experienced this and found that my issue was that I kept finding different results depending on where I was testing and it was driving me mad.

I originally thought the pathing difference had to do with my local files being on my local Windows system and the reason it was slightly different was becuase of the file system of my remote Linux Apache VPS.

I found that it has more to do with whether it has a domain mapping to your site files or not. This is addressed somewhat in W3Schools.com's Page in the section that's titled The src Attribute and Relative URLs.

Adam R.
  • 1
  • 2
0

You must go up to the same directory as css and math using ../ So it would look like ../css/basic.css

Fabián Heredia Montiel
  • 1,687
  • 1
  • 16
  • 30