Fichier CSS ne s'applique pas sur la JSP

**jamalmoundir** · 02/07/2007, 15h32

Salut,
je sais pas pq ma feuille de style ne s'applique pas sur ma jsp. Voila un extrait de mon fichier CSS

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
div#conteneurglobal
{
	border:1px solid #45843F;
	margin-right:auto;
	margin-left:auto;
	width:1024px;
	margin-top:20px;
}
 
div#finalspacer
{
	clear:both;
	width:1024px;
	background-color:#F4F4F4;
	margin-top:-1.3em;
}
 
div#haut
{
	margin:0px;
	padding:0px;
	width:1024px;
	/*position:relative;
	z-index:100;*/
}
 
div#conteneurmilieu 
{
	/*width:auto;*/
	padding:0px 0px 0px 180px;
	/*position:relative;*/
	background-color:#F4F4F4;
	float:left;
	clear:right;
	width:844px;;
}
 
/* A ENLEVER */
div#conteneurmilieularge {
	width:auto;
	border:solid white 0px;
	background-color: #FF0000; /* couleur du centre */
 
	/*/*/ border-left-width: 200px ;  /* left column width. NN4 hack to hide borders */
	border-left-color: white;   /* couleur colonne de gauche */
	border-left-style: solid;
	position:relative;
}
 
div#milieu 
{
	margin:0px;
	/*width:100%;*/
	/*position:relative;*/
	padding-bottom:30px;
	background-color:#F4F4F4;
	padding-left:20px;
	/*float:left;*/
}

ma jsp est la suivante :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
<%@ taglib uri="/WEB-INF/taglibs-datetime.tld" prefix="dt" %>
<%@ page isELIgnored="false" %>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- CSS Tabs is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 1.0 - http://creativecommons.org/licenses/by-nc-sa/1.0/ -->
<%@ include file="include/entete.jsp" %>
 
 
 
 
</head>
	<body>
		<div id="conteneurglobal">
			<div><a href="#" title="haut de page" id="top"></a></div>
			<h1 class="invisible">Livraisons</h1>
			<%@ include file="include/haut.jsp" %>
 
			<div id="conteneurmilieu">
				<div id="milieu">
					<div id="milieuinterieur">
						<%@ include file="include/navigation.jsp" %>
 
						<div id="consultation">
							<div id="titrecontenu">
								<h2>
									Livraisons	
								</h2>
							</div>
 
							<div id="barreprogression">
								<h3 class="invisible">Chemin de progression dans l'application</h3>
								<ul>
									<li>
										<a title="Livraisons">Livraisons</a>				
									</li>
									<li>
										<a href=''><img id='aideicone' src='images/pictos/picto_aide.gif' /></a>
									</li>
								</ul>
							</div>
 
							<div id="contenu">
								<a id="accescontenu"></a>
						    		<style type="text/css">
        
                                                                        body {
                                                                            font: 12px verdana, arial, sans-serif;
                                                                            background-color: #fff;
                                                                            margin: 50px;
                                                                        }
                                                                        
                                                                        ul#tabnav {
                                                                            font: bold 12px verdana, arial, sans-serif;
                                                                            list-style-type: none;
                                                                            padding-bottom: 24px;
                                                                            border-bottom: 1px solid #969696;
                                                                            
                                                                        }
                                                                        
                                                                        ul#tabnav li {
                                                                            float: left;
                                                                            height: 21px;
                                                                            background-color: #DDDDDD;
                                                                            margin: 2px 2px 0 2px;
                                                                            border: 1px solid #969696;
                                                                        }
                                                                        
                                                                        ul#tabnav li.active {
                                                                            border-bottom: 1px solid #fff;
                                                                            background-color: #fff;
                                                                        }
                                                                        
                                                                        ul#tabnav li.active a {
                                                                            color: #000;
                                                                        }
                                                                
                                                                        #tabnav a {
                                                                            float: left;
                                                                            display: block;
                                                                            color: #666;
                                                                            text-decoration: none;
                                                                            padding: 4px;
                                                                        }
                                                                        
                                                                        #tabnav a:hover {
                                                                            background: #fff;
                                                                        }
                                                                
                                                                </style>
									<h3>Gestion des intervenants</h3>			
									<ul id="tabnav">
									     <li class="active"><a href="acceuil.html">Liste des intervevants</a></li>
									     <li><a href="<c:url value="/edit.html?id=-1"/>">Ajout</a></li> 
								    </ul>
										 <pr>
											<table border="1" style="font-family:Verdana; font-size:12px;" >
												<tr>
													<th>Id</th>
													<th>Nom</th>
													<th>Login</th>
													<th>Mot de passe</th>
													<th>Tel</th>
													<th>Email</th>
													<th></th>
													<th></th>
												</tr>
												<c:forEach var="intervenant" items="${intervenant}">
													<tr>
														<td><c:out value="${intervenant.idIntervenant}"/></td>
														<td><c:out value="${intervenant.nomIntervenant}"/></td>
														<td><c:out value="${intervenant.loginIntervenant}"/></td>
														<td><c:out value="${intervenant.mdpIntervenant}"/></td>
														<td><c:out value="${intervenant.telIntervenant}"/></td>
														<td><c:out value="${intervenant.emailIntervenant}"/></td>
														<td><a href="<c:url value="/edit.html?id=${intervenant.idIntervenant}"/>">Modifier</a></td>
														<td><a href="<c:url value="/delete.html?id=${intervenant.idIntervenant}"/>">Supprimer</a></td>
													</tr>
												</c:forEach>
											</table>
										 </pr>
							</div> <!-- Fin du contenu -->
 
						</div> <!-- Fin de centre -->
 
					</div> <!-- Fin de milieu interieur -->
 
				</div> <!-- Fin de milieu -->
 
				<%@ include file="include/bas.jsp" %>
 
			</div>	<!-- Fin de conteneur milieu -->
 
			<div id="finalspacer"></div>
 
		</div> <!--  Fin de conteneur global -->
 
 
 
 
 
	</body></html>

