Centrer une page dont les éléments sont positionnés en absolu

Rodrigue · 11/11/2011, 07h36

Bonjour,

Je souhaiterais créer un site très simple: il est composé de 3 images (c'est pour un test). Je connais de manière absolue la position de chaque image dans la page. Pour l'instant tout fonctionne très bien si ce n'est que je n'arrive pas à trouver comment (où à appliquer ce que je lis sur le net) pour centrer cette mise-en-page absolue?

Voici des bouts de code source:

Code :

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

1
2
3
4
5
6
7
8
<body>
<div id="page">
	<div id="imagegauche"></div>
 
	<div id="imagehautdroit"></div>
	<div id="imagebasdroit"></div>
</div>
</body>

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
 
	body	{ 
background-color: rgb(207,38,47);
//background-color: rgb(96,24,28);
 
);}
 
 
 
 
#page {
        width: 100%;
	height:100%;		
        margin-left: auto;
        margin-right: auto;
        }
 
 
#imagegauche	
{ 
	position:absolute; 
	width:438px; 
	height:607px; 
	left:35px; 
	top:10px; 
	//text-indent:-3000px; 
	background:url(imagegauche.png) 0 0 no-repeat; 
 
}
 
#imagehautdroit	
{ 
	position:absolute; 
	width:482px; 
	height:422px; 
 
	//position:absolute; 
	left:514px; 
	top:15px; 
	//text-indent:-3000px; 
	background:url(imagehautdroit.png) 0 0 no-repeat; 
 
}
 
#imagebasdroit	
{ 
	position:absolute; 
	width:483px; 
	height:181px; 	
	left:497px; 
	top:475px; 
	//text-indent:-3000px; 
	background:url(imagebasdroit.png) 0 0 no-repeat; 
}

J'essaye via #page de faire en sorte que ma page se centre automatiquement tout en conservant mes positions absolues. Il faudrait que ces positions absolues soient prises par rapport au (0,0) d'un bloc div qui lui est centré sur la page...

Merci

milarepa · 11/11/2011, 08h58

Bonjour,
Je ne suis pas un expert mais si ton div #page a une largeur de 100% c'est sûr que l'origine restera en haut à gauche de ta fenetre et donc les positions absolues se feront toujours à partir de là.
Je ne suis pas parfaitement sur d'avoir compris ce que tu souhaitais faire, voici un petit bout de code, cela se rapproche de ton intention?
A plus

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
 
<html>
<head>
<style type="text/css">
#page {
	width:80%;
	height:100%;		
	margin-left: auto;
	margin-right: auto;
	background-color:green;
	position:relative;
}
 
 
#imagegauche	
{ 
	position:absolute; 
	width:438px; 
	height:607px; 
	left:35px; 
	top:10px; 
	background-color:blue;
 
}
 
#imagehautdroit	
{ 
	position:absolute; 
	width:482px; 
	height:422px; 
	left:514px; 
	top:15px; 
	background-color:yellow; 
 
}
 
#imagebasdroit	
{ 
	position:absolute; 
	width:483px; 
	height:181px; 	
	left:497px; 
	top:475px;  
	background-color:red; 
}
</style>
</head>
 
<body>
<div id="page">
	<div id="imagegauche"></div>
 	<div id="imagehautdroit"></div>
	<div id="imagebasdroit"></div>
</div>
 
</html>

NoSmoking · 11/11/2011, 09h48

Bonjour,
quelques précisions en complément

Les commentaires en CSS se font de la façon suivante

Code :

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

1
2
3
4
5
balise{
/* commentaires */
background-color : #e0e0e0;
// commentaires non pris en compte, ne marche pas et fait foirer ce qui suit
}

Les éléments sont positionnés par rapport au premier élément parent positionné.

Il est souvent intéréssant de placer en tête de CSS

Code :

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

1
2
3
4
5
body {
  width : 100%;
  margin : 0;
  padding : 0;
}

afin d'avoir un rendu identique sur les différents navigateurs pour lesquels les valeurs par défauts ne sont pas forcément les mêmes

Pour centrer horizontalement un élément sur la page il faut qu'il possède une largeur avec un margin:auto.

Code :

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

1
2
3
4
5
#page{
  position : relative;
  width : 1000px;
  margin : auto;
}

Rodrigue · 12/11/2011, 07h50

Un tout grand merci, ça solutionne mon problème!

Et pour le centrer verticalement, suffit-il que j'ajoute une hauteur height en pixel?

NoSmoking · 12/11/2011, 22h54

Citation:

Envoyé par Rodrigue

Et pour le centrer verticalement, suffit-il que j'ajoute une hauteur height en pixel?

à voir la réponse faite sur http://www.developpez.net/forums/d11...l/#post6340845

12/11/2011, 07h50	#4
Rodrigue Membre habitué Inscription : août 2002 Messages : 476 Détails du profil Informations forums : Inscription : août 2002 Messages : 476 Points : 112 Points : 112	Un tout grand merci, ça solutionne mon problème! Et pour le centrer verticalement, suffit-il que j'ajoute une hauteur height en pixel? __________________ Rodrigue
	00

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