Moved HTML into a different folder, now it's not linking CSS correctly

Question

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!

Answer 1

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

Answer 2

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.