I am experiencing an issue with importing my CSS file

Have a somewhat confusing HTML question that is frustrating me.

I am struggling to incorporate certain css files into a jsp page.

Here is what I have attempted:

<link href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet">

And also tried:

<link href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet">

Unfortunately, the server keeps returning a 404 error and cannot import the file:

 {code="404", msg="/css/bootstrap.css", uri=/css/bootstrap.css}

The text 

" rel="stylesheet">

ends up showing on the webpage.

I made sure to include the imports at the top of the document to avoid any conflicts with previous lines. The css file definitely exists in the /css directory, and I have copied it to every possible location just to be sure. I'm completely puzzled by this issue... Could there be something obvious that I am missing?

htmlcsstwitter-bootstrapjsp

Answer №1

I realized I had forgotten to add this:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

In order to make it function properly:

<link href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet">

Answer №2

Perhaps using double quotes within single quotes could solve the issue.

<link href="<c:url value='/css/bootstrap.css'/>" rel="stylesheet">

Alternatively, have you experimented with:

<link href="../css/loginstyle.css" rel="stylesheet">
?

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 method for finding and observing the Javascript code being utilized on a webpage?

Is there a way to find and access specific Javascript used on a webpage? Imagine browsing through a webpage's source code and stumbling upon an element like this: <img border="0" alt="" onmouseout="hidetrail();" onmouseover="showtrail('imag ...

javascripthtmlajaxfirebug

Tips for avoiding HTML injections in HTML tooltips

I'm attempting to create a tooltip using HTML, but I need to escape specific HTML elements within it. So far, my attempts have been unsuccessful. Take a look at the example I've provided: http://jsfiddle.net/wrsantos/q3o1e4ut/1/ In this example ...

javascripthtmltwitter-bootstrap-3

Retrieving the current location synchronously via navigator.geolocation.getCurrentPosition();

I am having an issue with a function that is supposed to return the latitude and longitude as a string when called. Despite providing the correct values for latitude and longitude when alerting, it returns undefined. I would greatly appreciate any assist ...

javascripthtmlgeolocation

How to display an image stored in Laravel within a Nuxtjs application?

I'm trying to display all images that are saved in nuxtjs using Laravel's storage feature. <img v-for="(row, index) in files" :src="'storage/' + row" :key="index" alt="" width="150px" ...

htmllaravelvue.jsstoragenuxt.js

What steps are involved in linking Java with JavaScript?

After attempting to connect html and javascript using applet, unfortunately it was unsuccessful. I am curious if there is an alternative method besides applet to establish this connection. ...

javascriptjavahtmlapplet

Using jQuery to modify a CSS property when a specific option is chosen

I'm currently working on creating an option dropdown menu and I've hit a roadblock trying to display a textbox only when the 'other' option is selected. Here's what I have so far: <span id="con-country"><label for="count ...

jqueryhtmlcssmenu

Animating components when they first mount in React

I'm attempting to implement an onMount animation in React (and Tailwind if relevant). The code I currently have is as follows: const Component = () => { const [mounted, setMounted] = useState(false) useEffect(() => { setTimeout(( ...

cssreactjs

how can you make keyframe animation pause at the last stage?

Here is an example of utilizing CSS animations: .show-left-menu { -webkit-animation-name: leftSidebarAni; -webkit-animation-duration: .25s; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; } @-webkit-keyframes l ...

css

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

After researching various image sliders online, I came across this specific one. It worked perfectly fine when I included the JavaScript directly in a script tag within the HTML file. However, as soon as I tried to link it via a .js file, the slider stoppe ...

javascripthtmlcss

Failed to load CSS file in nodeJS application

I followed a tutorial to create a backend app using nodeJS and Express. My MongoDB connection with Mongoose is working fine. However, I am facing issues when trying to add a simple front-end using html/ejs/css. The endpoints are loading on localhost but on ...

javascripthtmlcssnode.jsexpress

Issue encountered while validating Laravel form using AJAX

My attempt to validate a modal form using ajax has hit a roadblock. I'm looking to display the error on the modal itself rather than closing it, but unfortunately, this approach isn't working as expected. I came across this repository that I&apo ...

phpjqueryajaxtwitter-bootstraplaravel-5

The dimensions of the glyph icon placed inside a tab

http://jsfiddle.net/r9dunwzs/1/ <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">one</a></li> <li> <a href="#profile" data-toggle="tab"> ...

htmlcsstwitter-bootstrapglyphicons

Is it possible to apply styling to an element based on the position property of its ancestors using only CSS?

Wondering if it's possible to style an element based on its ancestors' CSS property value. Consider the HTML snippet below: <div><!-- ancestor --> <!-- Any number of descendant levels before reaching the target div --> < ...

csscss-position

How to properly format credit card input using JavaScript or jQuery

I need to implement a feature where users input their credit card information, and once they complete the form, I want to display the credit card number in this format: xxxxxxxxxxxx1111 or xxxx-xxxx-xxxx-1111, without altering the actual input value. Is ...

javascriptjqueryhtmlinput

Steps for displaying a div when clicking a link in the navigation

Hello there, I'm from the Netherlands so please excuse any mistakes in my English. I will do my best to explain my question clearly.... Objective The goal is to have a navigation bar where each item, when clicked on, will display a div with content ...

htmlcssnavigationhover

Struggling to customize the style of bootstrap components

Struggling to get my custom css to take precedence over Bootstrap4 components in my Django project. I'm a beginner in front-end development and I'm hoping to articulate my question clearly. Note: This is an HTML sheet within a Django project. My ...

cssdjangobootstrap-4frontend

Creating optimized CSS builds for Next.js production

In dev mode, I have separate Custom CSS files for different layouts which work fine. However, when I publish my app in production mode, Nextjs combines all the CSS files together causing issues with my layouts. ...

cssreactjswebpacknext.js

What are some ways in which I can utilize the Ember Handlebars helper?

Similar Question: Using logical operators in a Handlebars.js {{#if}} statement Below is the code snippet provided: {{#each dataArray}} <li>{{#isTrue idVal1 idVal2}} display some text1 {{else}} display some text2 {{/isTrue}} & ...

javascripthtmlember.jshandlebars.js

Spin and Return: CSS Animation with Rotation

I am attempting to create an animation with this arrow that will move up and down, as well as rotate or change its direction at 0% and 100%. However, my current issue is that the arrow rotates for a second at 100% and then reverts back to its previous dire ...

htmlcssanimationcss-animations

What is the best way to showcase images along with their captions in a horizontal layout

I am facing an issue with displaying the last four images at the end of the page horizontally. When there is no caption, I can use the display:flex property to achieve this layout, but as soon as I add a caption, the images are displayed vertically instead ...

htmlcss