Problème de récupération de css

**jonnyboy** · 09/07/2007, 09h23

Bonjour à tous,
j'ai intégrer un calendrier javascript a l'intranet que je suis en train de réaliser. Ce calendrier est disponible à l'adresse suivante : http://www.zapatec.com/website/main/products/prod1/.

Voila le code du calendrier que j'ai télé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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
  <head>
 
<!-- UTF-8 is the recommended encoding for your pages -->
    <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
    <title>Zapatec DHTML Calendar</title>
 
<!-- Loading Theme file(s) -->
    <link rel="stylesheet" href="http://www.zapatec.com/website/main/../ajax/zpcal/themes/aqua.css" />
 
<!-- Loading Calendar JavaScript files -->
    <script type="text/javascript" src="http://www.zapatec.com/website/main/../ajax/zpcal/../utils/zapatec.js"></script>
    <script type="text/javascript" src="http://www.zapatec.com/website/main/../ajax/zpcal/src/calendar.js"></script>
<!-- Loading language definition file -->
    <script type="text/javascript" src="http://www.zapatec.com/website/main/../ajax/zpcal/lang/calendar-fr.js"></script>
 
  </head>
  <body>
 
    <input type="text" id="calendar" name="calendar" />
    <button id="trigger">...</button>
    <script type="text/javascript">//<![CDATA[
      Zapatec.Calendar.setup({
        firstDay          : 1,
        electric          : false,
        inputField        : "calendar",
        button            : "trigger",
        ifFormat          : "%Y/%m/%d",
        daFormat          : "%Y/%m/%d"
      });
    //]]></script>
<noscript>
<br/>
This page uses a <a href="http://www.zapatec.com/website/main/products/prod1/"> Javascript Calendar </a>, but
your browser does not support Javascript. 
<br/>
Either enable Javascript in your Browser or upgrade to a newer version.
</noscript>
<br><a href="http://www.zapatec.com/website/main/products/prod1/">Zapatec Javascript Calendar</a><br>
 
  </body>
</html>

Ce code fonctionne parfaitement bien. J'ai pu récupéré les scripts et je n'ai plus besoin de passer par internet pour les exécuté. J'aimerais pouvoir en faire autant avec la feuille de style. Je l'ai donc récupéré et intégrée la feuille de style que j'utilisais deja, nommée style.css. Et la, ca ne fonctionne plus

.

Le code de ma feuille de style :

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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
/* Copyright c 2003-2004 Wang, Chun-Pin All rights reserved.
 *
 * Version:	$Id: style.css,v 1.8 2006/09/05 15:57:22 alex Exp $
 *
 */
BODY{
	MARGIN: 0px;
	line-height: 1.5;
	font-family: "Arial", "Helvetica", "sans-serif";
	font-size: 10pt;
	color: #262626;
	background-color:#FFFFFF;
	scrollbar-face-color:#FFFFFF;
	scrollbar-shadow-color:#AABDFF;
	scrollbar-highlight-color:#AABDFF;
	scrollbar-3dlight-color:#AABDFF; 
	scrollbar-darkshadow-color:#FFFFFF;
	scrollbar-track-color:#FFFFFF; 
	scrollbar-arrow-color:#AABDFF;
}
 
TABLE, TD {
	font-family: "Arial", "Helvetica", "sans-serif";
	font-size: 10pt;
	line-height: 1.5;
	border-color:#D4D0C8;
}
 
TD.surround {
	background-color:#FFCC00;
	color:white;
}
.outline {
	font-family: "Arial", "Helvetica", "sans-serif";
	color:#FF9E31;
	font-size: 16pt;
	font-weight: bold;
}
TD.title {
	background-color:#EEEEEE;
	color:#FF6600;
}
 
td.prompt {
	color:#FF6600;
	vertical-align: top;
	background-color: #F5F5F5;
}
 
td.prompt_middle {
	color:#FF6600;
	background-color: #F5F5F5;
}
td.content {
	vertical-align: top;
	background-color: #FFFFFF;
}
 
td.line1 {
	background-color:#F5F5F5;
}
 
td.line0 {
	background-color:#FFFFFF;
}
 
td.line_highlight {
	background-color:#FFCC99;
}
A {
	text-decoration: none;
	color:#0000C0
}
a.name {
	color:#007a00;
}
A:hover {
	text-decoration: underline;
	color:#ff9900
}
 
a.toolbar {
	font-size: 8pt;
}
BODY ul {
	list-style-type: square; 
	color: #5276B5;
}
 
BODY ol {
	color: #5276B5;
}
 
.notice {
	color: red;
}
 
INPUT {
	border: 1px solid #cccccc;
	font-family: tahoma, arial, helvetica, sans-serif;
	font-size: 8pt;
}
select {	
	font-size:8pt;
	color:#000066;
	cursor: pointer;
	BACKGROUND-COLOR: #FFFFFF;
}
 
