Souci d'affichage de mutli div

**§Gama§** · 20/02/2013, 23h54

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>

**rodolphebrd** · 21/02/2013, 08h14

Bonjour,

Votre problème ne viendrait-il pas d'une position relative avec un left:-1070px;

**§Gama§** · 21/02/2013, 08h52

ET bien si je mets moins, je ne les cale pas au bon endroit!
si je mets -600 je n'aurais toujours que 2 affichages et pas au bon endroit!
(c'est ce que j'expliquais en parlant de bouger le left)...
donc je n'ai toujours pas de solution et je ne comprends pas pourquoi ca ne marche pas!

**Torgar** · 21/02/2013, 09h24

Salut,

t'as mis un doctype ?

**rodolphebrd** · 21/02/2013, 11h46

Je ne vois pas trop où vous voulez en venir avec ce code.

Si vous souhaitez 3 rangées superposées (ai-je bien compris?), il y a beaucoup plus simple que l'utilisation des positions relatives avec des valeurs aussi élevées.

Une image ou un lien vers un site en construction?

**§Gama§** · 21/02/2013, 19h37

oui eventuellement; envoyé en MP
j'ai besoin par contre d'utiliser la propriété background-position pour chacune des div (curseur au sein d'une image)
et le background cover pour retrécir l'image fenetrée.

Souci d'affichage de mutli div

CSS

Vue hybride

Discussions similaires

Partager

Partager