Impossible de charger un fichier css à plusieurs jsp

Version imprimable

Bonjour,

Me voilà bien embêter, je débute en J2EE sous Eclipse / Tomcat.
J'ai créer un petit site avec plusieurs pages, avec des liens pour pouvoir passer de l'accueil vers d'autres pages et vice-versa.
Mon site fonction, mais mtn que j'ajoute mon fichier .css, celui ci ne fonctionne que sur le http://localhost:8080/Site/index.html.
Lorsque je change de page via les liens mes pages accueil.jsp et autre n'affiche pas le style demandé.
J'ai parcouru les forums essayer de chercher une solution mais ça fait une journée que je bute sur ce problème.

Voici mon arborescence :

WebContent
 > css
     > bootstrap.min.css
 > jss
 > META-INF
     > web.xml
 > WEB-INF
accueil.jsp
index.html
menu.jsp
story.jsp

mon fichier web.xml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<display-name>Site</display-name>
  <welcome-file-list>
        <welcome-file>accueil</welcome-file>
    </welcome-file-list>
 
 
  <servlet>
    <servlet-name>Accueil</servlet-name>
    <servlet-class>com.site.servlets.Accueil</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Accueil</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
 
  <servlet>
    <servlet-name>Story</servlet-name>
    <servlet-class>com.site.servlets.Story</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Story</servlet-name>
    <url-pattern>/notre-histoire</url-pattern>
  </servlet-mapping>

mon fichier index.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
 
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
        <title>Site</title>
        <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
    <body>
 
    <p> test index </p>
 
    </body>
</html>

Mon fichier accueil.jsp :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
 
<meta charset="utf-8">
<title>Site</title>
</head>
<body>
 
<%@ include file="menu.jsp" %>
 
<p> Bienvenue sur le site (Accueil) </p>
 
 
 
</body>
</html>

Mon fichier story.jsp :

Code:

1
2
3
4
5
6
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
 
 
<%@ include file="menu.jsp" %>
<p> histoire du site </p>

En essayant de résoudre ce problème je n'arrive plus du tout à afficher mon style.css...
J'attends votre aide, merci bien.

Bonjour,

Dans ton index.html, ton header est :
Code:

1 2 3 4 5 6 7 8 <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>Site</title> <link rel="stylesheet" href="css/bootstrap.css" type="text/css" /> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head>
Tu dis que le fichier style.css n'est pas appliqué. Il faudrait simplement l'ajouter dans tes imports.
Pour tes JSP, c'est encore plus simple : tu ne références aucun des fichiers css ou js.

Une possibilité serait du genre ;

Code:

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

13/12/2018, 15h58
ziggs

Déjà merci pour votre réponse mais je n'ai pas très bien compris.
Qu'entendez-vous par ajouter le fichier dans les imports.

J'ai fais un

Code:

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

j'ai importé dans mes dossiers les fichiers .jss et .css

Mes jsp sont référencés dans le fichier menu.jsp que j'appel comme ceci :

Code:

<%@ include file="menu.jsp" %>

J'ai paramétré mes servlets, web.xml, insérés les liens dans les pages, je peux donc naviguer entre les pages.
Il n y a que le côté visuel du css qui ne fonctionne pas.
14/12/2018, 09h39
Cincinnatus

Citation:

Envoyé par ziggs

Il n y a que le côté visuel du css qui ne fonctionne pas.

Et donc les fichiers css ne sont pas chargés dans le navigateur.

Citation:

Envoyé par ziggs

J'ai fais un

Code:

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

j'ai importé dans mes dossiers les fichiers .jss et .css

Le lien est-il dans chaque .html et chaque .jsp ?

Citation:

Envoyé par ziggs

Mes jsp sont référencés dans le fichier menu.jsp que j'appel comme ceci :

Code:

<%@ include file="menu.jsp" %>

Ce include est dans le <body>. Comme le fichier menu.jsp n'est pas indiqué, je ne sais pas ce qu'il contient. Mais les css (et de préférence les .js) doivent être chargés dans le <head>.

Bonjour, merci pour vos réponses.

Je ne charge qu'une seule fois le style.css et les fichiers javascript.js dans l'index ou l'accueil.
Suis-je obligé de les charger dans toutes les vues html et jsp ?

Je suis confronté à un manque de perception au niveau de l'architecture de mon site.

Je ne sais pas si ma première page (celle de l'index) doit être un index.html ou un index.jsp.

Je pense que le problème vient de là.

D'ailleurs dans mon architecture j'ai créé un fichier accueil.jsp et je souhaite lorsque je clique sur le bouton "site" cela me retourne sur :
http://localhost:8080/Site/ (à la racine)

d'où mon mapping fait comme ceci dans le fichier web.xml :
Code:

1 2 3 4 5 6 7 8 <servlet> <servlet-name>Accueil</servlet-name> <servlet-class>com.site.servlets.Accueil</servlet-class> </servlet> <servlet-mapping> <servlet-name>Accueil</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping>
A-t-on le droit de forcer un url-pattern avec un "/" ? ou dois-je mettre un /index.html ou /index.jsp ?
Je pense que mon problème de css et js vient de là, qu'en pensez-vous ?

14/12/2018, 17h04
OButterlin

Le problème vient plutôt de ton manque de connaissances du html.

Une page jsp est une représentation "serveur" d'une page qui sera envoyée au client (le navigateur) sous forme d'une page html.
Le jsp permet de gérer du code côté serveur mais ce n'est qu'une phase de transition.

Pour ton problème :

Seule ta page index.html contient une référence à ton css, normal du coup que ce soit la seule à en tenir compte.
Tu devrais faire une page jsp qui contient toutes les informations header communes et faire l'include de cette page dans toutes les autres.
Comme ceci, tu centraliserais les informations communes à un seul endroit, d'où un gain en maintenance.
15/12/2018, 21h37
ziggs

Bonjour et merci pour ses réponses précises.

Mon erreur vient du faite que je pensais que tout ce centraliser sur mon fichier index.html,
j'ai créer une page qui contient tout ce dont j'ai besoin pour le design, en l'incluant dans tout les fichiers qui la requière et ça fonctionne.

Merci à tous mon problème est résolu :)