URL issue with sub directories

Question

I am creating a website with server side includes, and have multiple directories. For example in the head.html(it's an include) I am pointing the stylesheets as href="css/style.css" and it's works fine in the home page. but when I am trying to run a page inside the event (a folder/subdirectory) it's not taking the stylesheet. can anybody solve this out.

It's a pure HTML static website, can we use anything like clientResolveUrl or something like that?

Thanks @SureshPonnukalai , I thried `href="/css/style.css` too. but it's not getting. When i tried to set as `href="../css/style.css"` which worked with the page inside event, but not with the page inside the root folder. — Shafeeque, Aug 26 '14 at 07:53
are the css folder in root? and what is the protocol that you use? `http://` or `https://` or `file://` — Kyojimaru, Aug 26 '14 at 08:23
@Kyojimaru presently I am working with localhost. I set up localhost in my PC using Wampserver. — Shafeeque, Aug 26 '14 at 08:24
Absolute URL such as `/css/style.css` _should_ work equally well on root and deep pages. If it does not then you are missing something. — Salman A, Aug 26 '14 at 08:24
@Shafee did your url like `http://localhost:port/event/test.html`? — Kyojimaru, Aug 26 '14 at 08:26
@Shafee what is your folder project name in `www` folder? try change `/css/style.css` to `/folder_name/css/style.css`, if it's working, you probably should create a `Virtual Host` — Kyojimaru, Aug 26 '14 at 08:47
@Kyojimaru thanks it's worked when I tried with the folder name. — Shafeeque, Aug 26 '14 at 09:07

score 1 · Answer 1 · answered Aug 26 '14 at 09:19

If you're creating your project folder inside \wamp\www\sitename and include the css using

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

it will target the root folder, that is www in your case, not the sitename, so you should write it like this

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

but, you should probably use a Virtual Host so you can write it like the 1st one in your live site, here's the forum that explain how, and why you should be better using a Virtual Host

score 0 · Answer 2 · answered Aug 26 '14 at 07:56

0

I suggest you use your browser's web tools to check the path to that CSS file (or simply read the source code on your browser). You may then notice whether a subdirectory, or the parent directory, is missing from the relative path.

You may then need to change so that it becomes

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

or

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

depending on the actual structure of files and directories.

answered Aug 26 '14 at 07:56

tripu

304
2
11

Thanks fro your reply, first of all there is no css folder inside the **event** folder, so the first option won't work. But when I tried to use the second one which worked with the page inside the **event** folder, not worked the pages directly inside the root folder. – Shafeeque Aug 26 '14 at 08:04
1

OK; for pages inside your *root* directory, the path should then be `css/style.css` instead. Right? Each page should specify the relative path to `style.css` according to its own position in the filesystem. – tripu Aug 27 '14 at 05:47

score 0 · Answer 3 · answered Aug 26 '14 at 08:06

I think <base> tag can help in this case.

Definition and Usage

The tag specifies the base URL/target for all relative URLs in a document.

There can be at maximum one element in a document, and it must be inside the element.

http://www.w3schools.com/tags/tag_base.asp

URL issue with sub directories

3 Answers3