probleme css avec jsp

Version imprimable

12/06/2008, 09h18
Shixz

probleme css avec jsp

Bonjour à tous

Je réalise un projet web en jsp et je rencontre un problème.

Durant la réalisation de la maquette du futur site web le tout en html), j'ai géré la mise en forme avec une css, tout marchait nikel. Le résultat à l'écran correspondait à mes attentes.

Je suis maintenant passé à la réalisation de mes différentes jsp en incluant la css préalablement créée. Le problème étant que environ seulement la moitié de la mise en forme est appliqué a ma jsp, le reste ben ... je vois pas pourquoi il ne l'applique pas.

J'ai bien vérifié que j'ai appliqué tous les bon styles à chacunes de mes balises html de ma jsp.

Si vous avez une idée sur mon problème, n'hésitez pas

Merci pour votre aide.
12/06/2008, 09h31
hed62

Sans plus de détails, de code, etc.. ca risque d'être dur. Pourrait on voir le source HTML/Css généré à la fin ?

oui désolé voici donc dans un premier temps le code html de la maquette html

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
	<head>
		<title>Accueil FAQ</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" href="style/stylefaq.css">
		<script language="JavaScript">
			function afficher(id) {
				var total = 6;
				for (var i=0;i<=total;i++){
					if (i==id){
						document.getElementById("q"+i).style.color="#e36811";
						document.getElementById("r"+i).style.display="block";
					}
					else{
						document.getElementById("q"+i).style.color="black";
						document.getElementById("r"+i).style.display="none";
					}
				}
			}
		</script>
	</head>
	<body class="faq">
		<img src="style/img/bandeau_haut.gif" width="100%"><hr>
		<div style="text-align: center;">
			<a class="type1" href="http://www.test.fr">Retour HomePage Editeur</a>
			<br><br>
		</div>
		<fieldset id="fieldset_faq" class="pave">
			<legend align="top" id="legend">&nbsp; FAQ &nbsp;</legend>
			<div id="container">
				<form method="post">
					<div id="cntbox">
						<span id="q0"></span>
						<div class="gen" id="questions">
							<ul class="themes">
								<li class="theme">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Changement d'adresse</li>
								<li>
									<ul class="questions">
										<li>
											<a id="q1" class="type2" href="javascript:afficher(1)">Question</a>
										</li>
										<li>
											<a id="q2" class="type2" href="javascript:afficher(2)">Question</a>
										</li>
										<li>
											<a id="q3" class="type2" href="javascript:afficher(3)">Question</a>
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</form>
			</div>
			<div id="reponses">
				<div id="r0" class="accueil">
					<h4>Les questions le plus souvent posées</h4>
					<p class="reponse">
						ReponseReponseReponseReponseReponseReponseReponseReponseReponseReponse
					</p>
				</div>
				<div id="r1" class="hidden">
					<h4>Question</h4>
					<p class="reponse">
						ReponseReponseReponseReponseReponseReponseReponseReponseReponseReponse
					</p>
					<div class="edit">
						<div class="bouton">
							<a href="demfra.html" class="type3">Posez votre question</a>
						</div>
					</div>
				</div>
				<div id="r2" class="hidden">
					<h4>Question</h4>
					<p class="reponse">
						Reponse Reponse Reponse ReponseReponseReponseReponseReponseReponse
					</p>
					<div class="edit">
						<div class="bouton">
							<a href="demetr.html" class="type3">Posez votre question</a>
						</div>
					</div>
				</div>
				<div id="r3" class="hidden">
					<h4>Question</h4>
					<p class="reponse">
						ReponseReponseReponseReponseReponseReponseReponseReponseReponseReponse
					</p>
					<div class="edit">
						<div class="bouton">
							<a href="vaca.html" class="type3">Posez votre question</a>
						</div>
					</div>
				</div>
			</div>
		</fieldset>
		<hr><br><br>
		<p class="pied">
			Mentions légales
		</p>
	</body>
</html>

