When trying to access a CSS file, the server responded with a HTTP status 404 error, indicating that the requested resource is currently

Encountering the "http status 404 - the requested resource is not available" error specifically for my template.css file. After some investigation, it seems to be a referencing issue.

This error is preventing any styling from being applied to my welcome.xhtml page.

Despite thorough checks, I am unable to identify any errors. Assistance would be greatly appreciated.

Attached below is a snippet of 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>

The problematic line seems to be href="../../CSS/templateCSS.css".

Unfortunately, due to inadequate "reputation," photo uploads are currently unavailable.

Update: I have attempted changing the reference to:

However, the issue persists and the file hierarchy is as follows:

  1. Web Pages Folder
    • CSS Folder
      • templateCSS.css
    • Webpages Folder
      • templates Folder
        • Welcome.xhtml
htmlcssjsf-2

Answer №1

Learning how to link external stylesheets is essential. If the CSS file resides in the same folder as the HTML file, your link should resemble this:

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

If the CSS file is located in a subfolder (let's say ABCFolder) within the main folder of the HTML file, your link tag should be structured like this:

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

In scenarios where the CSS file is positioned in a folder (perhaps XYZFolder) one level above the HTML file location, you will need to adjust the link tag accordingly:

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

Remember, when specifying the folder path for the stylesheet, always do so relative to the HTML file.

While absolute paths are an option, it is recommended to stick with relative paths for better organization.

We trust this explanation clarifies any confusion.

Answer №2

Have you considered using an absolute URL? Is the file hosted on a server or have you attempted using /CSS/templateCSS.css instead?

Answer №3

To access your file, you need to go two folders back (../../) from your welcome.xhtml file and then navigate to a folder named "CSS".

Within that "CSS" folder, you will find the templateCSS.css file at ../../CSS/templateCSS.css

Answer №4

When working on a WAR project, it's important to utilize the resources folder located within the Web Pages directory. This can greatly enhance your project structure and organization. Take for instance the following folder setup:

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

To incorporate the template.css file into your template, you can use the <h:outputStylesheet> tag:

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

If you need more information:

  • Exploring the JSF resource library and its applications

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Include the array in the 'content' property of the CSS using Jquery

I need help formatting data in CSS. The code I have is as follows: if (ext){ switch (ext.toLowerCase()) { case 'doc': pos = 'doc'; break; case 'bmp': pos = 'bmp'; break; ...

javascriptjquerycssjquery-uijquery-plugins

Leveraging jQuery for Custom Form Styling

.I prefer to utilize personalized form elements in my forms. <fieldset> <legend id="Cities">Urban Areas</legend> <div class="legend-underline"></div> <div class="filters" id="Cities-filters"> <div> < ...

jqueryhtmlforms

Struggling with uploading an image in a react application

Hey everyone, I'm encountering some issues with importing images into my project. Previously, I was able to import images successfully in my old project using the same method that worked before, but it's not working this time around. The way I im ...

htmlcssreactjsimagewebpack

Looking for specific styles within CSS classes

I am looking to identify all the classes with styling attributes defined using either vanilla JS or jQuery. Specifically, I want to find classes that have the border style defined along with its value. It would be great if I could also modify these classes ...

javascriptjqueryhtmlcss

Retain the contents of the shopping cart even when the page is refreshed

For a course project, I am recreating a grocery store website and need assistance on how to retain the shopping cart values even after refreshing the webpage. Please inform me if more information is required... <button type="button" id= ...

javascripthtmlcssajax

The autocomplete feature in the hotel name field is designed to recognize HTML-encoded entities, thanks to the combination of

I keep encountering this issue. "King & Grove Hotel" is displaying as "King &amp; Grove Hotel" This problem arises while using jQuery autocomplete. ...

jqueryhtml

Problem with expanding DIV

Currently, I am working on enhancing this page. However, the DIV element containing the overflowing text does not expand to fit the text properly unless the height property is changed from "auto" to a fixed value. Here is the CSS code snippet for referen ...

csscss-float

Having difficulty changing the background color to black for the parent div that houses multiple child divs

Here is an example without the height attribute provided: http://jsfiddle.net/karthik64/pFcpX/ And here it is with the height attribute included: http://jsfiddle.net/karthik64/pFcpX/1/ The issue arises when I try to set a fixed 'height' attribu ...

htmlcss

Juggling both open and closed menus within a personalized accordion navigation

Check out this basic accordion-style menu: http://jsfiddle.net/JqJce/1/ <ul class="nav level-1"> <li><a href="#">Link</a></li> <li class="has-submenu"><a href="#">Link</a> <ul class="level-2"& ...

jqueryhtmlcss

The Captcha function is reverting to the previous value and validating against that old value

I have implemented a captcha system in PHP using the script available at https://github.com/claviska/simple-php-captcha. Here are the code snippets I am using: session_start(); include_once 'simple-php-captcha.php'; $_SESSION = array(); $_SESS ...

phphtmlcsscaptchaspam-prevention

How to Toggle Div Visibility with AngularJS ng-show and ng-click

In order to eliminate error messages, I decided to clear the field with a button click. This approach successfully removed the error in my initial test. <div class="errorPopup" data-ng-click="runner.Name = null" data-ng-show="mainForm.name.$error.pat ...

javascriptjqueryhtmlcssangularjs

Tips for positioning a div next to an input box when it is in focus

I am working on a scenario where I have used CSS to extend the search box when focused. The idea is that when the search box is focused, it should decrease in size and a cancel button should appear next to it. This is the CSS code I am using: .clrble .fr ...

javascriptangularjscss

Nuxt.js implemented with Auth using jwt refresh tokens

I've implemented the Auth library in my Vue/Nuxt project and have successfully set up JWT Authentication. However, I'm encountering an issue with the refresh token. The refreshToken cookie is consistently being set to null: https://i.sstatic.ne ...

javascripthtmlnode.jsvue.jsnuxt.js

Currently, I am compiling a list of tasks that need to be completed, but I am encountering a dilemma that is proving difficult to resolve

Recently delved into the world of Javascript and encountered a roadblock that I can't seem to overcome. Here's the snippet of code causing me trouble: add = document.getElementById("add"); add.addEventListener("click", () => { console.log("Ple ...

javascripthtmlcssarrays

The Ray Intersect function in THREE.js encounters issues when a div element is introduced

I have encountered an issue with my Three.js script. It works perfectly fine when there is only one target div on the page holding renderer.domElement. However, when I add another div with fixed height and width above the target div, the ray.intersectObjec ...

javascripthtmlthree.js

Laravel issues with displaying data in a 'foreach' loop

I encountered a quirky issue while working with Laravel 5.2. I have a chunk of text that I'm attempting to display using some explode functions. The strange part is, Laravel is rendering it oddly by adding incorrect ':' before the end of the ...

phphtmllaravelforeachlaravel-5

Looking for assistance with aligning an image in a <td> cell that doubles as a link?

How can I center a play icon in the middle of a td cell and make the entire content clickable as a link, including the background image? I've tried various methods but can't seem to get it right without breaking the alignment. Any suggestions wou ...

htmlcss

Expanding a JavaScript list using HTML inputs

I have a script where a grid dynamically displays a list of words. Is there a way to populate the word list in the grid using HTML? Currently, I am doing this... var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog"]; Can additional words be adde ...

javascriptjqueryhtml

Navigating the world of CSS and custom directives in AngularJS can be overwhelming at first, but

Exploring a custom directive in angularjs: .directive('myDir', function() { return { restrict: 'E', template: "..." } }) When considering the <my-dir></myDir> tag, it appears to lack any default styling (or is ...

javascripthtmlcssangularjs

Prevent event bubbling in jQuery when interacting with an accordion header

I have been attempting to make a checkbox function correctly within an accordion header (including the click event). I came across an example using an older version of jquery (version 1.6.3) at http://jsfiddle.net/CkL2r/1/ or you can view the code below; ...

jqueryhtmlstoppropagation