I am facing problem while linking the css file in jsp page.
My eclipse folder structure is
--SampleProject
--WebContent
--META-INF
--resource
--css
style.css
--images
(style sheet images are present here)
--js
--WEB-INF
a.jsp
b.jsp
I want to link the css from this path resource/css/style.css in a.jsp page.
I tried all the below combinations. but no use.
<link href="${pageContext.request.contextPath}/css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../../css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="WebContent/resource/css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="resource/css/styles.css" rel="stylesheet" type="text/css" media="screen" />
and in style sheet i am linking the images by using
body {
background: #c9ebff url(resource/images/left_panel.jpg) top repeat-x;
}
please help to resolve this issue.
Thanks in advance.
Try to use
body { background: #c9ebff url(../images/left_panel.jpg) top repeat-x; }
or
body { background: url(../images/left_panel.jpg); } // if linking, then add other attributes
When facing these type of issues i.e files not linking .... try to use
FIREBUG for tracing out the browser/linking errors ... FireBug very
useful debugging tool.
Use backslash (\) instead of forward slash in path (/).
Example:
<link href="..\css\styles.css" rel="stylesheet" type="text/css" media="screen" />
Related
I am doing a project in Java using Spring Boot in the intellij idea under the management of Maven, and I occasionally have a problem with connecting bootstrap.min.css on the HTML page.
In my case, this problem arises spontaneously, and I could not determine its cause. Even now I have several absolutely identical projects, and in some of them this problem exists, and in others it has disappeared.
I connect bootstrap.min.css in the same way as on this page https://getbootstrap.com/docs/4.3/getting-started/introduction/
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>LoginPage2</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/static/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
when I go to the page in the browser, an error message is displayed in the console:
Refused to apply style from 'http://localhost:8081/static/css/bootstrap.min.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled
in my case it helped me:
replacing this code
<link rel="stylesheet" href="/static/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
with this one
<link rel="stylesheet" href="/static/css/bootstrap.css">
remove all comments from files bootstrap.min.css and bootstrap.css
just in case, explicitly register the path to resources in the project with spring boot, for example:
#Configuration
public class StaticResourceConfig implements WebMvcConfigurer {
private static final String[] CLASS_PATH = {"classpath:/"};
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**").addResourceLocations(CLASS_PATH);
}
}
If there is a spring security, then make sure that there is permission to the resources.
If you are using local downloaded bootstrap in your PC then, remove integrity and crossorigin from your link. I think this is work for you.
You can try this.
Add in your link tag two more attribute
type="text/css" media="all"
<link rel="stylesheet" href="/static/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" type="text/css" media="all">
I work with a Java/Spring project and the project structure is provided below,
I need to reference the app.css in the index.jsp file. Currently, I reference the following way in the index.jsp and the app doesn't get the CSS information's.
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Bitcoin Wallet</title>
<link href="${pageContext.request.contextPath}/resources/css/app.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</html>
In the dispatcher-servlet.xml, I provided the resources path as below,
The page I get in the localhost clearly doesn't have the css. How to solve the issue?
To use resources in spring mvc project you have to declare mvc:resources, to map url to a physical file path location.
<mvc:resources mapping="/resources/**" location="/resources/css/"
When you use /resources/ in jsp file spring will map this url to /resources/css/.
Next you can reference css file in jsp file:
<link href="<c:url value="/resources/css/app.css" />" rel="stylesheet">
And move resources folder into webapp folder as
Is there a way that I could get the url of the page that I just downloaded? Not the links that are contained in the html page, but the url of the actual html page itself
?
I tried doing this,
org.jsoup.nodes.Document doc = Jsoup.parse(child, "UTF-8", "");
string url = doc.location();
System.out.println(url);
but then the url would return an empty string.
Assuming the page you downloaded is a Document, simply call Document.location() to get the URL it was served from. If the URL you passed to Jsoup.connect() was a redirect, the Document location will give you the URL it was eventually served from.
If you used WinHTTrack usually it saves the URL, but what you could do is look for PHP files or JavaScript files that are connected to the site's URL. For instance the downloaded site below has a few links:
<html lang="en-US">
<!-- Mirrored from brigade3.com/ by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 13 Dec 2014 04:02:28 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name=viewport content="width=device-width,initial-scale=1">
<title>BukkitCloud | Beta Stage</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="xmlrpc.php" />
<link rel="shortcut icon" type="image/x-icon" href="assets/uploads/2013/12/favico.png">
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,800,700italic,700,600italic,600,400italic,300italic,300|Source+Sans+Pro:200,300,400|Lato&subset=latin,latin-ext' type='text/css' />
<link rel="alternate" type="application/rss+xml" title="Brigade » Feed" href="feed/index.html" />
<link rel="alternate" type="application/rss+xml" title="Brigade » Comments Feed" href="comments/feed/index.html" />
<link rel='stylesheet' id='rs-settings-css' href='assets/plugins/revslider/rs-plugin/css/settings.css' type='text/css' media='all' />
<link rel='stylesheet' id='rs-captions-css' href='assets/plugins/revslider/rs-plugin/css/captions.css' type='text/css' media='all' />
<link rel='stylesheet' id='default_style-css' href='assets/themes/passage/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='stylesheet-css' href='assets/themes/passage/css/stylesheet.min.css' type='text/css' media='all' />
<!--[if IE 8]>
<link rel='stylesheet' id='ie8-style-css' href='http://brigade3.com/assets/themes/passage/css/ie8.min.css' type='text/css' media='all' />
<![endif]-->
<!--[if IE 9]>
<link rel='stylesheet' id='ie9-style-css' href='http://brigade3.com/assets/themes/passage/css/ie9.min.css' type='text/css' media='all' />
<![endif]-->
<link rel='stylesheet' id='style_dynamic-css' href='assets/themes/passage/css/style_dynamic.css' type='text/css' media='all' />
<link rel='stylesheet' id='responsive-css' href='assets/themes/passage/css/responsive.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='style_dynamic_responsive-css' href='assets/themes/passage/css/style_dynamic_responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='custom_css-css' href='assets/themes/passage/css/custom_css.css' type='text/css' media='all' />
<script type='text/javascript' src='http://brigade3.com/wp-includes/js/jquery/jquery.js'></script>
<script type='text/javascript' src='http://brigade3.com/wp-includes/js/jquery/jquery-migrate.min.js'></script>
<script type='text/javascript' src='assets/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js'></script>
<link rel='prev' title='FEATURES' href='features/index.html' />
<link rel='next' title='CONTACT' href='contact/index.html' />
<link rel='canonical' href='index.html' />
<link rel='shortlink' href='index.html' />
<style type="text/css">
.comments-link {
display: none;
}
</style>...
Then, as you see, you search out a possible URL that could be it, so in this case it would be this URL that is link to a JavaScript file.
<script type='text/javascript' src='http://brigade3.com/wp-includes/js/jquery/jquery.js'></script>
<script type='text/javascript' src='http://brigade3.com/wp-includes/js/jquery/jquery-migrate.min.js'></script>
Then just take http://brigade3.com/wp-includes/js/jquery/jquery.js and shorten it down to http://brigade3.com and you found the site URL. I hope this is what you mean!
I am working with Spring 3.1.3, Prime Faces 3.4.2, Hibernate 3.6.8 and Pretty Faces 2.0.4.
The CSS is showing when I deploy the app in a local Server (Apache Tomcat 7), but when I deploy the same project to Heroku the CSS is not showing.
This is how I input the CSS in my main.xhtml template file:
<h:outputStylesheet library="css" name="bootstrap.css" />
<h:outputStylesheet library="css" name="custom.css" />
This is the result in the html source (local server):
<link type="text/css" rel="stylesheet" href="/evaluation-cloud/javax.faces.resource/theme.css.jsf?ln=primefaces-cupertino" />
<link rel="stylesheet" media="screen" type="text/css" href="/evaluation-cloud/javax.faces.resource/bootstrap.css.jsf?ln=css" />
<link rel="stylesheet" media="screen" type="text/css" href="/evaluation-cloud/javax.faces.resource/custom.css.jsf?ln=css" />
<link rel="stylesheet" media="screen" type="text/css" href="/evaluation-cloud/javax.faces.resource/primefaces.css.jsf?ln=primefaces" />
This is the result in the html source when deployed to Heroku
<link type="text/css" rel="stylesheet" href="//javax.faces.resource/theme.css.jsf?ln=primefaces-cupertino" />
<link rel="stylesheet" media="screen" type="text/css" href="//javax.faces.resource/bootstrap.css.jsf?ln=css" />
<link rel="stylesheet" media="screen" type="text/css" href="//javax.faces.resource/custom.css.jsf?ln=css" />
<link rel="stylesheet" media="screen" type="text/css" href="//javax.faces.resource/primefaces.css.jsf?ln=primefaces" />
Notice the '//' in the href
I don't know why this is happening. If someone have experienced the same issue please help me.
Thank you.
I changed the configuration to use jetty runner and that solved the problem.
Internet Explorer doesn't support HTML <base> tag and even other browsers do, there are some problems when redirect takes place inservletsto some.jsppages for examplerequest dispatching.`
It's feasible to add ${pageContext.request.contextPath} with each URL
nor request.getServletPath()
JSP relative links for CSS and images with servlets forwarding may change things a lot. This link : Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
Is there a better approach with JSP / servlets or it's just an IE issue?
Link : HTML <base> TAG and local folder path with Internet Explorer
And if it is an IE issue:
1. how to fix the IE issue as the above post is unable to give a valid answer?
2. how to solve it with JSP / servlets?
My website is now showing CSS and images.
E.g. HTML output is:
<base href="http://localhost:8080/Alpinema/" /> is not working for
<link media="all" rel="stylesheet" type="text/css" href="css/all.css">
It works in other browsers like Firefox and Chrome.
My JSP code portion:
<head>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
<meta charset="utf-8">
<title>Alpinema.com</title>
<link media="all" rel="stylesheet" type="text/css" href="css/all.css">
/css?family=Merriweather|PT+Sans:700|Nobile:400italic' rel='stylesheet' type='text/css'>
</head>
Use <c:url> tag from JSTL to reference CSS/JavaScript resources inside my JSP files. By doing so you can be sure that the CSS/JavaScript resources are referenced always relative to the application context (context path).
Example
index.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="<c:url value="/css/main.css" />" />
<script type="text/javascript" src="<c:url value="/js/utils.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-1.8.3.js" />"></script>
</head>
<body>
...
</body>
</html>
For even more solutions see my answer here:
Adding external resources (CSS/JavaScript/images etc) in JSP.