Centrer des Blocs

**zitox** · 15/12/2011, 14h15

Bonjour,
Je travail actuellement sur la refonte d'une page Intranet de mon groupe. Ce site fonctionne sur le principe de e-monsite, ce sont des champs à remplir pour faire des pages.
J'ai pour mission de créer des blocs sur une pages qui permettra aux utilisateurs de télécharger des documents. Chaque bloc représentera une division de l'entreprise (RH, COM, ect...)
Mon problème est simple, j'ai réussi à créer les blocs au format que je voulait mais je n'arrive pas à les centrer au milieu de la page. Sur chaque ligne est présent deux blocs.
Je vous met mon code :

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
<?xml version="1.0" encoding="UTF-8"?>
 
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 
 
  <title>ex1 - Blocs à bords arrondis (rounded block) - biboo.net</title>
<style type="text/css">
/*<![CDATA[*/
<!--
* {margin: 0;padding: 0;}
 
body {
    background-color: #99CCCC;
    color: #636363;
    text-align:center;
}
 
.box {
    background:  url("box1.gif") no-repeat center top;
    padding-top: 35px;
    width: 200px;
    float: left;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align:left;
}
{
overflow: hidden;
}
 
.content-box {
    background:  url("content-box1.gif") center bottom no-repeat;
    padding-bottom: 30px;
}
 
.content-box P{
    margin: 0 30px 0 30px;
}
 
-->
/*]]>*/
</style>
 </head>
 
 <body>
  <div class="box">
   <div class="content-box">
    <p><b><center>COM</center></b></p>
<br> </br>
<p><ul><li>Infos Poste</li> 
<li>JourPost</li>
<li>ETC</li></ul>
<br> </br>
 </p>
   </div>
  </div>
 
    <div class="box">
   <div class="content-box">
    <p><b><center>RH</center></b></p>
<br> </br>
<p><ul><li>RAP / REP / RPP</li> 
<li>Remboursement trajets Postiers</li>
<li>Bourse d'emplois</li>
<li>Infos sociales</li></ul>
 </p>
   </div>
  </div>
 
<div class="box">
   <div class="content-box">
    <p><b><center>DDI</center></b></p>
<br> </br>
<p><ul><li>Indicateurs de tri départ</li> 
</ul>
<br> </br>
 </p>
   </div>
  </div>
 
<div class="box">
   <div class="content-box">
    <p><b><center>DRQ</center></b></p>
<br> </br>
<p><ul><li>Charte qualité</li> 
<li>JourPost</li>
<li>ETC</li></ul>
<br> </br>
 </p>
   </div>
  </div>
 
 
 
 </body>
</html>

J'ai essayé de multiples conseils trouvés sur des forum mais aucun n'a fonctionné. A savoir aussi que la plupart des postes de l'entreprise possèdent des version d'IE inférieurs à 6.
Quelqu'un serait il en mesure de me corriger ce code afin que mes blocs soient centrés deux par deux au milieu de la page ?
Merci par avance

**Vercetti** · 15/12/2011, 15h40

Essais de changer les valeur de margin-left et margin-right en mettant des valeurs en % :

Code :

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

1
2
3
4
5
6
7
8
9
10
.box {
background: url("box1.gif") no-repeat center top;
padding-top: 35px;
width: 200px;
float: left;
height: 150px;
margin-left: 20%;
margin-right: 20%;
text-align:left;
}

la valeur est à adapter selon l'aspect que tu veut donner à la page, mais ça devrait les centrer.