Webpage jsp:includes header but doesn't use linked stylesheet

Question

I've got some problems with finding the right way to ask this question. But I hope you understand the problem and are able to help.

I've set up a really basic Maven Web-App, using jsp's.

At the moment I have 2 pages.

1. Index.jsp (Starting page with loginbutton)
2. Home.jsp (Home page after login)

I also have an header.jsp and a footer.jsp. Both the index.jsp and the home.jsp use the header and footer.

In the header is a link to a stylesheet. When I run the project. Both index.jsp and home.jsp use the header (they've got the right tag) But only index.jsp uses the stylesheet.

Why doesn't home.jsp use the stylesheet, even when the header is included correctly.

Here are some images of the code to help you understand the situation.

The Project Structure

Index.jsp with the include of header/footer.jsp

Home.jsp with the same include of header/footer.jsp, only the path is different. But they load correctly, except for the css.

And here is the Header.jsp, with the link to the stylesheet

If you need more info, I'll be happy to give it.

Answer 1

Thanks to the Answer of @Rohit Gaikwad I was able to figure it out myself.

Turns out that you need to locate the css from the used page (so not only from header.jsp but also from index/home.jsp

So I changed the link to the stylesheet to the following:

    <link rel="stylesheet" type="text/css" href="css/default-header.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/default-header.css"/>

This way i can be used from the index.jsp and the home.jsp (still not sure why index.jsp can load the css from the css/default-header.css link, without browsing the folders using "../")

Answer 2

use the below code to link the css in header.jsp:

<link rel="stylesheet" type="text/css" href="../../../css/default-header.css"/>

Note: you need to locate the resource properly, the "../" will search for resource in one step back folder.
Currently yourheader.jsp will search the resource in default folder which is located at webapp\pages\layouts\default but your css is in webapp\css folder. Hence, you need to traverse back to locate that resource.

Trick: press ctrl key and click on the hyper-reference link, the resource should be opened directly if the link is correct. Else the resource cannot be located if incorrect path is provided.
Hope you are using an IDE.

For your query in comment,

1. your index.jsp file is in layouts folder so you have to include your header.jsp as default/header.jsp. right now, your code will search header.jsp in layouts/layouts/default/header.jsp
2. For home.jsp if you are able to access footer.jsp then header.jsp should be accessible in header.jsp. The code ../layouts/default/header.jsp is correct in home.jsp.