Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Servlets/JSP Java Discussion :

Impossible de charger un fichier css à plusieurs jsp


Sujet :

Servlets/JSP Java

  1. #1
    Futur Membre du Club
    Impossible de charger un fichier css à plusieurs jsp
    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.

  2. #2
    Membre éprouvé
    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">

  3. #3
    Futur Membre du Club
    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.

  4. #4
    Membre éprouvé
    Citation Envoyé par ziggs Voir le message

    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 Voir le message

    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 ?

    Citation Envoyé par ziggs Voir le message

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

  5. #5
    Futur Membre du Club
    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 ?

  6. #6
    Modérateur

    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.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  7. #7
    Futur Membre du Club
    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