erreur d'analyse de la valeur 'left' et 'right'
Bonsoir,
J'ai suivi un tuto (tres bon tuto) sauf que j'ai un soucis : erreur d'analyse de la valeur "left". Declaration abandonnée
voila mes pages (pages de testes):
index :
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" media="screen" type="text/css" href="design.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="centre">
<div class="slide">
<?php for ($i=0; $i<15; $i++){?>
<a href="#">
<img src="fond.jpg">
</a>
<?php }?>
</div>
<div class="prec">div>
<div class="suiv">div>
</div>
</body>
</html> |
css :
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
|
@CHARSET "ISO-8859-1";
BODY, DIV, FORM, FIELDSET { margin: 0; padding: 0; }
#centre {
position:relative;
width: 800px;
overflow: hidden;
}
.prec {
position:absolute;
top: 0;
left:0;
height: 300px;
width: 60px;
background: url(precedent0.png) no-repeat center left;
}
.suiv {
position:absolute;
top: 0;
right:0;
height: 300px;
width: 60px;
background: url(suivant0.png) no-repeat center right;
}
.slide {
width: 10000px;
}
.slide a{
display:block;
float: left;
padding: 0 20px;
}
.slide a img{
padding: 20px;
} |
javascript :
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
|
$(document).ready(function() {
$(".suiv").mouseover(function () {
$(".suiv").css({background: 'url(suivant.png) no-repeat center right'});
});
$(".suiv").mouseout(function () {
$(".suiv").css({background: 'url(suivant0.png) no-repeat center right'});
});
$(".prec").mouseover(function () {
$(".prec").css({background: 'url(precedent.png) no-repeat center right'});
});
$(".prec").mouseout(function () {
$(".prec").css({background: 'url(precedent0.png) no-repeat center right'});
});
$(".suiv").mousedown(function () {
$(".suiv").css({background: 'url(suivant1.png) no-repeat center right'});
});
$(".suiv").mouseup(function () {
$(".suiv").css({background: 'url(suivant.png) no-repeat center right'});
});
$(".prec").mousedown(function () {
$(".prec").css({background: 'url(precedent1.png) no-repeat center right'});
});
$(".prec").mouseup(function () {
$(".prec").css({background: 'url(precedent.png) no-repeat center right'});
});
});
$(document).ready(function() {
s = new slider("#centre");
});
var slider = function(id){
var self = this;
this.div = $(id);
this.slider = this.div.find(".slide")
this.largeurCache = this.div.width();
this.largeur = 0
this.div.find('a').each(function() {
self.largeur += $(this).width();
self.largeur += parseInt($(this).css("padding-left"));
self.largeur += parseInt($(this).css("padding-right"));
self.largeur += parseInt($(this).css("margin-left"));
self.largeur += parseInt($(this).css("margin-right"));
});
this.prec = this.div.find(".prec");
this.suiv = this.div.find(".suiv");
this.slid = this.largeurCache/2;
this.nbSlid = Math.ceil(this.largeur/this.slid);
this.current = 0;
this.suiv.click(function() {
self.current++;
self.slider.animate({
'left' : -self.current*this.slid
},1000);
});
this.prec.click(function() {
self.current++;
self.slider.animate({
'right' : -self.current*this.slid
},1000);
//alert(this.nbSlid);
}; |
J'ai deja posé la question sur le tuto mais vu la date de la derniere question qui remonte a 2mois et a laquelle il n'y a pas eu de reponse ...
Je vous remercie d'avance pour votre aide !
Ps : si vous pouriez me conseiller un logiciel de developpement web (je me sers de notepad++ ainsi que eclipse PHP).
