Impossible de charger un fichier css à plusieurs jsp

**ziggs** · 13/12/2018, 13h38

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Cincinnatus** · 13/12/2018, 14h16

Bonjour,

Dans ton index.html, ton header est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ziggs** · 13/12/2018, 15h58

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<%@ 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.

**Cincinnatus** · 14/12/2018, 09h39

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.

Envoyé par ziggs

J'ai fais un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 ?

Envoyé par ziggs

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<%@ 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>.

**ziggs** · 14/12/2018, 13h59

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 XML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**OButterlin** · 14/12/2018, 17h04

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.

**ziggs** · 15/12/2018, 21h37

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

Impossible de charger un fichier css à plusieurs jsp

Servlets/JSP Java

Discussions similaires

Partager

Partager