1

I am getting the "http status 404 - the requested resource is not available" error for my template.css file. From my research i have figured that it is a problem of referencing.

Because of the error, none of the styling is being applied to my welcome.xhtml.

However, i have checked and rechecked and seem to be finding no error. Please help.

here is my Welcome.xhtml page

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
 xmlns:f="http://xmlns.jcp.org/jsf/core"
   xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
    <title>TODO supply a title</title>
    <meta name="viewport" content="width=device-width"/>
    <link  rel="stylesheet" type="text/css" href="../../CSS/templateCSS.css"/>
</h:head>

<h:body>
<!--  Rest of the code -->
</h:body>
</html>

I am quite sure that the problem lies in href="../../CSS/templateCSS.css" this line.

As i am dont have enough "reputation" i cant upload photos.

Updated i have changed the reference to:

It is still not working. The hierarchy of files is:

  1. Web Pages Folder
    • CSS Folder
      • templateCSS.css
    • Webpages Folder
      • templates Folder
        • Welcome.xhtml
tshepang
  • 12,111
  • 21
  • 91
  • 136
Shruti
  • 97
  • 1
  • 4
  • 14

4 Answers4

1

Try to understand how referencing an external stylesheet works. If the CSS file is in the same folder as the html file then the link should look like:

<link rel="stylesheet" href="StyleSheetName.css" />

If instead, the CSS file is in a folder (say ABCFolder) which is contained in the same folder as the HTML file (i.e. the ABCFolder and HTML file are at the same level) then the link tag should look like this:

<link rel="stylesheet" href="ABCFolder/StyleSheetName.css" />

Now, if the CSS file is in a folder (say XYZFolder) which is contained in a folder one level above the HTML file (i.e. the XYZFolder and HTMLContainerFolder are at the same level and HTMLContainerFolder contains HTML file) then the link tag should look like this:

<link rel="stylesheet" href="../XYZFolder/StyleSheetName.css" />

To make it clear, you always 'relatively' specify the folder path with respect to the HTML file.

You can also provide absolute path of the stylesheet though relatively paths are more advisable.

Hope this helps.

Satwik Nadkarny
  • 5,086
  • 2
  • 23
  • 41
  • you make absolute sense! **however**, i have checked and rechecked my referencing, i have made a change and it is: '', I get the same error. **Hierarchy** of files is: --Web Pages – Shruti Apr 05 '14 at 20:16
  • Your answer is really helpful. nicely explained! :) – Shruti Apr 05 '14 at 20:33
0

Have you tried an absolute url? Is the file on a server at all or try /CSS/templateCSS.cssHave you tried an absolute url? Is the file on a server at all? Or try /CSS/templateCSS.css

user1431083
  • 177
  • 1
  • 15
0

So your file must be two folders back ../../ (from your welcome.xhtml) and than in a folder "CSS".

../../CSS/templateCSS.css

user1551496
  • 169
  • 2
  • 12
0

In any WAR project, there's a resources folder inside the Web Pages folder. You should make use of it! For example, suppose you have the following folder tree:

-- Web Pages
   -- WEB-INF
   -- resources
      -- css
         -- template.css

You can add the template.css file to your template using <h:outputStylesheet>:

<h:head>
    <h:outputStylesheet library="css" name="template.css" />
</h:head>

For your reference:

Community
  • 1
  • 1
Mr.J4mes
  • 9,168
  • 9
  • 48
  • 90
  • For some reason, I dont have a "resources" folder inside my Web Pages folder. I am unaware of the reason. – Shruti Apr 05 '14 at 20:11