INPUT.checkbox {
	font-size:10pt;
	color:#000066;
	background-color:#FFFFFF;
	cursor: pointer;
}
 
INPUT.button {
	border : solid 1px #cccccc;
	background: #E9ECEF;
	color : #666666;
	font-size : 11px;
	padding: 4px;
}
 
font.title_header {
	font-family: "Arial", "Helvetica", "sans-serif";
	color:#FFFFFF;
	font-size: 20pt;
}
 
font.report_title {
	font-family: "Cataneo BT", "sans-serif", "Gungsuh", "Arial";
	color: #FF9900;
	font-size: 24pt;
}
 
.div_loading {
	color: #3366FF;                 
}
 
.left {
	position: absolute;
	background-color:#F5F5F5;
}
 
#tooltip {
	position: absolute;
	left: -300px;
	width: 150px;
	border: 1px solid black;
	padding: 2px;
	background-color: lightyellow;
	visibility: hidden;
	z-index: 1000;
	/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
	filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
 
#tippointer {
	position:absolute;
	left: -300px;
	z-index: 101;
	visibility: hidden;
}
 
 
/* $Id: aqua.css 5721 2006-12-20 16:11:58Z smaxim $ */
/* Distributed with permission as part of the
   Zapatec Calendar
   Author: Mihai Bazon, www.bazon.net/mishoo
   Copyright Dynarch.com 2005, www.dynarch.com
*/
 
/* The main calendar widget.  DIV containing a table. */
 
@import url("layouts/layout-2d.css");
div.calendar { position: relative; }
 
.calendar, .calendar table {
  border: 1px solid #bdb2bf;
  font-size: 11px;
  color: #000;
  cursor: default;
  background: url("aqua/normal-bg.gif");
  font-family: "trebuchet ms",verdana,tahoma,sans-serif;
}
 
.calendar {
  border-color: #797979;
}
 
/* Header part -- contains navigation buttons and day names. */
 
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;    /* They are the navigation buttons */
  padding: 2px 2px 3px 2px;          /* Make the buttons seem like they're pressing */
  background: url("aqua/title-bg.gif") repeat-x 0 100%; 
  color: #000;
  font-weight: bold;
}
 
.calendar .nav {
  font-family: verdana,tahoma,sans-serif;
}
 
.calendar .nav div {
  background: transparent url("aqua/menuarrow.gif") no-repeat 100% 100%;
}
 
.calendar thead tr { 
  background: url("aqua/title-bg.gif") repeat-x 0 100%; 
  color: #000; 
}
 
.calendar thead .title { /* This holds the current "month, year" */
  font-weight: bold;      /* Pressing it will take you to the current date */
  text-align: center;
  padding: 2px;
  background: url("aqua/title-bg.gif") repeat-x 0 100%; 
  color: #000;
}
 
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}
 
.calendar thead .name { /* Cells <TD> containing the day names */
  border-bottom: 1px solid #797979;
  padding: 2px;
  text-align: center;
  color: #000;
}
 
.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #c44;
}
 
.calendar thead .hilite { /* How do the buttons in header appear when hover */
  background: url("aqua/hover-bg.gif");
  border-bottom: 1px solid #797979;
  padding: 2px 2px 0px 0px;
}
 
.calendar thead .active { /* Active (pressed) buttons in header */
  background: url("aqua/active-bg.gif"); 
  color: #fff;
  padding: 3px 1px 0px 0px;
  border-bottom: 1px solid #797979;
}
    /* * ****** */
.calendar thead .daynames { /* Row <TR> containing the day names */
  background: url("aqua/dark-bg.gif"); 
}
 
/* The body part -- contains all the days in month. */
 
.calendar tbody .day { /* Cells <TD> containing month days dates */
  font-family: verdana,tahoma,sans-serif;
  width: 2em;
  color: #000;
  text-align: right;
  padding: 2px 4px 2px 2px;
}
 
.calendar tbody .day.othermonth {
  font-size: 80%;
  color: #999;
}
 
.calendar tbody .day.othermonth.oweekend {
  color: #f99;
}
 
.calendar table .wn {
  padding: 2px 3px 2px 2px;
  border-right: 1px solid #797979;
  background: url("aqua/dark-bg.gif");
}
 
.calendar tbody .rowhilite td,
.calendar tbody .rowhilite td.wn {
  background: url("aqua/rowhover-bg.gif");
}
 
.calendar tbody td.today { 
  font-weight: bold;
  }
 
.calendar tbody td.hilite { /* Hovered cells <TD> */
  background: url("aqua/hover-bg.gif");
  padding: 1px 3px 1px 1px;
  border: 1px solid #bbb;
}
 
.calendar tbody td.active { /* Active (pressed) cells <TD> */
  padding: 2px 2px 0px 2px;
}
 
