Adding CSS files to a JSP page in a Struts2 application

Hello, I am currently learning Java and working on a Struts2 project. I have added a stylesheet in the following path:

/WEB-INF/common/css/style.css

and also included Bootstrap in this directory:

/WEB-INF/common/css/bootstrap/bootstrap.min.css

I have properly linked them in my JSP file like so:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="/WEB-INF/common/css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/WEB-INF/common/css/style.css" rel="stylesheet" type="text/css">
<title>Login</title>

However, when I run the program, the CSS doesn't seem to be working. Can anyone advise what steps I need to take in Struts2 to properly include CSS files?

javacssjspstruts2

Answer №1

It's important to relocate your CSS files from the WEB-INF directory because they are not accessible to the public. For a detailed understanding of the purpose of WEB-INF and how it should be utilized, check out this informative post: What is the significance of WEB-INF in a Java EE web application?

Answer №2

The location of the CSS file in your JSP files depends on the structure of your project folders. Can you share how your project folders are organized?

For example:

Project name
   |
   | - WEB_INF
   | - JSP  (If this folder contains JSP files)
   | - common/css
   | - JS

If this is your project structure, then the path to link the CSS file in a JSP file would look like this:

<link href="../common/css/style.css" rel="stylesheet" type="text/css">

In this code, a single dot represents the current directory, which is the JSP folder.

And two dots represent the previous or upper directory, which is the Application or main project directory. From this directory, it points to /common/css/style.css

Answer №3

To start, consolidate all CSS and JS files into a single JSP page. Next, include that JSP page within another using the 

<%@include file="header.jsp"%>
tag.

Answer №4

In order to include CSS files, it is not possible within the /WEB-INF path. Instead, place them in the web root path and use /common/css/style.css to properly access your page.

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

What is the best way to create an XPath query that combines a starts-with and does not end-with attribute?

Currently creating an XPath query. Developing a script and attempting to locate a specific element on the webpage. ...

javaseleniumselenium-webdriverxpathelement

Issue with opacity transitions in Chrome on React application

I am currently developing a pomodoro clock using React. My goal is to have the message text (e.g. "Set a time", "Focus," etc.) and the play/reset button fade out and in when the play/reset button is pressed. So, when the play button is clicked, "Set a time ...

htmlcssreactjs

Is there a way to achieve a flex layout without having to modify the HTML structure?

I am working on achieving a specific layout using CSS: https://i.stack.imgur.com/xg7ZA.png This is the HTML structure I have and it cannot be altered, along with what I have managed to add with CSS. It's almost there but missing something: .conta ...

htmlcssflexbox

Combine the text of the button onto a single line

It seems like my button text appears fine on Safari, but in Google Chrome the issue arises. When you first arrive at the button, everything looks okay. However, after navigating through more posts and encountering the load more button again, the text gets ...

csswordpressbuttonalignmentwidth

Is there a way to remove text from a div when the div width is reduced to 0?

Upon loading the page, my menu is initially set to a width of 0px. When an icon is clicked, a jQuery script smoothly animates the menu's width to fill the entire viewport, displaying all menu items (links) perfectly. The issue I'm facing is that ...

javascriptjqueryhtmlcss

Three divs are set in place, with two of them of fixed width while the third div is

Looking for a layout with specific positioning and fixed widths: One box on the left, one box on the right, each with a width of 200px. The middle div should adjust to take up the remaining space. Any suggestions are appreciated. Thank you! ...

javascriptjqueryhtmlcss

Tips for finding the element with Selenium and xpath?

Ways to find the specific element: <input type="text" placeholder="Enter Area / Locality" class="" value=""> I attempted: //input[@placeholder='Enter Area / Locality'] Unfortunately, this method is not yielding any results. I am seekin ...

javaseleniumxpath

Conceal an entire div using CSS, especially if a portion of it remains unoccupied

Is there a way to conceal an entire division if a part of it is void? For instance, if "dd" is empty as indicated below, can I hide the entire class "test" so that the keyword Restrictions does not display either? I attempted .test dd:empty { display: none ...

csshide

How to retrieve the width of a document using jQuery?

Having a strange issue with determining the document width using $(document).width() during $(window).load and $(window).resize. The problem arises when the browser is initially full screen and then resized to a narrower width, causing content to require ...

javascriptjqueryhtmlcss

Changing the CSS background in React when updates occur

Currently working on toggling the CSS background image within this React application. The images have been successfully imported and a variable called "image" is set to the imported image as the iteration increases/decreases with each click. The issue I&a ...

cssreactjs

Tips for aligning the dialog box in the center of the screen based on the current scroll position

Is there a way to center the dialog box vertically at the current scroll position of the window when any of the "show dialog" buttons are clicked? For instance, if I click on location 3, I want the dialog box to be centered vertically within the current v ...

javascripthtmlcssmodal-dialogcenter

Am I on the right track in my understanding of how document and viewport relate to mouse position in JavaScript?

After reviewing responses from a previous inquiry, it is evident that both pertain to the x and y coordinates of mouse positions. In relation to the document and In relation to the viewport. I have delved into an article on QuirksMode, yet I feel ther ...

javascriptjqueryhtmlcss

Error encountered while unmarshalling JSON with a root element in Jersey client

As I establish a connection to a remote server that is out of my control, I encounter an issue with the JSON response containing a root element. {"company":{"name":"Personal"}} Upon attempting to convert the string into a company object, an error occurs: ...

javajsonjersey-client

Web Server in Embedded Systems

We are in the process of developing a web application that needs to be accessible from multiple sub-domains and different actual domains. For instance, clients can sign up and choose to use their own custom domains. This would involve them pointing their d ...

javaphpweb-applicationswebserver

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

Here is the HTML code I am working with: <div class="app-bar"> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> </div>' ...

androidcssios7

Troubleshooting mat-accordion title problem on mobile devices

Despite reading numerous blogs and conducting extensive searches on Google, I am still unable to resolve the CSS issue related to Angular material below. Your assistance in fixing this problem would be greatly appreciated. Desktop view: https://i.stack.im ...

htmlcssangularangular-material

Get the ability to overlay text onto an image by using jQuery for downloading

Currently, I am facing an issue with an online photo editor in my project. The problem is that I am unable to download the image after adding and editing text on it. The texts added are editable but the image cannot be downloaded after the changes. I nee ...

javascriptphpjqueryhtmlcss

Having trouble getting CSS styles to work properly in conjunction with Javascript code

Currently, I am developing a feature on a canvas that covers the entire webpage's width and length. In this canvas, I have the ability to create boxes by clicking down anywhere on the canvas, dragging my mouse in any direction, and upon releasing the ...

javascriptcsseventscanvasmouse

Dynamically include new events

Here is the code snippet I have in a JS file: $(".dropmenu").on("click", function(event){ event.preventDefault(); $(this).parent().find("ul").slideToggle(); }); On my webpage, I'm using the following code: var append="<ul> ...

jquerycsseventsdynamic

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

JSBIN HTML <p> <div>123</div> </p> CSS p div{ background:#f00; } Encountering an odd issue here. When I input the HTML structure as shown below: <p></p><div>123</div> The CSS code fails to produce ...

htmlcss