Discussion :

[tilou]

Re bonjour,

En repartant de mon code pour le centrage, je cherche à le redimmensionner lorsque l'utilisateur redimensionne sa fenêtre. Je veux que le site soit toujours au millieu de la page lorsque la fenêtre change de taille.. Je vous mets le code initial et le code que j'ai réussi à générer d'après un tuto mais qui ne marche pas... Si qqun aurait une idée ou une piste ce serait sympa! Merci d'avance!

Code initial :

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
 
body {
	margin: 0; 
	text-align: center;
     }
 
 
#conteneur{
	position:absolute;
	width: 800px;
	background-image: url(../image_graphique/fond_graphique.jpg);
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-position: center top;
	height: 600px;
     margin : 0;
 
}

Essai de redimmensionnement :

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
 
body {
	margin: 0; /* pour corriger le bug de centrage IE */
 
     }
 
#conteneur{
    position: absolute;
    width: 800px;        /* selon la largeur voulue */
    margin-left: -400px; /* moitie de width */
    left: 50%;  
 
	height: 600px;
	margin-top: -300px;   /* moitie de height */
    top: 50%; 
}
 
#page{
	background-image: url(../image_graphique/fond_graphique.jpg);
	background-repeat: no-repeat;
	margin: 1em;
	display: block;
	height: 600px;
	width: 800px;
}

[Kerod]

Pour que les boites se redimensionnent en fonction de la taille de la fenetre il faudrait fonctionner en %

[Hibou57]

Pour que les boites se redimensionnent en fonction de la taille de la fenetre il faudrait fonctionner en %

De mon coté sa démarche me semblerait au contraire bien partie : il/elle veut avoir un objet centré, donc pour le centrage, c'est sure qu'il/elle doit employer des %, c'est ce qu'il/elle fait d'ailleur. Mais il/elle veut aussi que son objet centré ai une taille fixée en pixel. Donc c'est bien obligé de mixer les deux. Je vais faire des essais tout de suite.

[Hibou57]

Beh, Tilou, je viens de vérifier le résultat de ton code, ça marche presque parfaitement, et il n'y a que le centrage qui n'est pas parfait. Le centrage et d'autant plus imparfait que la fenêtre est petite.

C'est à cause de la marge que tu utilise pour le div#page. Tu utilise là, une marge en em, qui n'est pas intégrée au calcul totale de la hauteur et de la largeur, que tu divise ensuite par deux pour les marges négatives du div#conteneur.

Ton div#conteneur est en position absolute, et donc il n'y a pas de margin-collapse (fusion des marges) entre l'élément page et l'élément conteneur (tu peux faire dessiner une brodure autour de chacun d'eux pour visualiser ce qu'il se passe).

Tu peux utiliser une marge, si tu penses que c'est nécessaire, mais alors il faut que tu l'intègre aux dimmensions du conteneur que tu divise ensuite par deux. Seulement, le problème c'est que les dimmensions de ta page/image sont en pixels, et les dimmensions de la marge sont en em. Tu ne peux pas additioner des pixel et des em. Il faut donc que tu utilise une marge en pixel (cas le plus pratique, mais tu peux aussi décider de donner les dimmension de l'image en em, mais c'est peu probable que tu le fasse).

Voici ton code modifié, si on considère par exemple une marge de 12 pixel.

Pour le 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
 
body  {
	margin: 0; /* pour corriger le bug de centrage IE */
}
 
#conteneur {
	height: 624px; /* 300px + 12px + 12px : en fonction de la marge de l'élément page */
	left: 50%;  
	margin-left: -412px; /* moitie de width */
	margin-top: -312px;   /* moitie de height */
	position: absolute;
	top: 50%;
	width: 824px; /* 800px + 12px + 12px : en fonction de la marge de l'élément page */
}
 
#page {
	display: block;
	background-image: url(fond.png);
	background-repeat: no-repeat;
	height: 600px;
	margin: 12px; /* Marge variable : peut être adaptée */
	width: 800px;
}

Exemple pour l'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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html">
		<meta http-equiv="Content-Style-Type" content="text/css">
		<link rel="StyleSheet" href="styles.css">
		<title></title>
	</head>
	<body>
		<div id="conteneur">
			<div id="page">
			</div>
		</div>
	</body>
</html>

Avec ça ton centrage devrait-être parfait

Dis moi si jamais il y avait quelque chose qui ne va pas ....