Gestion des DIV

Version imprimable

Gestion des DIV

Bonsoir à tous,

Je galère pour avoir un tableau de div propre.....
J'aimerais que les div aient la même largeur, soient alignés et possèdent une "margin" pour que les lignes ne se touchent pas..... :)

Rien que ça :P:P:P

Merci pour votre coup de main :ccool:
P.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
color: #000000;
width: 800px;
font: 1em black verdana, sans-serif;
font-family: arial, verdana, helvetica, tahoma, sans-serif;
font-size: 80%;
}
 
 
#global {
min-height: 100%;
padding: 0 20px;
margin: 0 auto;
}
 
.content{
position:absolute;
}
 
div[class^="sct_"]{
display:inline;
border:1px solid black;
}
 
.titlediv{
font-variant: small-caps;
}
 
 
</style>
</head>
 
<body>
 
<div id="global">
 
 
<div class="content" id="content"></div>
<br><br><br>
 
<div id="sct_title" class="titlediv">
<div class="sct_nom">Secteur</div>
<div class="sct_tp">Tps Prévu</div>
<div class="sct_tr">Tps Réalisé</div>
<div class="sct_perf">Performance</div>
</div>
 
<div class="sct" id="sct_1" data-vis="0" data-ty="sector">
<div class="sct_nom">Secteur 1</div>
<div class="sct_tp">279</div>
<div class="sct_tr">405</div>
<div class="sct_perf">68.87 %</div>
</div>
 
<div class="sct" id="sct_2" data-vis="0" data-ty="sector">
<div class="sct_nom">Secteur 2</div>
<div class="sct_tp">1018</div>
<div class="sct_tr">1692</div>
<div class="sct_perf">60.18 %</div>
</div>
 
<div class="sct" id="sct_3" data-vis="0" data-ty="sector">
<div class="sct_nom">Secteur 3</div>
<div class="sct_tp">820</div>
<div class="sct_tr">433</div>
<div class="sct_perf">189.53 %</div>
</div>
 
</div>
 
</body>
</html>

24/01/2013, 21h41
NoSmoking
Bonsoir,
passes tes DIVs en inline-block, pour pouvoir leur affecter une largeur
Code:

1 2 3 4 5 div[class^="sct_"] { border: 1px solid black; display: inline-block; width: 100px; /* par exemple */ }
nota :
c'est marrant car dans ton cas l'utilisation de TABLEs serait justifiée.
24/01/2013, 21h46
Pharmacos

Yes :ccool::ccool::ccool: Merci

Par contre je n'utilise pas les TABLES parce que je mets à jour les div via une requête AJAX :)

Et je pensais cela plus dur de gérer l'ajout de TR dans une table que de DIV dans des DIV ;)
24/01/2013, 21h50
NoSmoking

avec un peu de rigeur pas de soucis ;)
:fleche: http://javascript.developpez.com/faq...pt/?page=Table
24/01/2013, 21h52
Pharmacos

Merci pour l'info :ccool:

Bon maintenant que tout fonctionne avec des DIV on va laisser comme ça hein :mrgreen::mrgreen:

Merci encore
Bonne soirée

P.

Tant que je suis là sur ce sujet,

Si je mets une DIV en plus en dessous de content, elle apparaît au dessus. Normal, par fait de la position absolute.

Comment faire pour l'avoir en dessous ?

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
body {
margin-left: auto;
margin-right: auto;
color: #000000;
width: 800px;
font: 1em black verdana, sans-serif;
font-family: arial, verdana, helvetica, tahoma, sans-serif;
font-size: 80%;
}
 
 
#global {
min-height: 100%;
padding: 0 20px;
margin: 0 auto;
}
 
.content{
position:absolute;
}
 
div[class^="sct_"]{
display:inline;
border:1px solid black;
}
 
.divendessous{
position:absolute;	
} 
 
.titlediv{
font-variant: small-caps;
}
 
 
</style>
</head>
 
<body>
 
<div id="global">
 
 
<div class="content" id="content">
<br><br><br>
 
<div id="sct_title" class="titlediv">
<div class="sct_nom">Secteur</div>
<div class="sct_tp">Tps Prévu</div>
<div class="sct_tr">Tps Réalisé</div>
<div class="sct_perf">Performance</div>
</div>
 
<div class="sct" id="sct_1" data-vis="0" data-ty="sector">
<div class="sct_nom">Secteur 1</div>
<div class="sct_tp">279</div>
<div class="sct_tr">405</div>
<div class="sct_perf">68.87 %</div>
</div>
 
<div class="sct" id="sct_2" data-vis="0" data-ty="sector">
<div class="sct_nom">Secteur 2</div>
<div class="sct_tp">1018</div>
<div class="sct_tr">1692</div>
<div class="sct_perf">60.18 %</div>
</div>
 
<div class="sct" id="sct_3" data-vis="0" data-ty="sector">
<div class="sct_nom">Secteur 3</div>
<div class="sct_tp">820</div>
<div class="sct_tr">433</div>
<div class="sct_perf">189.53 %</div>
</div>
 </div>
 
 
<div class="divendessous">Div en dessus ? en dessous ?</div>
</div>
 
 
 
</body>
</html>

24/01/2013, 23h08
Pharmacos

J'ai enlevé le "absolute" ;)