Eclipse Dynamic Web Project Link CSS from JSP using Tomcat

Question

I have this Dynamic Web Project in Eclipse:

I want to link from home.jsp to home.css.

Head of home.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" %>

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Infinance Home Webpage">
    <meta name="author" content="Infinance">


    <link rel="icon" href="img/infinance-web-icon_128.png">
    <title>Infinance: Inicio</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

  <style id="style-1-cropbar-clipper">
.en-markup-crop-options {
    top: 18px !important;
    left: 50% !important;
    margin-left: -100px !important;
    width: 200px !important;
    border: 2px rgba(255,255,255,.38) solid !important;
    border-radius: 4px !important;
}

.en-markup-crop-options div div:first-of-type {
    margin-left: 0px !important;
}
</style></head>

...

I have tried a lot of solutions that I found in other StackOverFlow posts but the only one that it worked was:

<style type="text/css">
  <%@include file="css/style.css" %>
</style>

but I want to make it work with link and href, because I want to make a client-side resource reference, not a server-side include.

What it happens when the browser request the css file is this: Firefox console screenshot

I think that what happens is that when the browser request the http://localhost:8080/infinance/css/home.css, the Tomcat returns the home.jsp. I don't know why.

Home.java (servlet) code:

@WebServlet("/")
public class Home extends HttpServlet {
    private static final long serialVersionUID = 1L;
      private static DatabaseManager db;

    public Home() {
        super();
    }
    public void init() {
        db = new DatabaseManager();
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         ServletContext sc = getServletContext();
         RequestDispatcher rd = sc.getRequestDispatcher("/home.jsp");
         rd.forward(request,response);
        }
}

Any idea? Everything helps. Thanks.

Have you tried using absolute routes? like: <link rel="stylesheet" type="text/css" href="/yourApp/css/home.css"/> — Paplusc
– Paplusc, Commented Apr 11, 2018 at 10:27
@Paplusc Yes, I have tried it. But it didn't work. Now I almost sure that the problem is because the servlet config... I think that the browser requests "localhost:8080/infinance/css/home.css" and it returns the default servlet, but I don't know why it returns that. Thanks for your comment. — igonro
– igonro, Commented Apr 11, 2018 at 10:46
Heve you tried <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/home.css" /> — Sudhir Ojha
– Sudhir Ojha, Commented Apr 11, 2018 at 11:37

igonro · Accepted Answer · 2018-04-13 13:50:26Z

1

I finally solved it.

If you write:

@WebServlet("/")

in the servlet (Home.java), you make the home.jsp the default file when an URL is not especified in a servlet. In this case, I didn't have the url http://localhost:8080/infinance/css/home.css in any Servlet, so it always redirect to the home.jsp webpage.

The solution that worked for me was changing:

@WebServlet("/")

and writing instead:

@WebServlet("/home")

This way it only redirects you to the home.jsp when you write http://localhost:8080/infinance/home and you get a 404 error if you don't have the url specified, but it allows to use css and img with href.

Feel free to write other solutions that also could work.

answered Apr 13, 2018 at 13:50

igonro

1842 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

flyingfox · Accepted Answer · 2018-04-12 03:45:08Z

0

Modify the basepath of your home.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%
String path = request.getContextPath();
String serverPath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();
String basePath = serverPath + path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>"/> <!-- reset the basepath of your jsp -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Infinance Home Webpage">
    <meta name="author" content="Infinance">

answered Apr 12, 2018 at 3:45

flyingfox

13.5k4 gold badges30 silver badges43 bronze badges

Collectives™ on Stack Overflow

Eclipse Dynamic Web Project Link CSS from JSP using Tomcat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related