0

Hello, I have a home page LoginPage.html in /WebContent/html/LoginPage.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
    content="text/html; charset=windows-1256">
<title>Login Page</title>
<link rel="stylesheet" type="text/css" href="../css/jsStyle.css" />
</head>
<body>...</body>
</html>

I have configured the same in web.xml

</welcome-file-list>
    <welcome-file>/html/LoginPage.html</welcome-file>
</welcome-file-list>

Problem: When I am trying to access the file from the home page URL
http://localhost:8080/Project/
It fails to apply the CSS.
 Whereas when I access through the location specific URL
http://localhost:8080/Project/html/LoginPage.html
CSS is applied.

Hence, CSS fails to apply while loading the welcome page; I tried multiple alternatives. Kindly help.

Janjo Jose
  • 1
  • Are you sure you are referencing the correct CSS file (file path, filename)? Using `../` means that you are going one directory up from where your HTML file is. And using your example, opening the file on `Project` directory runs the CSS, meaning your HTML file is located here, and your CSS file is located on `localhost:8080/css` directory – alimbaronia Jul 26 '18 at 05:01
  • I tried just now, but it fails to apply. `` since now, css folder is inside html. – Janjo Jose Jul 26 '18 at 05:28
  • Can you try inspecting your document? Try viewing the page source so you can see the links of the assets. Then try clicking on the underlined link of your CSS. You may find clues on why it doesn't get loaded once you open your resource. – alimbaronia Jul 26 '18 at 05:31
  • Yeah that is a good idea, I am trying out some combination. Thanks. Will update once I finish. – Janjo Jose Jul 26 '18 at 05:46
  • `` this did the trick. Now its loading for the Home Page. CSS URL is `http://localhost:8080/Project/html/css/jsStyle.css` But when i go the specific URL, it fails. CSS URL in this case is: `http://localhost:8080/Project/html/html/css/jsStyle.css` 'html' is coming twice. – Janjo Jose Jul 26 '18 at 05:52

2 Answers2

0

Your css file location has to be relative to the html file.I think currently you have your css file inside projects folder. If you want to access the css when you are using http://localhost:8080/Project/ your css path has to be css/jsStyle.css. If it doesn't work please update your folder tree structure.

Ramesh
  • 2,297
  • 2
  • 20
  • 42
  • WebContent/css/jsStyles.css; WebContent/html/LoginPage.html – Janjo Jose Jul 26 '18 at 05:19
  • I made the change like you said, even now it fails to apply in the home page; but it is applying for the specific URL. – Janjo Jose Jul 26 '18 at 05:29
  • Do you find any console error like fail to load `css/jsStyle.css`? – Ramesh Jul 26 '18 at 05:34
  • Yes, it fails to load CSS. – Janjo Jose Jul 26 '18 at 05:55
  • I am damn sure it's your path. For now try to load the css file while keeping it in the same location where you html exists and load `jsStyle.css`. If possible can you update me with the tree structure. I mean like a screenshot... – Ramesh Jul 26 '18 at 06:00
  • also you can use absolute path to load the css. But the problem is you have to change the path for each and every time when you change the domain – Ramesh Jul 26 '18 at 06:03
  • I understand what you are saying. But the CSS is applying for the href value: [./css/jsStyle.css] for homeURL(http://localhost:8080/Advanced_MySQL/) or [../css/jsStyle.css] for specificURL(http://localhost:8080/Advanced_MySQL/html/LoginPage.html). It is not applying for both the cases. – Janjo Jose Jul 26 '18 at 06:07
  • You are loading two locations and referring a same location url for your css. href will load the relative link to the current url. It's not possible to load your css in both places. – Ramesh Jul 26 '18 at 06:14
  • Provide the absolute path to the `href`. There you can get your problem solved – Ramesh Jul 26 '18 at 06:15
0

I found the solution to the problem.
The Home page must be in the root folder. /WebContent
I made CSS references changes accordingly.

Thank you, JJ

Janjo Jose
  • 1