et enfin ds mon fichier entete.jsp, j'ai l'appel du fichier CSS

Code :

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

<LINK title="charte intranet" href="style/complet.css" type=text/css rel=stylesheet>

Merci de jeter un coup d'oueil.

ps: le fichier CSS, c'est pas moi qu'il a fait, je l'est recupere et j'essaye de me baser dessus.

**aJavaDeveloper** · 04/07/2007, 17h05

Il y a plusieurs erreurs dans ton code.
Tout d'abord, il y a une balise </head> qui traîne dans ta page principale.
Ensuite, je pense que la déclaration des taglibs que tu utilises doit se trouver au-dessus de la déclaration de ta DTD.
De plus, il manque des guillemets dans ta balise <link>.
Enfin, je vois que tu codes en XHTML.
En HTML, la balise <link> ne doit pas nécessairement être fermée, ce qui n'est pas le cas en XHTML.
Voici donc la ligne à utiliser :

Code :

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

<LINK title="charte intranet" href="style/complet.css" type="text/css" rel="stylesheet"/>

Si ça ne fonctionne toujours pas, assure-toi que ta balise <link> se trouve bien dans la balise <head> de ton fichier entête.
Si ça ne fonctionne toujours pas, assure-toi que le chemin d'accès à ta feuille de style CSS est correct.

**jamalmoundir** · 04/07/2007, 17h40

j'ai fais ts les points que ta dit, sans succes.
mais pour </head> il y avait bien un <head> c'est au debut du fichier.
merci quand meme

**nicolasr59** · 04/07/2007, 21h34

Bonsoir,

n'aurais tu pas un problème d'accés(url) à la feuille de style.

Essaie de mettre une url en absolue pour vérifier.

**aJavaDeveloper** · 05/07/2007, 09h20

Ca pourrait aider si tu nous montrais le début du code (au moins le contenu de la balise <head>) de la page HTML générée par ta page JSP.
Pour récupérer ce code, il te suffit de visualiser ta page JSP dans un navigateur, de faire un clic droit sur cette page et de sélectionner l'option "visualiser la source".

**jamalmoundir** · 06/07/2007, 14h48

