Problème CSS avec Java

**totot** · 22/07/2014, 16h27

Bonjour,

Je re-développe mon application que j'avais déjà développé en php en java web. Mon problème c'est que mon boostrap n'est pas pris en compte.
Je souhaiterai avoir la même interface que la première capture.
voici 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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>intranet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<!-- bootstrap -->
<link href="./assets/css/bootstrap/bootstrap.css" rel="stylesheet">
<link href="./assets/css/bootstrap/bootstrap-overrides.css"
	type="text/css" rel="stylesheet">
 
<!-- global styles -->
<link rel="stylesheet" type="text/css"
	href="./assets/css/compiled/layout.css">
<link rel="stylesheet" type="text/css"
	href="./assets/css/compiled/elements.css">
<link rel="stylesheet" type="text/css"
	href="./assets/css/compiled/icons.css">
 
<!-- libraries -->
<link rel="stylesheet" type="text/css"
	href="./assets/css/lib/font-awesome.css">
 
<!-- this page specific styles -->
<link rel="stylesheet" href="./assets/css/compiled/signin.css"
	type="text/css" media="screen" />
 
<!-- open sans font -->
<link
	href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,800italic,400,300,600,700,800'
	rel='stylesheet' type='text/css'>
 
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<script src="./assets/js/jquery.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<script type="text/javascript" src="./assets/js/controle.js"></script>
<script
	src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js"
	type="text/javascript"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/theme.js"></script>
</head>
<body>
	<!-- pre load bg imgs -->
	<script type="text/javascript">
		$(function() {
			// bg switcher
			var $btns = $(".bg-switch .bg");
			$btns.click(function(e) {
				e.preventDefault();
				$btns.removeClass("active");
				$(this).addClass("active");
				var bg = $(this).data("img");
 
				$("html").css("background-image",
						"url('./assets/img/bgs/" + bg + "')");
			});
 
		});
	</script>
 
	<div class="login-wrapper">
		<div class="box">
			<div class="content-wrap">
				<form id="signin" action="" method="post">
					<h6>Log in</h6>
					<label for="ident"><span class="help-required"></span></label> <input
						class="form-control required" role="input" aria-required="true"
						type="text" placeholder="Identifiant" name="ident" id="ident"
						value=""/> <label for="mdp"><span
						class="help-required"></span></label> <input class="form-control required"
						role="input" aria-required="true" type="password"
						placeholder="Mot de passe" name="mdp" id="mdp" value="" /> <a
						href="mdpPerdu.php" class="forgot">Mot de passe oublié ?</a> <input
						type="submit" value="Log in" name="submit" id="submitButton"
						class="btn-glow primary login"
						title="Cliquez ici pour vous connecter !" />
				</form>
			</div>
		</div>
	</div>
</body>
</html>

l'appel de l'image dans le fichier signin.css

Code :

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

1
2
3
4
5
6
7
8
9
.login-bg {
  background: url("../../img/bgs/blueish.jpg") no-repeat center center fixed;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bgs/landscape.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bgs/landscape.jpg', sizingMethod='scale')";
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Merci de votre aide

**joel.drigo** · 22/07/2014, 16h53

Salut,

Il est où le java là ? Je ne vois que du javascript, du html, et du CSS ! Et ton problème de couleur, ce ne serait pas juste à cause du path "../../img/bgs/blueish.jpg", qui devrait être "../img/bgs/blueish.jpg" ?

**totot** · 22/07/2014, 17h12

Là j'ai juste fait voir ma jsp.
Sinon voici l'architecture des fichiers
dossier assets dans webContent
mon image se trouve dans assets/img/bgs
et mon css dans assets/css/compiled

**joel.drigo** · 22/07/2014, 17h25

Bah, je ne vois pas en quoi l'interprétation de la CSS pourrait dépendre d'exécution de code java, vu qu'il n'y en a pas (De jsp, je ne vois qu'une entête, qui définit l'encodage de la page et le content type). Par contre, je vois trois chemins relatifs à des images dans la CSS, mais qui ne sont pas au même niveau de dossier...

**totot** · 22/07/2014, 17h28

Les deux autres images je ne l'ai ai pu, je l'ai est supprimer du dossier et j'ai oublié d'enlever les liens.
En revanche j'ai fait comme tu m'a dit pour la première mais toujours rien

**joel.drigo** · 22/07/2014, 17h41

Si tu regardes ta page dans l'outil de développement de ton navigateur de test, tu vois si la CSS est chargée ?

**totot** · 22/07/2014, 17h44

Je suis censé voir sa ou sous eclipse

**joel.drigo** · 22/07/2014, 17h49

Quand je parles de navigateur, je parle de FireFox, Chrome, Safari, Opera et consort (MaxThon dans mon cas). Quand je parle d'outils de développement dans le navigateur, je parle du truc qui s'appelle firebug je crois sous FireFox (chez moi, donc sous MaxThon, ça s'appelle "Outils de développement")). C'est un peu indispensable lorsqu'on développe du web, pour voir les ressources chargées ou pas, les erreurs dans l'exécution côté client, etc...

**totot** · 22/07/2014, 17h52

Je suis sur Chrome et j'en ai pas, donc il faut que j'en installe un

**totot** · 22/07/2014, 18h18

Apparement c'est bien chargé

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
<title>intranet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" href="http://intranet.dev4.inovawork.net/img/favicon.ico"/>
<link href="./assets/css/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="./assets/css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="./assets/css/compiled/layout.css"/>
<link rel="stylesheet" type="text/css" href="./assets/css/compiled/elements.css"/>
<link rel="stylesheet" type="text/css" href="./assets/css/compiled/icons.css"/>
<link rel="stylesheet" type="text/css" href="./assets/css/lib/font-awesome.css"/>
<link rel="stylesheet" href="./assets/css/compiled/signin.css" type="text/css" media="screen"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"/>
<script src="./assets/js/jquery.js"/>
<script src="./assets/js/jquery.min.js"/>
<script type="text/javascript" src="./assets/js/controle.js"/>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js" type="text/javascript"/>
<script src="./assets/js/bootstrap.min.js"/>
<script src="./assets/js/theme.js"/>

Et il me génère bien la bonne url pour aller chercher l'image dans le signin.css
url(http://localhost:8080/intranet/asset...gs/blueish.jpg) 50% 50% / cover no-repeat fixed

**totot** · 22/07/2014, 18h19

Je comprend pas pourquoi il me l'affiche pas
Je joint mon projet

**joel.drigo** · 22/07/2014, 18h47

Le fait de voir le source ne veut pas dire que les CSS sont bien chargées. Par contre, je suppose que si tu as l'URL complète du fichier, c'est que tu l'as obtenu justement par l'outil de développement, donc à priori, ça voudrait dire que la CSS qui la référence est bien chargée. Si tu dis que c'est la bonne URL, c'est que je suppose tu l'as testée dans ton navigateur (en la copiant directement dans la barre d'adresse) ?

**totot** · 22/07/2014, 20h25

Oui je l'ai testé en la copiant.
Je voie de ou peut venir le problème. J'ai mi l'application en pièce jointe au cas ou sa peut aide

**totot** · 23/07/2014, 00h12

Problème résolut!!
J'avais mal fait mon copier coller et donc il me manquer une classe.
Maintenant j'ai bien mon font sur mon navigateur mais pas sur mon IDE

Problème CSS avec Java

Développement Web en Java

Discussions similaires

Partager

Partager