Centrage de div imbriquées

**spectre666** · 05/01/2009, 18h28

Bonjour à tous,

J'essaye de bricoler un peu en CSS/HTML et j'ai un petit souci.
Je souhaite faire une image de fond dans un 1er div et positionner par dessus un élément de type tableau (par ex.).

Dans mon cas j'ai pensé utiliser 2 div qui s'imbrique.
La 1ère ou se situera l'image de fond.

La suivante ou se situera le tableau.

Opération plus ou moins réussite si ce n'est que j'aurais souhaité centrer les 2 éléments.

Pour le moment je n'arrive qu'a les avoir coller sur la gauche.

Voici mon code :

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
#body{
 
  margin:0;
  padding:0;
  height:100%;
  width:100%;
 
}
 
#arriere{
 
  position:absolute;
  width:1024px;
  height:100%;
 
  text-align : center;
/* Centrage de limage */
}
 
#arriere img{
 
  width : 100%;
  height: 100%;
 
  text-align : center;
}
 
#contenu {	
 
  position: absolute;
/* placement du texte par-dessus l'image */
  color: white;
  width:1024px;
  height:100%
  text-align:center;
}

Et voici le bout d'html associé (au cas ou) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div id="arriere">
	<img alt="" src="fond1.jpg">
 
	<div id="contenu">
 
		<table class="table1" border="1">
			......			
		</table>
 
	</div>
</div>
</body>

Voila en espérant que la question n'a pas déjà été posé mainte et mainte fois.

**Squizzy** · 05/01/2009, 19h46

Salut,

Pour le centrage, tu peux utiliser des marges automatiques (cours sur les tableaux).
Tu peux aussi mettre ton image directement en fond de ta div avec la propriété css "background", je trouve ça plus simple à gérer.

@++

Max

**GihefBey** · 05/01/2009, 20h59

Bonjour,

Essaye

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
text-align : center;
  }
#arriere {
position: relative;
  width: 1024px;
  height: 100%;
margin : 0 auto;
  }

-

**spectre666** · 06/01/2009, 17h27

Cas résolu j'avais effectivement mal saisit le principe de l'absolute et relative.

Souci régler merci beaucoup on peut fermer

Centrage de div imbriquées

Centrer un élément en CSS

Discussions similaires

Partager

Partager