salut,
voila le code de ma 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
 
 
 
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
 
	<link title="charte intranet" rel="stylesheet" href="styles/intranet/menu-horizontal.css" type="text/css" />
	<link title="charte intranet" rel="stylesheet" href="styles/intranet/complet1.css" type="text/css" />
 
	<!--[if IE]>
	<link title="charte intranet" rel="stylesheet" href="/styles/intranet/ie.css" type="text/css" />
	<![endif]-->
	<link title="charte intranet" rel="stylesheet" href="styles/application/application.css" type="text/css" />
 
	<link title="texte seul" rel="alternate stylesheet" href="styles/texte/texte_seul.css" type="text/css" />
 
	<link rel="icon" href="/images/favicon.ico"/>
	<script type="text/javascript" src="scripts/menu.js"> </script>
	<title>
			Page d'accueil
			 - Application de Gestion de Projet</title>
</head>
	<body>
 
		<div id="conteneurglobal">
			<div><a href="#" title="haut de page" id="top"></a></div>
			<h1 class="invisible">Application de Gestion de Projet</h1>
			<!-- Haut de la page : titre et menu -->
<!-- TODO : changer les liens du menu de .do en .jsp si aucun traitement servlet n'est nécessaire -->
 
 
 
 
 
<div id="haut">
 
		<div id="nomdusite">
 
			<div id='logodusite2'><img src='./images/Logo_Experian-Prologia.png' /></div>
				<div>
					<p id="datedujour">
 
					vendredi 6 juillet 2007
					<br/>
					11:19
				</div>
			</div>
		</div>
 
</div>
 
			<div id="conteneurmilieu">
				<div id="milieu">
					<div id="milieuinterieur">
						<!-- Navigation à l'intérieur d'une rubrique (menu à gauche) -->
 
<div id="navigation">
	<div class='menu1'>
		<h3 class="invisible">Menu contextuel</h3>
		<br/>
 
		<ul>	
			<li><p>Gestion des intervenants</p>
				<ul>
					<li><a href="edit.html" title="Directions régionales">Intervenant</a></li>
					<li><a href="delete.html" title="Responsables de vente régional">Droit d'accés</a></li>
					<li><a href="list.html" title="Zone et secteurs">Fonction</a></li>
					</ul>
 
			</li>
		</ul>
	</div>
</div>
 
 
						<div id="consultation">
							<div id="titrecontenu">
								<h2>
									Application de Gestion de Projet	
								</h2>
 
							</div>
									<h3>Gestion des intervenants</h3>			
									<ul id="tabnav">
									     <li class="active"><a href="acceuil.html">Liste des intervevants</a></li>
									     <li><a href="/AGP-Prototype/edit.html?id=-1">Ajout</a></li> 
									     <li><a href="/AGP-Prototype/index.html">Index</a></li> 
								    </ul>
										 <pr>
 
											<table border="1" style="font-family:Verdana; font-size:12px;" >
												<tr>
													<th>Id</th>
													<th>Nom</th>
													<th>Login</th>
													<th>Mot de passe</th>
													<th>Tel</th>
 
													<th>Email</th>
													<th></th>
													<th></th>
												</tr>
 
 
													<tr>
														<td>1</td>
														<td>Jamal Moundir</td>
 
														<td>jmo</td>
														<td>PROLOGIA</td>
														<td>06 34 45 65 65</td>
														<td>moundir1@gmail.com</td>
														<td><a href="/AGP-Prototype/edit.html?id=1">Modifier</a></td>
														<td><a href="/AGP-Prototype/delete.html?id=1">Supprimer</a></td>
 
													</tr>
 
													<tr>
														<td>2</td>
														<td>Chirac Jacqu</td>
														<td>cja</td>
														<td>EXPERIAN</td>
														<td>06 56 67 67 78</td>
 
														<td>cja@prologia.fr</td>
														<td><a href="/AGP-Prototype/edit.html?id=2">Modifier</a></td>
														<td><a href="/AGP-Prototype/delete.html?id=2">Supprimer</a></td>
													</tr>
 
 
											</table>
										 </pr>
							</div> <!-- Fin du contenu -->
 
 
						</div> <!-- Fin de centre -->
 
					</div> <!-- Fin de milieu interieur -->
 
				</div> <!-- Fin de milieu -->
 
				<!-- Bas de page : utilisateur + copyright -->
 
