0

I created a header (header.html) file to be imported into different pages on my site. It works when I have it only in the WebContent folder, and draws the CSS files, fonts, and images from the Assets folder perfectly. However when I try to import it into a JSP page under the User folder using this method, it doesn't work.

When I move header.html into the User folder, it stops drawing from the Assets folder altogether, and the header just becomes text. I am linking it by:

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

Also, the User folder and Assets folder are both directly under WebContent.

Thanks in advance!

Community
  • 1
  • 1
herhighnessvictoria
  • 1
  • 1
  • 4
  • You are currently using *relative* path, that is, the string `assets/css/custom.css` will always be at the end of your current path, for example, mysite.com/index.html will locate this file from mysite.com/assets/css/custom.css, but once you move the HTML file to a folder, it will try and locate your file from that folder, such as mysite.com/folder/assets/css/custom.css. One workaround is to use a slash at the beginning: `href="/assets/css/custom.css"` that will make sure your file is loaded from the root of your site. – pentzzsolt Feb 27 '16 at 22:25
  • 1
    Now it's going to `user/assets/css/custom.css`. One (of a few) ways to fix it is to change it to `../user/assets/css/custom/css` – random_user_name Feb 27 '16 at 22:25
  • I just tried that and it's still coming back as text. I've tried "/assets..." and "./assets..." – herhighnessvictoria Feb 27 '16 at 22:26
  • 1
    @pentzzsolt - that works **only if** the root folder is where `assets` is placed. There's many scenarios where it is not, and a slash at the beginning is not practical. – random_user_name Feb 27 '16 at 22:26
  • Why did you try `./assets`, and not `../assets`? Also, we don't know your folder structure, so we are left to shooting in the dark. Where is the `assets` folder in relation to the `user` folder? – random_user_name Feb 27 '16 at 22:28
  • @cale_b even if Assets and User are both folders directly under WebContent? – herhighnessvictoria Feb 27 '16 at 22:29
  • @herhighnessvictoria can you please post your folder structure so we can get a better idea of how to fix this? @cale_b Sure, but a slash at the beginning can make the `href` attribute consistent among folders and subfolders - or URL's for that matter. – pentzzsolt Feb 27 '16 at 22:29
  • Correct. The format is two dots, not one. If you want to go up multiple folders, you do it like so: `../../assets`, for example. – random_user_name Feb 27 '16 at 22:30
  • @cale_b The folder structure is here: https://drive.google.com/file/d/0B6bk00bFMh80RFpkVUx5MDROSVU/view?usp=sharing – herhighnessvictoria Feb 27 '16 at 22:34

2 Answers2

3

providing the folder structure has both user and assets mentioned above in the parent directory simply change

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

To

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

This is a relative link meaning it will go up one structure and go from there.

But you need to consider the location from which file it is called as we don't know your directory structure this is the best we can do with the information you've given.

D Jones
  • 76
  • 10
  • Yes, D Jones is correct. What the `..` indicates is move out of the current directory into the parent directory. So, in your case, it is going to exit the User directory back into the Webcontent directory (the parent) and now it can see the assets directory. – kojow7 Feb 27 '16 at 22:37
2

Simply use absolute path for your CSS & JS & Fonts & other assets

How?

Instead of

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

write

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

and make sure if assets directory is in directory for which point your domain

In many cases absolute paths are better, because You don't have to think how to link to your assets from specific directory, because this path always start from root directory

Here is similar question & answer

Community
  • 1
  • 1
Michał Kutra
  • 1,172
  • 7
  • 20