Et dans un deuxième temps, le code html obtenu de la jsp (la où la mise en forme n'est pas au rendez-vous)

Code:

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
 
 <html> 
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type"	content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\test\Bureau\Maquette\style\stylefaq.css">
		<script language="JavaScript">
			function afficher(id) {
				var total = 6;
				for (var i=0;i<=total;i++){
					if (i==id){
						document.getElementById("q"+i).style.color="#e36811";
						document.getElementById("r"+i).style.display="block";
					}
					else{
						document.getElementById("q"+i).style.color="black";
						document.getElementById("r"+i).style.display="none";
					}
				}
			}
		</script>
	</head>
	<body class="faq">
		<img src="C:\Documents and Settings\test\Bureau\Maquette\style\img\bandeau_haut.gif" width="100%">
		<hr>
 
		<div style="text-align:center;">
			<a class="type1" href="www.test.com">Retour Home Page test</a>
			<br><br>
		</div>
		<fieldset id="fieldset_faq" class="pave">
			<legend align="top" id="legend">&nbsp; FAQ &nbsp;</legend>
 
			<div id="container">
				<form method="post">
					<div class="cntbox">
						<span id="q0"></span>
						<div class="gen" id="questions">
							<ul class="themes">
										<li class="theme">&nbsp;Abonnement</li>
										<li>
											<ul class="questions">
 
 
														<li>
															<a id="q1" class="type2" href="javascript:afficher(1)">Editeur 1 Theme 1 Question 1</a>
														</li>
 
 
														<li>
															<a id="q2" class="type2" href="javascript:afficher(2)">Editeur 1 Theme 1 Question 2</a>
														</li>
 
 
 
											</ul>
										</li>
							</ul>
						</div>
					</div>
				</form>
			</div>
 
			<div id="reponses">
				<div id="r0" class="accueil">
					<h4>Les problèmes les plus fréquemment posés</h4>
					<p class="reponse">Ici les réponses à vos questions</p>
				</div>
 
 
						<div id="r1" class="hidden">
							<h4>E1 T1 Q1</h4>
							<p class="reponse">
								Réponse Question1 Editeur1
							</p>
							<div class="edit">
								<div class="bouton">
									<a href="" class="type3">bout1</a>
								</div>
							</div>
						</div>
 
 
						<div id="r2" class="hidden">
							<h4>E1 T1 Q2</h4>
							<p class="reponse">
								Réponse Question2 Editeur1
							</p>
							<div class="edit">
								<div class="bouton">
									<a href="" class="type3">bout2</a>
								</div>
							</div>
						</div>
 
 
 
			</div>
		</fieldset>
		<hr><br><br>
		<p class="pied">Mentions légales</p>
	</body>
</html>

Je suis tête en l'air, j'ai forcément du loupé quelquechose d'important
Merci pour votre aide

Edit : j'ai juste remplacer mon nom dans une url

enfin le code de la jsp :

Code:

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
 
<%@ page language="java" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%> 
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic"%>
 
<html> 
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type"	content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" href="C:\Documents and Settings\test\Bureau\Maquette\style\stylefaq.css">
		<script language="JavaScript">
			function afficher(id) {
				var total = 6;
				for (var i=0;i<=total;i++){
					if (i==id){
						document.getElementById("q"+i).style.color="#e36811";
						document.getElementById("r"+i).style.display="block";
					}
					else{
						document.getElementById("q"+i).style.color="black";
						document.getElementById("r"+i).style.display="none";
					}
				}
			}
		</script>
	</head>
	<body class="faq">
		<img src="C:\Documents and Settings\test\Bureau\Maquette\style\img\bandeau_haut.gif" width="100%">
		<hr>
 
		<div style="text-align:center;">
			<a class="type1" href="<bean:write name='edit' property='urlsite'/>">Retour Home Page <bean:write name="edit" property="nomedit"/></a>
			<br><br>
		</div>
		<fieldset id="fieldset_faq" class="pave">
			<legend align="top" id="legend">&nbsp; FAQ &nbsp;</legend>
			<%int j=1;%>
			<div id="container">
				<form method="post">
					<div class="cntbox">
						<span id="q0"></span>
						<div class="gen" id="questions">
							<ul class="themes">
								<logic:present name="themes">
									<logic:iterate name="themes" id="theme">
										<li class="theme">&nbsp;<bean:write name="theme" property="libthem"/></li>
										<li>
											<ul class="questions">
												<logic:present name="questions">
													<logic:iterate name="questions" id="question">
														<li>
															<a id="q<%=j%>" class="type2" href="javascript:afficher(<%=j%>)"><bean:write name="question" property="liblongquest"/></a>
														</li>
														<%j++;%>
													</logic:iterate>
												</logic:present>
											</ul>
										</li>
									</logic:iterate>
								</logic:present>
							</ul>
						</div>
					</div>
				</form>
			</div>
			<%int i=1;%>
			<div id="reponses">
				<div id="r0" class="accueil">
					<h4>Les problèmes les plus fréquemment posés</h4>
					<p class="reponse">Ici les réponses à vos questions</p>
				</div>
				<logic:present name="questions">
					<logic:iterate name="questions" id="question">
						<div id="r<%=i%>" class="hidden">
							<h4><bean:write name="question" property="libcourtquest"/></h4>
							<p class="reponse">
								<bean:write name="question" property="repquest"/>
							</p>
							<div class="edit">
								<div class="bouton">
									<a href="" class="type3"><bean:write name="question" property="libboutcn"/></a>
								</div>
							</div>
						</div>
						<%i++;%>
					</logic:iterate>
				</logic:present>
			</div>
		</fieldset>
		<hr><br><br>
		<p class="pied">Mentions légales</p>
	</body>
</html>

13/06/2008, 09h52
Shixz

Toujours le même probleme, je m'arrache les cheveux
Vraiment personne n'a d'idées?
13/06/2008, 10h01
Er3van

Et ta feuille de style associée donne quoi ?
Si ça se trouve ça bien d'elle.

Sinon, avec l'add-on FireBug sur FF, tu peux essayer de voir d'où viennent tes soucis, ou du moins de voir si la css est reconnue/lue.
13/06/2008, 10h07
Shixz

Sur ma maquette, l'ensemble ensemble de mes données en "dur", j'applique ma feuille de style dessus, il en résulte à l'affichage la mise en forme souhaité, tout marche.

Maintenant pour la même feuille de style, sur ma jsp qui gere dynamiquement le contenu, la mise en forme est à 90% la meme. Néanmoins les 10% qui ne sont pas pris en compte rendent ma page jsp très moche (un div n'apparait plus du tout au même endroit).

J'avais oublié de préciser que je test mes pages sur ie6