18085 sujets

Questions générales et questions de débutants

[SAV] Centrer les éléments ou un site web en CSS

Bonjour,

Je viens de suivre le tutoriel Centrer les éléments ou un site web en CSS (article) et j'ai voulu l'adapter à ma convenance. Seulement je n'y arrive pas, pourtant ça a l'air très simle...

Voilà ce que j'aimerais faire : le site centré dans une "fenêtre", au centre du navigateur. Il est à peu près plein écran en 1024*768, et au milieu avec du vide autour pour les réso supérieures (les inférieures ne sont pas prises en compte). Mon test : http://superjarodd.free.fr/test/test2.htm, et le code : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Centrer une boite en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {
	margin: 0;
	padding: 0;
	background: rgb(100, 100, 100);
	font-family: verdana, arial, sans-serif;
	font-size: 11px;
	color: rgb(255, 255, 255);
}

#global {
	position:absolute;
	left: 50%;
	top: 50%;
	width: 980px;
	height: 540px;
	margin-top: -490px; /* moitié de la hauteur */
	margin-left: -270px; /* moitié de la largeur */
	border: 1px solid #333;
	background-color: #eee;
	color: black;
}
</style>
</head>

<body>
<div id="global">
<p>Ici le contenu</p>
</div>
</body>

</html>


J'ai seulement changé les dimensions de Global, sinon c'est l'identique du tutoriel. Mais impossible d'obtenir la même chose avec mes dimensions... Smiley bawling

Merci pour votre aide.

Jarodd
Jarodd a écrit :


	width: 980px;
	height: 540px;
	margin-top: -490px; /* moitié de la hauteur */
	margin-left: -270px; /* moitié de la largeur */

Jarodd

Salut,

Tu t'es planté pour les valeurs des attributs margin-top et margin-left :

	margin-top: -270px; /* moitié de la hauteur */
	margin-left: -490px; /* moitié de la largeur */
Que dire... J'ai presque honte de cette erreur, je me suis fait piégé par la facilité du copier-coller sans même relire le code... Smiley confused

Merci à toi, ça marche beaucoup mieux maintenant ! Smiley biggrin
Sujet clos
Aller à