Centrer des Blocs

zitox · 15/12/2011, 13h15

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

10903513 · 15/12/2011, 14h40

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.

zitox · 15/12/2011, 14h58

Non malheureusement sa me centre que le titre de la page...

zitox · 16/12/2011, 13h50

Toujours pas de solution trouvé...
En dernier ressort puis je placer mes blocs dans un tableau pour les centrer ?

Bisûnûrs · 16/12/2011, 14h17

Tu devrais commencer par mettre un DOCTYPE valide et supprimer la déclaration XML.

15/12/2011, 14h58	#3
zitox Invité de passage Consultant communication & réseaux Inscription : décembre 2011 Messages : 6 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Consultant communication & réseaux Secteur : Communication - Médias Informations forums : Inscription : décembre 2011 Messages : 6 Points : 0 Points : 0	Non malheureusement sa me centre que le titre de la page...
	00

16/12/2011, 13h50	#4
zitox Invité de passage Consultant communication & réseaux Inscription : décembre 2011 Messages : 6 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Consultant communication & réseaux Secteur : Communication - Médias Informations forums : Inscription : décembre 2011 Messages : 6 Points : 0 Points : 0	Toujours pas de solution trouvé... En dernier ressort puis je placer mes blocs dans un tableau pour les centrer ?
	00

16/12/2011, 14h17	#5
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Tu devrais commencer par mettre un DOCTYPE valide et supprimer la déclaration XML.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email