JSP Eclipse Project - Linking CSS style page

Question

JSP Eclipse Project - Linking CSS style page

Asked 7 years, 6 months ago

Viewed 1,509 times

0

how to correctly link my style sheets in my JSP Servlet project? Below is the structure of my project. Also I do not know if the correct hierarchy. Help me. I already tried .. /webapp/style/style.css and nothing. I tried to modify and put the stylesheet in the webapp folder and link:

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

But you can’t, and like on the page it’s just an edge, it doesn’t pull everything...

Page HOME.JSP

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ page import="javax.servlet.http.HttpSession" %>
<%@ page import="br.edu.unilasalle.model.*" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <link href="style/estilo.css" rel="stylesheet"/>
</head>
<body class="fundo">
    <h1>Menu Principal</h1>
    <h3>Opções</h3>
    <a href='CadastroUsuario.jsp'>Cadastro de Usuário</a><br>
    <a href='CadastroBancos.jsp'>Cadastro de Bancos</a><br>
    <a href='CadastroCategorias.jsp'>Cadastro de Categorias</a>

<%
    if(request.getSession(true).getAttribute("usuario")!=null){

    Usuario usuario=        
   (Usuario)request.getSession(true).getAttribute("usuario");
%>
<p>
    Usuário: <%=usuario.getId()%>. <%=usuario.getNomeCompleto() %>   <a     
    href="LogoutController">Sair</a>
</p>

<%} %>
</body>
</html>

Style page.css

@CHARSET "ISO-8859-1";

body{
    background: rgba(0,77,153,0.6);
    border: 4px solid #8080c0;
    margin: 200px 500px 0px 500px;
    border-radius: 125px;
}

div {
    color: white;
    font-family: 'Times New Roman';
    font-size: 20px;
    padding: 80px;
    padding-bottom: 60px;
}

#acesso{
    margin-bottom: 5px;
    margin-left: 150px;
    font-family: 'Times New Roman';
    color: blue;
}

.fundo{
    background: url('../WebContent/img/wallpaper.jpg') no-repeat center;
    margin:0;
    padding:0;
    background-size:cover;
}

1 answer

Browser other questions tagged css jsp servlet

You are not signed in. Login or sign up in order to post.

by Pena Pintada • **4,678** points · Answer 1 · 2017-04-30T14:31:23+00:00

From what I read in your comment Voce says that the only property that works is " Border: 4px" .

So that means you’re calling the stylesheet correctly!!!

The problem is probably the style or the page.... Delete everything from your style sheet and just change the background color of the page to make a test.

In case you are sure to add one by one the styles in your style sheet and in your page check if they are running one by one .

Where you call the div , the id #acesso ?

You have to call them on the jsp page!!!
If not calling doesn’t work!!

You just called here on this excerpt from your codgo <body class="fundo"> have to do the same for the other properties of your css.

<body class="fundo">
    <h1>Menu Principal</h1>
    <h3>Opções</h3>
<div>
    <a href='CadastroUsuario.jsp'>Cadastro de Usuário</a><br>
    <a href='CadastroBancos.jsp'>Cadastro de Bancos</a><br>
    <a href='CadastroCategorias.jsp'>Cadastro de Categorias</a>
</div>
<p id="acesso"> Isso é uma id</p>
<%
    if(request.getSession(true).getAttribute("usuario")!=null){

    Usuario usuario=        
   (Usuario)request.getSession(true).getAttribute("usuario");
%>
<p>
    Usuário: <%=usuario.getId()%>. <%=usuario.getNomeCompleto() %>   <a     
    href="LogoutController">Sair</a>
</p>

<%} %>
</body>

The way I used the div and the id above is just an example, it doesn’t mean that it has to be used exactly in those places, Oce is free to use wherever you want..

As to how to call the link,which is not the problem, try so:

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

or

<link rel="stylesheet" href="${pageContext.request.contextPath}/style/estilo.css" />

In the first case above Voce can add ../ or remove to find the depth where your style page is. For example :

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