Gestion des DIV

**Pharmacos** · 24/01/2013, 20h35

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

Merci pour votre coup de main

P.

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
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>

**NoSmoking** · 24/01/2013, 21h41

Bonsoir,
passes tes DIVs en inline-block, pour pouvoir leur affecter une largeur

Code :

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

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.

**Pharmacos** · 24/01/2013, 21h46

Yes

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

**NoSmoking** · 24/01/2013, 21h50

avec un peu de rigeur pas de soucis

http://javascript.developpez.com/faq...pt/?page=Table

**Pharmacos** · 24/01/2013, 21h52

Merci pour l'info

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

Merci encore
Bonne soirée

P.

**Pharmacos** · 24/01/2013, 21h59

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 :

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
<!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>

Gestion des DIV

CSS

Vue hybride

Discussions similaires

Partager

Partager