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
Improve this question
2
  • I think you are stepping up one too many directories href="../CSS/templateCSS.css Commented Apr 1, 2014 at 15:42
  • Try just "/CSS/templateCSS.css" or "../CSS/templateCSS.css" Commented Apr 1, 2014 at 15:43

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

you make absolute sense! however, i have checked and rechecked my referencing, i have made a change and it is: '<link rel="stylesheet" type="text/css" href="../CSS/templateCSS.css"/>', I get the same error. Hierarchy of files is: --Web Pages
Your answer is really helpful. nicely explained! :)
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

Improve this answer

Comments

0

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

../../CSS/templateCSS.css

Improve this answer

Comments

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:

Improve this answer

1 Comment

For some reason, I dont have a "resources" folder inside my Web Pages folder. I am unaware of the reason.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.