28173 sujets

CSS et mise en forme, CSS3

Problème de centrage des DIV

Bonjour
J'ai recherché pas mal de temps sur ce superbe forum, sous google and co, mais rien a faire, je n'ai pas trouvé de solutions a mon problème, toute fois assez "commun" : Un decalage des Div sous IE. En effet, alors que je veux que mon contenu soit centré, il est totalement bourré a gauche. Smiley rolleyes

J'ai eu beau essayer des heures les ficelles que vous donniez sur ce forum, rien ni fait, d'ou votre aide qui me serait d 'un grand secours Smiley bawling . Sur ce, voici mon code de page et le CSS


body {
background-color : #575757;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
border : none;
margin : auto;
margin-top : 0;
margin-bottom : 0;
width : 800px;
background-position : center;
background-image : url(crasher/design/fond.gif);
background-repeat : repeat-y;
      }
#ensemble {
margin-left : auto;
margin-right : auto;
width : 778px;
font-family : Arial, Helvetica, sans-serif;
margin : auto;
      }
#header {
width : 760px;
background-color : white;
      }
#page {
width : 569px;
float : left;
padding : 0 10px;
margin-bottom : 0;
      }
#menu {
width : 170px;
text-align : left;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
float : right;
margin-right : 19px;
      }
#menu_haut {
background-repeat : no-repeat;
      }
#menu_liens {
background-image : url(crasher/design/menu.gif);
padding : 0 15px;
background-repeat : repeat-y;
      }
#menu_footer {
background-repeat : no-repeat;
margin-bottom : 0;
      }
#menu a {
color : #666666;
      }
a:visited {
text-decoration : none;
      }
a:hover {
text-decoration : underline;
      }
a {
text-decoration : none;
color : #666666;
      }
h1 {
font-size : 12px;
font-weight : bold;
font-family : Arial, Helvetica, sans-serif;
      }




<body style="margin-top: 0px;">

<div id="ensemble" style="padding-left: 20px; padding-right: 20px;">

<div id="header"><img src="design/pokemontrash.jpg" alt=""></div>

<!--FIN DE GENERATION DU STYLE ALTITUDINAL-->

<div id="page"><br>

<div align="center"><img src="design/barre_news.gif" alt=""></div>

<!--GENERATION DU MODULE DE GESTION DYNAMIQUE-->

<div align="center"><? $number = "5"; include("trasher/show_news.php");?></div>

<!--GENERATION DU PANNEAU DE NAVIGATION-->

<div id="menu">

<div id="menu_haut"><img src="design/menu_haut.gif" alt=""></div>

<div id="menu_liens"><? include('menu.php'); ?></div>

<div id="menu_footer"><img src="design/menu_bas.gif" alt=""></div>

</div>
</div>


Je vous remercie d'avance pour vos réponses Smiley biggrin
Modifié par Cardon (01 Jul 2006 - 03:04)
Bonjour Cardon,

As-tu suivi le tutoriel Centrer les éléments ou un site web en CSS sur Alsacréations ?

La technique des marges automatiques, du moment que le bloc à center a une largeur fixe, devrait fonctionner sans mal avec la plupart des navigateurs, dont Internet Explorer 6. Pour les versions antérieures à IE6 (du moins si tu t'en préoccupes), il y a une petite combine pas très compliquée. Je te laisse voir le tutoriel sur ce point.
Bonjour Cardon et bienvenue sur ce forum,

Pourrais-tu choisir un titre plus pertinent à ce sujet ? « Problème sous IE » pourrait être celui de la majorité des sujets de ce salon et avoue que ça ne serait pas très pratique Smiley ohwell . Précise par exemple que ça concerne le centrage (il suffit d'éditer le premier message). Merci d'avance. Smiley smile

Le centrage par « margin auto » ne fonctionne que si IE 6 travaille en mode standard.
Pour que le document soit interprété en mode standard par IE 6, il faut un Doctype et que rien ne soit avant ce Doctype (pas de prologue ou commentaire par exemple.)
Modifié par Alan (30 Jun 2006 - 23:41)
Merci beaucoup pour vos réponses !
En effet, le problème était celui du doctype, j'ai mis celui du XHTML strict et Ô magie, la mecanique marche a la perfection. Maintenant, au boulot, car autant ma précedente doctype donnait un resultat valide, autant le "strict" est bien nommé Smiley cligne
En fait tous les Doctypes peuvent faire passer IE en mode standard, sauf celui ci : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Peut-être était-ce celui que tu utilisais ? Dans ce cas il suffit d'y ajouter une URL :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">


Si le problème est résolu, n'oublie pas d'éditer à nouveau le titre du sujet pour y ajouter un petit [résolu] Smiley cligne
Modifié par Alan (01 Jul 2006 - 08:45)
Sujet clos
Aller à