<div id="sessionID">
	<p><strong>Utilisateur : </strong>null</p>
 
	<p><a href="acceuil.html">Se déconnecter</a></p>
</div>
 
<div id="bas">
	<div class="clr"></div>
	<div id="pied">
		<h3 class="invisible">Outils du site</h3>
		<div id="outils">
			<ul>
 
				<li>Mise à jour le : 3 Juillet 2007</li>
				<li><a href="acceuil.html" accesskey="3" title="Plan du site">Plan du site</a></li>
				<li><a href="acceuil.html" accesskey="5" title="Aide générale">Aide générale</a></li>
				<li><a accesskey="7" href="mailto:webmaster@intranet.agp.fr">Message à l'éditeur</a></li>
				<li><a href="#" title="Copyright">&copy; AGP 2007</a></li>
			</ul>
 
		</div>
	</div>
</div>
 
			</div>	<!-- Fin de conteneur milieu -->
 
			<div id="finalspacer"></div>
 
		</div> <!--  Fin de conteneur global -->
 
 
 
 
 
	</body></html>

Merci

**jamalmoundir** · 06/07/2007, 14h52

je viens de remarquer que le meme fichier css quand je l'applique sur un fichier html ça marche, avec une jsp ça marche pas. pourquoi ????
Merci

**aJavaDeveloper** · 06/07/2007, 15h00

Pourrais-tu également détailler l'arborescence de répertoires sous ton WebRoot ?
Il sera ainsi possible de voir si le chemin d'accès à ta feuille de style CSS est correct...

**jamalmoundir** · 06/07/2007, 15h09

Salut,
Ok, je te donne ici le chemin global de mon appli

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
AGP-Prototype\
                     WEB-INF
                                vues
                                       styles
                                              *.css
                                       include
                                               entete.jsp
                                               haut.jsp
                                               bas.jsp
                                               navigation.jsp
                                       scripts
                                       images
                                               *.png
                                       *.jsp

donc c'est ça mon arborescence, le contexte de mon appli c'est /AGP-Prototye

Merci bq

**aJavaDeveloper** · 06/07/2007, 15h20

Je pense que tu t'es trompé en indiquant WEB-INF : il s'agit plutôt de WebRoot non ???
En effet, le répertoire WEB-INF n'est pas accessible pour tes utilisateurs.
Il ne faut donc y placer ni tes pages JSP, ni tes images, ni tes feuilles de style CSS, ni tes scripts !!!
Le répertoire WEB-INF est en fait destiné à accueillir tes librairies, tes fichiers de config XML, ...
Le chemin à utiliser dans tes pages JSP pour que tes feuilles de style CSS soient appliquées est vues/styles/....css.

**jamalmoundir** · 06/07/2007, 15h24

ah d'accord, je savais pas. Donc il faudrat que je laisse dedans que les fichiers de config.
je vais essayer ,et te tiens au courant ,Merci
ah oui et sinon ,je peux mettrent ou je veux mes jsp et css ?.

**jamalmoundir** · 06/07/2007, 15h36

c'est nikel, Merci beaucoup ,vraiment merci bq, car ca fait plus de trois jours que je vérifie sans resultats.
à la prochaine

**aJavaDeveloper** · 06/07/2007, 15h39

En général, une bonne organisation est la suivante :

Code :

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

1
2
3
4
5
6
7
8
9
myApplication/       //le contexte de ton application
     css/                //contient tes feuilles de styles CSS
     img/                //contient tes images
     js/                  //contient tes scripts JavaScript
     jsp/                //contient tes pages JSP
     WEB-INF/
          classes/     //contient les sources de ton application
          lib/            //contient tes librairies
          web.xml     //ton descripteur de déploiement

Avec une organisation comme celle-là, le chemin à utiliser pour inclure tes feuilles de styles dans tes pages JSP est css/...

**jamalmoundir** · 06/07/2007, 18h06

ok, j'essayerai de faire ça, merci bien

Fichier CSS ne s'applique pas sur la JSP

Servlets/JSP Java

Discussions similaires

Partager

Partager