28172 sujets

CSS et mise en forme, CSS3

Centrer une div qui contient d'autres div sous IE [RÉSOLU]

Bonjour à tous, je sais que ça ressemble à question déjà résolu, mais ce n'est pas le cas. Après avoir essayé plusieurs méthodes et me retrouver avec le même problème, je vous soumet mon cas :

Je veux centrer un div verticalement et horizontalement pour que le site soit centrer pour les résolutions supérieures à 1024x768, mon code fonctionne pour Firefox et Opéra, mais pas avec IE (des fois, je déteste microsoft...) Smiley fache , je suis junior dans le css, alors peut-être que je loupe un truc, je demande aus cerveaux de ce monde de m'aider svp!

Voici mon code et je joins un schéma de mon site :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Avant-Garde Esthétique</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
<!--

body {
  text-align: center;
	margin: 0 auto;
	padding: 0;
	background-color: #FFFFFF;
}

#container {
	position:absolute;
	text-align: left;
	left: 50%;
	top: 50%;
	width: 1024px;
	height: 768px;
	margin-top: -384px; /* moitié de la hauteur ou selon ce qui est coupé */
	margin-left: -512px; /* moitié de la largeur */
}

-->
</style>

</head>



<body>

<div id="container">
  <div id="rightBlankNavBar" style="position: absolute; left: 575px; top: 185px; width: 190px; height: 59px;"></div>
  <div id="leftBlankNavBar" style="position: absolute; left: 310px; top: 185px; width: 141px; height: 59px;"></div>
  <div id="titleChoix" style="position: absolute; left: 48px; top: 185px; width: 262px; height: 59px;"></div>
  <div id="btnContact" style="position: absolute; left: 765px; top: 185px; width: 214px; height: 59px; z-index: 1;"></div>
  <div id="btnAccueil" style="position: absolute; left: 451px; top: 185px; width: 124px; height: 59px; z-index: 2"></div>
  <div id="hdBan" style="position: absolute; left: 48px; top: 0px; width: 931px; height: 185px;"></div>
  <div id="leftSide" style="position: absolute; left: 0px; top: 0px; width: 48px; height: 768px;"></div>
  <div id="btnVisage" style="position: absolute; left: 48px; top: 244px; width: 213px; height: 84px; z-index: 3"></div>
  <div id="btnCorps" style="position: absolute; left: 48px; top: 328px; width: 213px; height: 69px; z-index: 4"></div>
  <div id="btnEpil" style="position: absolute; left: 48px; top: 397px; width: 213px; height: 69px; z-index: 5"></div>
  <div id="btnAutres" style="position: absolute; left: 48px; top: 466px; width: 213px; height: 84px; z-index: 6"></div>
  <div id="downLeftProdCie" style="position: absolute; left: 48px; top: 550px; width: 213px; height: 218px"></div>
  <div id="mainContent" style="position: absolute; left: 261px; top: 244px; width: 504px; height: 524px"></div>
  <div id="rightContent" style="position: absolute; left: 765px; top: 244px; width: 214px; height: 306px"></div>
  <div id="downRight" style="position: absolute; left: 765px; top: 550px; width: 214px; height: 218px"></div>
  <div id="rightSide" style="position: absolute; left: 979px; top: 0px; width: 45px; height: 768px"></div>
</div>

</body>
</html>


upload/20584-schemasite.jpg
Modifié par Psycho (27 Mar 2009 - 19:14)
Salut,

Je suppose que tu ne rencontres le problème que sur IE6.
Chose étonnante, il n'interprète pas le margin-left. Chose encore plus étonnante, si tu enlèves le commentaire CSS derrière le margin-top ça fonctionne.
Je crois que j'ai IE 7 et non ça ne fonctionne pas plus si j'enlève les commentaires après margin-top, d'ailleurs pourquoi ça changerais quelque chose. Je me demandais si il y a un code que je pourrais écrire seulement pour IE, je n'aurais ensuite qu'à appliquer ce code selon la détection de IE avec le javascript?
Bon, j'ai mis à jour I.E. pour la version 8.0, et en effet ça fonctionne, donc je devais avoir 6.0. comme m'a dit Agylus, j'utilise rarement I.E..., merci pour l'idée des commentaires conditionnels, je me demandais justement ce que c'était comme code "if IE". Je vais laisser comme ça et peut-être inscrire une note pour le "bug" de I.E 6, je rêve du jour ou la majorité des utilisateurs seront sous Firefox Smiley cligne

Merci pour m'avoir éclairé Agylus
Modifié par Psycho (27 Mar 2009 - 19:13)
Sujet clos
Aller à