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.

**rodolphebrd** · 21/02/2013, 20h21

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-VID/Board.png') no-repeat; 
        background-size: cover;         
        position: absolute;
        bottom:40px;
        left:0px;
        width:532px;
        height:650px;
 
}
 
 
#p11,#p12,#p13,#p14,#p15,#p16,#p17
{
        background: url('IMG-VID/CardPlainx21.png') no-repeat;
        background-size: cover; 
        background-position:-900px;                     
        position: relative;
        top: 330px;
        left:-20px;
        width:40px;
        height:105px;
        margin-left:32px;
 
}
 
#p21,#p22,#p23,#p24,#p25,#p26,#p27
{
        background: url('IMG-VID/CardPlainx21.png') no-repeat;
        background-size: cover; 
        background-position:0px;                        
        position: relative;
        top: 335px;
        left:-20px;     
        width:40px;
        height:105px;
        margin-left:32px;
 
}
 
#p31,#p32,#p33,#p34,#p35,#p36,#p37
{
        background: url('IMG-VID/CardPlainx21.png') no-repeat;
        background-size: cover; 
        background-position:0px;                        
        position: relative;
        top: 358px;
        left:-20px;     
        width:40px;
        height:105px;
        margin-left:32px;
 
}
 
 
 
</style>
 
</head>
 
<body>
<img src="IMG-VID/background.png" />
<div id="board" class="styleboard" > 
<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>
 </div>
</body>
</HTML>

Dans un premier temps j'ai rétabli certaines valeurs et la balise #board englobe toutes les autres balises (les images avaient un comportement ératique à cause de cela)
Par la suite il faudrait songer à une disposition sous forme de trois listes qui serait bien plus propre avec l'utilisation de la propriété display:table-cell.

**§Gama§** · 21/02/2013, 22h59

Bonjour,
merci pour l'aide.
alors effectivement, le passage à 532 et la nouvelle imbrication des divs fait apparaitre les cartes absentes (ceci dit je ne vois toujours pas pourquoi elle ne sont pas visibles avant

)

Par contre elle crée un nouveau problème,

j'avais réglé à 500 pour faire tenir sur une page que je ne maitrise pas (je vais imbriquer mon code dans un studio de dev)... et donc là si je grandis mon board.png, ca me tronque le bas et l'echelle n'est plus la meme...
et si je conserve 500, les marges font que les cartes ne tiennent plus , je pense que c'est pour cela que tu as rajouté la longueur d'une marge...
je vais tenter de regarder table-cell pour comprendre ce que c'est, peut-être que la solution est là? Peux-tu m'aider un peu sur un exemple de tableau qui inclut des images?
je vais déjà tenter avec cela:

Code :

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

1
2
3
4
5
6
7
8
9
10
<style>
table.ex1
{
border-collapse:separate;
border-spacing:2px;
height:200px;
}
 
 
</style>

**rodolphebrd** · 21/02/2013, 23h33

L'idée c'est de créer 3 listes (ul li) pour les 3 groupes de cartes et d'y appliquer table-cell (ou un float selon votre aisance).

**§Gama§** · 21/02/2013, 23h38

En fait je viens de faire çà qui m'a l'air bien:

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
table.cardboardarea
{
border-collapse:separate;
border-spacing:32px;
height:105px;
}
 
#p11,#p12,#p13,#p14,#p15,#p16,#p17
{
	background: url('img/CardPlainx21.png') no-repeat;
	background-size: cover; 
	background-position:-900px;  			
	position: relative;
	width:40px;
	height:105px;
 
}
 
#p21,#p22,#p23,#p24,#p25,#p26,#p27
{
	background: url('img/CardPlainx21.png') no-repeat;
	background-size: cover; 
	background-position:0px;  			
	position: relative;
	width:40px;
	height:105px;
 
 
}
 
#p31,#p32,#p33,#p34,#p35,#p36,#p37
{
	background: url('img/CardPlainx21.png') no-repeat;
	background-size: cover; 
	background-position:0px;  			
	position: relative;
	width:40px;
	height:105px;
	}

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
<div>
<table class="cardboardarea" >
<tr>
<td><div id="p11" class="styletest" /></td>
<td><div id="p12" class="styletest" /></td>
<td><div id="p13" class="styletest" /></td>
<td><div id="p14" class="styletest" /></td>
<td><div id="p15" class="styletest" /></td>
<td><div id="p16" class="styletest" /></td>
<td><div id="p17" class="styletest" /></td>
</tr>
<tr>
<td><div id="p21" class="styletest" /></td>
<td><div id="p22" class="styletest" /></td>
<td><div id="p23" class="styletest" /></td>
<td><div id="p24" class="styletest" /></td>
<td><div id="p25" class="styletest" /></td>
<td><div id="p26" class="styletest" /></td>
<td><div id="p27" class="styletest" /></td>
 
</tr>
<tr>
<td><div id="p31" class="styletest" /></td>
<td><div id="p32" class="styletest" /></td>
<td><div id="p33" class="styletest" /></td>
<td><div id="p34" class="styletest" /></td>
<td><div id="p35" class="styletest" /></td>
<td><div id="p36" class="styletest" /></td>
<td><div id="p37" class="styletest" /></td>
 
</tr>
 
</table>

mais il reste un petit soucis: caler le top/left... apperemment les propriété n'existent pas dans table...
Et autrechose, je ne peux pas factoriser les p11 à p37? vu que c'est le même comportement?

**§Gama§** · 21/02/2013, 23h53

ayé j'ai trouvé...
je donne simplement un nom à la table!
merci pour l'orientation!

**rodolphebrd** · 21/02/2013, 23h55

Je n'ai pas suggéré de créer un tableau, ce qui en soit, est aujourd'hui très archaïque et peu souple.
C'est se priver d'outils performants.

**§Gama§** · 22/02/2013, 23h46

Exact!

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
<ul>
<li> 	<div id="p11" class="styletest" /> 
	<div id="p12" class="styletest" /> 
	<div id="p13" class="styletest" /> 
	<div id="p14" class="styletest" /> 
	<div id="p15" class="styletest" /> 
	<div id="p16" class="styletest" /> 
	<div id="p17" class="styletest" />
</li>
<li> 	<div id="p21" class="styletest" /> 
	<div id="p22" class="styletest" /> 
	<div id="p23" class="styletest" /> 
	<div id="p24" class="styletest" /> 
	<div id="p25" class="styletest" /> 
	<div id="p26" class="styletest" /> 
	<div id="p27" class="styletest" />
</li>
<li> 	<div id="p31" class="styletest" /> 
	<div id="p32" class="styletest" /> 
	<div id="p33" class="styletest" /> 
	<div id="p34" class="styletest" /> 
	<div id="p35" class="styletest" /> 
	<div id="p36" class="styletest" /> 
	<div id="p37" class="styletest" />
</li>
 
</ul

Souci d'affichage de mutli div

CSS

Discussions similaires

Partager

Partager