I'm building a dynamic web project using JSP and Servlets with Tomcat 7.0 in Eclipse. Everything works fine when I have the CSS-code inside the JSP-file, but when I'm moving it into a seperate file, I can't get the JSP-file to find the CSS-file. My file strucuture look like this:
MyProject
-src
-build
-lib
-WebContent
--MyJsp.jsp
--MyCss.css
--META-INF
--WEB-INF
This is what I've tried:
<link rel = "stylesheet" type ="text/css" href = "/MyCss.css"/>
<link rel = "stylesheet" type ="text/css" href = "MyCss.css"/>
<link rel = "stylesheet" type ="text/css" href = "/MyProject/WebContent/MyCss.css"/>
<link rel = "stylesheet" type ="text/css" href = "${pageContext.request.contextPath}/MyCss.css"/>
Literally nothing works. The JSP-pages doesn't find the CSS-file. (I'm not using a web.xml and the first that is loaded is a servlet, if that has someting to do with it).
I know that other threads about this issue exists, but none of the answers works for me.
Hank
Create a new folder under WebContent as css and add your css file
and then try the below code in jsp.
<link rel="stylesheet" href="css/yourfile.css" type="text/css" />
You can add firebug plugin in firefox and try to load the jsp file, which will help you in debugging,like whether the css file is loaded.Hope this helps.
There may be a lot of ideas floating around, but I'd suggest bisecting the problem until a solution arrives.
Open the page with the external CSS. Look at the page source (from your browser or just save the resulting HTML somewhere). How does the link look? (Hint: It should be something like <link rel="stylesheet" type="text/css" href="…"/>-
Open the CSS in the browser. Does the CSS load? If so, you've most likely made an error in the HTML-generating part of your HTML, but I think it is unlikely.
Look into your WAR file (perhaps with jar tf or rename it to .zip and look with some unzipper) – is the CSS included? Maybe it was discarded in your build process? Some builds reserve a /resources/ folder for stuff like extra CSS files.
If the file is there, look at the tomcat logs, perhaps you will find an error there.
Your css resource link may be wrong and you may need to provide a relative link from your JSP file. Try to link it as follows (note the use of the two periods to mention a one dir above your JSP file):
<link href="../MyCss.css" rel="stylesheet" type="text/css">
And as #dev already mentioned in his comment, ${pageContext.request.contextPath}/MyCss.css as a path should already do the trick.
The problem is that the file is not being served as a resource. You need to tell the server to expose a folder of resources to a certain path and move that file there. Since I'm not familiar with what you are using to setup your application (if you're using spring or something else), I can't give anymore insight on the problem.
Related
I want to connect my .html file (containing Bootstrap's elements) with Bootstrap's .css file. I saw a lot of variants like:
<link href="resources/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet">
...but none of them was correct. In my case, I mean.
How it looks when I include in my code some of these line
How it looks when I include following line instead of these above:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
The conclusion are such that the app can see .css from the Internet but there is some problem with local file.
Here I sent .html file code:
http://wklej.org/id/3272762
If someone want to check folder structure, there is screenshot of my project in IntelliJ:
http://s6.ifotos.pl/img/idescreen_qrwrweq.jpg
I read on Stack there could be some problem with configuration but their solutions didn't seem appropriate considering fact that I use Spring Boot, not pure Spring without auto-config. Maybe there should be something added in application.properties? I saw also tips to put all .htmls with .css in one folder but... well, I don't think it is a good way.
Does someone know what I do wrong and what can I do to correct it to work properly?
EDIT.
If you are looking for solution, please read comments directly under first post
Try this above the other links:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Hope this works
As I see in file structure templates too is under the resources so the path should be href="../../static/css/bootstrap.min.css"
After receiving inputs of the Source HTML File and Bootstrap CSS file.
From the HTML file, ../ this will make it go one folder back which is resources, then go two folders forward static/css/ then there the bootstrap.min.css will be found!
HTML:
Propagander(main folder)/src/main/resources/templates
CSS:
Propagander/src/main/resources/static/css
The correct link should be.
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
Please let me know if this fixes your issue!
I saw an error in file path you added here:
<link href="resources/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
instead write:
href="../../resources/static/css/bootstrap.min.css"
EDIT:
href="../../static/css/bootstrap.min.css"
I am facing a problem in jsp-servlet, when I am setting up my index.jsp as welcome-file (default page to run first as soon as the project gets run) at that time the CSS and JS files are not rendered.
My project Hierarchy is like this
-ProjectName
-User
-css
-js
-index.jsp
And also when I run my project the URL in the browser will be localhost:8080/ProjectName so here index.jsp is called but without CSS and JS files.
Edit: Finally, I had solved this issue by copying the CSS and JS to the root directory also. i.e. I have CSS and JS # "User" as well as "ProjectName".
Try with the context path,
<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css">
will get you the path of the css file in the css folder. or with the scriptlet,
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/style.css">
However, it is not recommended to you use the scriptlets in the jsp.
I am writing a JSP program and would like to apply css that I placed in WEB-INF file to the mypage.jsp. But when I use href the css is not applied. Here's my code inside the mypage.jsp:
<link rel="stylesheet" type="text/css" href="WEB-INF/assets/css/styles_main.css">
If this is wrong, how can I apply css to jsp in Eclipse?
Everything placed inside WEB-INF is not accessible from the outside. Put your CSS anyywhere you want, but not under WEB-INF.
Yes, correct put your Link into your header in Jsp, and put it in WebContent.
I have a problem.
This is my folders tree
WEB-INF
---adminarea
---some jsp files
---jspf
---view
---error
---userarea
some jsp files
Resources
---css
---js
---img
When I work with servlet and for example I call servlet mapped /admin everythings works but when I ask for a servlet mapped /admin/admin_page that forward the request and response to an jsp file inside adminarea folder I get an error. In particulary all the resources css, js and img are not found. The system try to find the resources in ...My_project/admin/resources/ but the resources aren't there. How can I fix the problem in the way that all the file in my project wherever they are could reach correctly the resources?
This is the way I call the resources the header
<link rel="stylesheet" href="resources/css/style.css">
by giving full path to your CSS or JS or any static resources like Image folder as below
<link rel="stylesheet" href="${pageContext.servletContext.contextPath}/resources/css/style.css">
try this one it may help you
Hi
Now at time being i am new in java i want to embed css in jsp by using two jsp one for html and other for css same like Dreamweaver i done it neatbeans and second confusion is that how both files deploy for example our jsp for html liey in webapp/myapp/index.jsp and where our css file will go? or remain in webapp/myapp/index.jsp,css.jsp or what type of extension we give by using css in jsp.thanx for ans.
Create a new folder named CSS or to your wish under the path webapp/myapp/CSS and save your css files inside.
To link a css file to your jsp file , use the following syntax ,
<link rel="stylesheet" href="/webapp/myapp/CSS/main.css">
Hope this helps !!
You do it like you were usually doing it. You create a file with the css extension and add the link in the jsp file. You can put the css file wherever you want as long as you give the correct path when you link it in the jsp page.
Here you have an example of how you can have you files structure.
And in any of the pages I just add
<link rel="stylesheet" href="styles/newstylesheet.css" type="text/css">