Problème pour centrer une série de float

**Paenitentia** · 17/02/2010, 16h49

Bonjour à tous, je dois réaliser un projet de site internet dans le cadre de mes études. Je me retrouve confronté à un problème pour centrer trois articles mis au même niveau à l'aide de l'attribut float:left. Voyez plutôt, le fond est en partie noir de manière volontaire (background-color: black) pour bien voir le décalage.

Voici mon code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>EA Support</title>
        <link rel="stylesheet" type="text/css" href="design1.css">
	</head>
 
	<body>
    	<?php include("/includes/en_tete.php"); ?>
        <?php include("/includes/navigation.php"); ?>
        <div id="corps">
          <!--  <h1>
            	Produits
                <hr />
            </h1>-->
       		<p class="article">
       			<img alt="Papier A4" src="images/papier.jpg" /><br />
               	<span class="titre_article">Papier A4</span><br />
               	<span class="descriptif_article">Une fantastique ramette de papier qui comblera tous les tueurs d'arbres en série.</span>
           	</p>
           	<p class="article">
               	<img alt="Compact Disc" src="images/cd.jpg" /><br />
               	<span class="titre_article">CDs</span><br />
               	<span class="descriptif_article">Pour tous les jeunes qui piratent de la musique.</span>
           	</p>
           	<p class="article">
               	<img alt="Digital Versatile Disc" src="images/dvd.jpg" /><br />
               	<span class="titre_article">DVDs</span><br />
               	<span class="descriptif_article">Pour tous les jeunes qui piratent des films (pas bien).</span>
            </p>
        </div>
        <?php include("/includes/pied.php"); ?>
	</body>
</html>

et mon css :

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
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
125
126
127
128
129
130
131
132
133
134
*
{
	margin: 0;
	padding: 0;
}
 
a
{
	text-decoration: none;
}
 
a:hover, a:focus
{
	background:#9DAAE2;
}
 
hr
{
	height: .1em;
	background-color: #1C29A7;
}
 
html
{
	min-height: 100%;
	max-width: 1000px;
	min-width: 600px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-family: Calibri, Gulim, Georgia, Arial;
}
 
h1
{
	margin-left: 15%;
	max-width: 1000px;
	color: #485DC5;
}
 
p
{
	color: #485DC5;
	text-align: center;
	background-color:#000;
}
 
.article
{
	width: 30%;
	float: left;
	margin-left: auto;
	margin-right: auto;
}
 
.article img
{
	text-align: center;
}
 
.descriptif_article
{
	font-size: 1em;
}
 
.sous_titre
{
	font-size: 1.1em;
	text-align: right;
	margin-bottom: 50px;
	color: #485DC5;
}
 
.titre_article
{
	font-weight: bold;
	font-size: 1.2em;
}
 
.titre_register
{
	text-align: left;
	background-color: #1C29A7;
	color: white;
	padding: 2px;
	font-weight: bold;
	margin-right: 25%;
}
 
#corps
{
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	min-width: 600px;
	width: 100%;
}
 
#en_tete
{
	height: 129px;
	width: 350px;
	background: url("images/header.png");
	background-repeat: no-repeat;
}
 
 
#navigation
{
	background-color: #1C29A7;
	text-align: right;
	color: white;
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 50px;
	font-family:  Gulim, Georgia, Arial;
}
 
#navigation a
{
	color: white;
}
 
#navigation ul
{
	text-align: right;
}
 
#navigation li
{
	display: inline;
	list-style: none;
	margin: 10px;
}

Je n'arrive pas vraiment à voir d'où vient le problème. Je trouve bizarre cette absence de centrage puisque mon #corps contient margin-left et margin-right pour positionner normalement au centre.

Si quelqu'un pouvait m'aider, je lui en serait très reconnaissant.

Merci d'avance.

**Erwan31** · 17/02/2010, 17h40

Bonjour,
si tes 3 bloc ont une largeur fixe, tu peux les centrer simplement en les imbriquant dans une div dont la largeur est égale à celle des 3 blocs additionnés
et à laquelle tu ajoutes des marges latérales auto.
Si ces 3 blocs sont de largeur variable, je t'indiquerai une méthode assez peu connue et plus compliquée si tu ne souhaites pas utiliser un tableau de mise en forme.

EDIT
Attention à bien fournir la totalité du code interprété et non sous forme d'include PHP.

**Paenitentia** · 17/02/2010, 18h03

Merci beaucoup pour ta réponse. Mes trois blocs ont bien une largeur variable, comme le reste de ma page. Leur largeur est de 30% de la largeur de la page (qui varie de 600 à 1000 pixels en fonction de la résolution de l'utilisateur).

Je suis intéressé pour connaître ta méthode qui n'est pas en tableau.

**Erwan31** · 17/02/2010, 19h29

le wrapper étant le conteneur et content (qui englobe ici les 3 flottant) le contenu à centrer >

Code :

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

1
2
3
4
5
6
7
8
9
10
 #wrapper {
float:left;
left:50%;
position:relative;
}
#content {
position:relative;
right:50%;
overflow:hidden; /* pour englober les enfants flottant*/
}

**Paenitentia** · 18/02/2010, 12h34

Salut,

Merci, les articles se centrent correctement au milieu de la page. Par contre, ils sont l'un à la suite des autres verticalement alors que je souhaiterais les avoir sur la même ligne.

J'ai essayé de rajouter un float: left; en plus sur le conteneur, les articles se retrouvent sur la même ligne mais ils se retrouvent tous alignés sur la gauche par la même occasion. :-(

Voici le rendu avec ce que tu m'as proposé :

Édition :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.article
{
	overflow: hidden;
	position: relative;
	right: 50%;
}
 
.conteneur
{
	float: left;
	left: 50%;
	position: relative;
}

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
            <div class="conteneur">
       		<p class="article">
       			<img alt="Papier A4" src="images/papier.jpg" /><br />
               	<span class="titre_article">Papier A4</span><br />
               	<span class="descriptif_article">Une fantastique ramette de papier qui comblera tous les tueurs d'arbres en série.</span>
           	</p>
           	<p class="article">
               	<img alt="Compact Disc" src="images/cd.jpg" /><br />
               	<span class="titre_article">CDs</span><br />
               	<span class="descriptif_article">Pour tous les jeunes qui piratent de la musique.</span>
           	</p>
           	<p class="article">
               	<img alt="Digital Versatile Disc" src="images/dvd.jpg" /><br />
               	<span class="titre_article">DVDs</span><br />
               	<span class="descriptif_article">Pour tous les jeunes qui piratent des films (pas bien).</span>
            </p>
            </div>