Bonjour,
j'ai un petit soucis en CSS.
le code ci-dessous affiche un fond , un plateau et 3 rangées de cartes (p11 à p37)
je ne comprends pas pourquoi les cartes p33 à p37 ne veulent pas s'afficher...
je tente de les bouger partout à gauche, à droite, en bougeant la propriété left, il n'y a que les p31,p32 qui s'affichent.
c'est pourtant la meme ligne d'essai que sur les #21 à #27.
si quelqu'un peut m'expliquer, je suis preneur.
merci d'avance.

Code html : 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
<HTML>
<head>
 
 
<style>
 
.styleboard
{
        color:#ffffff;
        font-weight:bold;
        font-size:15px;
        padding:10px;
        float:left;
        margin:5px;
        text-align:center;
        border:1px solid #888888;
        border-radius:10px;
        z-index:2;
}
 
.styletest
{
        color:#ffffff;
        padding:1px;
        float:left;     
        margin:1px;
        text-align:center;
        border-radius:5px;
        width:80;
        z-index:3;      
 
}
 
 
#board 
{
        background: url('img/Board.png') no-repeat;     
        background-size: cover;         
        position: absolute;
        top:40px;
        left:0px;
        width:500px;
        height:650px;
        
}
 
 
#p11,#p12,#p13,#p14,#p15,#p16,#p17
{
        background: url('img/CardPlainx21.png') no-repeat;
        background-size: cover; 
        background-position:-900px;                     
        position: relative;
        top: -408px;
        left:-20px;     
        width:40px;
        height:105px;
        margin-left:32;
 
}
 
#p21,#p22,#p23,#p24,#p25,#p26,#p27
{
        background: url('img/CardPlainx21.png') no-repeat;
        background-size: cover; 
        background-position:0px;                        
        position: relative;
        top: -288px;
        left:-545px;    
        width:40px;
        height:105px;
        margin-left:32;
 
}
 
#p31,#p32,#p33,#p34,#p35,#p36,#p37
{
        background: url('img/CardPlainx21.png') no-repeat;
        background-size: cover; 
        background-position:0px;                        
        position: relative;
        top: -168px;
        left:-1070px;   
        width:40px;
        height:105px;
        margin-left:32;
 
}
 
 
 
</style>
 
</head>
 
<body>
<img src="img/background.png" />
<div id="board" class="styleboard" > </div>
<div id="p11" class="styletest" > </div>
<div id="p12" class="styletest" > </div>
<div id="p13" class="styletest" > </div>
<div id="p14" class="styletest" > </div>
<div id="p15" class="styletest" > </div>
<div id="p16" class="styletest" > </div>
<div id="p17" class="styletest" > </div>
 
<div id="p21" class="styletest" > </div>
<div id="p22" class="styletest" > </div>
<div id="p23" class="styletest" > </div>
<div id="p24" class="styletest" > </div>
<div id="p25" class="styletest" > </div>
<div id="p26" class="styletest" > </div>
<div id="p27" class="styletest" > </div>
 
<div id="p31" class="styletest" > </div>
<div id="p32" class="styletest" > </div>
<div id="p33" class="styletest" > </div>
<div id="p34" class="styletest" > </div>
<div id="p35" class="styletest" > </div>
<div id="p36" class="styletest" > </div>
<div id="p37" class="styletest" > </div>
 
</body>
</HTML>