.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #c44;
}
 
.calendar tbody td.selected { /* Cell showing selected date */
  font-weight: bold;
  border: 1px solid #797979;
  padding: 1px 3px 1px 0px;
  background: url("aqua/active-bg.gif"); 
  color: #fff;
}
 
.calendar tbody .disabled { color: #999; }
 
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  visibility: hidden;
}
 
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  display: none;
}
 
/* The footer part -- status bar and "Close" button */
 
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
  text-align: center;
  background: #565;
  color: #fff;
}
 
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  padding: 2px;
  background: url("aqua/status-bg.gif") repeat-x 0 0; color: #000;
}
 
.calendar tfoot .hilite { /* Hover style for buttons in footer */
  background: #afa;
  border: 1px solid #084;
  color: #000;
  padding: 1px;
}
 
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  background: #7c7;
  padding: 2px 0px 0px 2px;
}
 
/* Combo boxes (menus that display months/years for direct selection) */
 
.calendar .combo {
  font-size:10px;
  background: url("aqua/normal-bg.gif"); 
  color: #000;
  border-color: #bdbcbc;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
}
 
.calendar .combo .label,
.calendar .combo .label-IEfix { 
}
 
.calendar .combo .label-IEfix {
}
 
.calendar .combo .hilite {
  background: url("aqua/hover-bg.gif"); 
  color: #000;
}
 
.calendar .combo .active {
  background: url("aqua/active-bg.gif"); 
  color: #fff;
  font-weight: bold;
}
 
.calendar td.time {
  border-top: 1px solid #797979;
  padding: 1px 0px;
  text-align: center;
  background: url("aqua/dark-bg.gif");
}
 
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
  padding: 0px 5px 0px 6px;
  font-weight: bold;
  background: url("aqua/normal-bg.gif"); 
  color: #000;
}
 
.calendar td.time .hour,
.calendar td.time .minute {
  font-family: monospace;
}
 
.calendar td.time .ampm {
  text-align: center;
}
 
.calendar td.time .colon {
  padding: 0px 2px 0px 3px;
  font-weight: bold;
}
 
.calendar td.time span.hilite {
  background: url("aqua/hover-bg.gif"); color: #000;
}
 
.calendar td.time span.active {
  background: url("aqua/active-bg.gif"); color: #fff;
}
 
.calendar .month-left-border { /* Divider line between two monthes */
  border-left:1px solid #797979 ;
}

Voici le début du code de ma page :

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
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<link href="./jsp/css/style.css" rel="stylesheet" type="text/css">
		<title>
			blue-infinity - project tracking--<%= identifiedUser.getLogin() %>
		</title>
		<script language="JavaScript" src="/include/misc.js" type="text/javascript"></script>
		<link rel="shortcut icon" href="favicon.ico" >
 
		<!-- UTF-8 is the recommended encoding for your pages -->
	    <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
 
	<!-- Loading Calendar JavaScript files -->
	    <script type="text/javascript" src="./jsp/javascript/zapatec.js"></script>
	    <script type="text/javascript" src="./jsp/javascript/calendar.js"></script>
	<!-- Loading language definition file -->
	    <script type="text/javascript" src="./jsp/javascript/calendar-fr.js"></script>

Si quelqu'un vois comment faire.

Merci d'avance

**BnA** · 09/07/2007, 10h24

Salut!

Je pense que le problème vient du href de ton lien css:

Code :

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

1
2
 
<link href="./jsp/css/style.css" rel="stylesheet" type="text/css">

Je ne vois pas ce que le point vient faire là. Si tu descends d'un niveau, c'est ".." qu'il faut.

Teste toujours avec ça!

Edit: En gros regarde si ton CSS est bien à l'endroit vers lequel tu pointe.

**jonnyboy** · 09/07/2007, 10h34

Salut,
merci de ta reponse.
Cependant je ne pense pas que le probleme vienne de la étant donné que la feuille de style est bien chargée quand j'utilise le ./ .
J'ai essayé quand même d'ajouter ../ mais la feuille de style n'est plus prise en compte.

Edit : oui oui il est bien au bon endroit

**BnA** · 09/07/2007, 10h49

Ok...

Sinon, je vois aussi ceci:

Code :

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

1
2
 
@import url("layouts/layout-2d.css");

dans ton style.css

Ce "layout-2d.css" est peut-être dans un mauvais répertoire à son tour...

Sinon, je vois pas trop ce que ça pourrait être...

**jonnyboy** · 09/07/2007, 11h00

Exact

Je n'avais pas vu ca, je vais me pencher dessus ca doit venir de la.

Merci

Edit : Yes c'est bon, j'ai récupéré cette feuille de style et une autre et maintenant tout va bien. Merci bien !!

Problème de récupération de css

CSS

Vue hybride

Discussions similaires

Partager

Partager