Dernière modification : 23-05-2009
Bonjour,
J'ai longtemps cherché pourquoi j'arrivais facilement à centrer une table complète ou un élément <div> dans mes pages pour le navigateur de Microsoft, Internet Explorer alors que cela ne fonctionnait pas dans Firefox. J'ai passé un certain nombre de soirées à tout essayer sans succès.
Pendant un certain temps, j'ai cru que c'était Firefox qui avait un bug. Mais non, c'est bien IE qui ne respecte pas les standards des CSS recommendés par le W3C. IE va accepter le centrage d'éléments de type block par une propriété normalement réservée aux élément de type inline (tel que le contenu d'un tag <p> ou <td>) et il n'appliquera simplement pas la règle de style prévu dans les CSS pour centrer des éléments alors qu'elle fonctionne dans Firefox.
Prenons cet exemple :
<body>
<div class="Centrage">Contenu de la boîte.</div>
</body>
Un élément <div> est normalement centré par rapport à la page en appliquant une règle de style telle que :
.Centrage {
margin-right: auto;
margin-left: auto;
width: 200px;
background-color: #CCE6CC;
}
Les marges droites et gauches mises sur auto est la méthode recommendée par le W3C pour centrer dans la page une boîte dont la largeur est spécifiée (ici 200 pixels). D'ailleurs, si on oubli de spécifier une largeur, cela ne fonctionne pas. Afin de voir les limites de la boîte lors de la conception de la mise en page, on peut ajouter temporairement une règle qui spécifie une couleur de fond différente de celle de la page. Ou encore, ajouter une bordure à la boîte.
Mais, cette méthode de centrage ne fonctionnera pas pour Internet Explorer (possible que ce soit réglé avec les version 7 et plus récentes). Alors, comment faire pour que notre beau design s'affiche correctement dans le navigateur le plus utilisé au monde ? Selon la situation, cela peut être aussi simple que d'ajouter une petite règle à l'élément parent vis à vis duquel notre boîte dois être centrée. Ici, le tag <body>. Donc, la règle pour le <body> sera :
body {
text-align: center;
}
Mais ceci entraîne un problème tant dans IE que dans Firefox car la propritété text-align est hérité par tout ce qui sera placé dans le tag <body>. Il faut donc que tous les éléments enfants de la page aient un style associé pour corriger l'alignement du texte (quand c'est nécessaire). Notre règle CSS .Centrage deviens donc :
.Centrage {
text-align: left;
margin-right: auto;
margin-left: auto;
width: 200px;
background-color: #CCE6CC;
}
Mais, quand on ne peut se servir du tag <body>, il sera nécessaire «d'encadrer» la boître à centrer d'un tag <div>..</div> supplémentaire qui lui aura le style text-align: center soit en tant que règle CSS supplémentaire, soit comme attribut style ajouté direct dans le tag <div> directement dans le code HTML de la page (tel que j'ai du me servir pour les boîtes de cette page). Comme ceci :
<div style="text-align: center;">
<p class="Centrage">Texte d'un paragraphe centré dans la page.</p>
</div>
Ici Firefox va ignorer l'application de la règle text-align: center à un élément <p>, <div> ou <table> car ce sont des élément de type block et cela est tout à fait le comportement attendu d'un navigateur qui respecte les standard de CSS. Sachant cela il devient facile de faire une feuille de style par défaut pour Firefox et les autres navigateurs pour ajouter ensuite une feuille de style spécifique à IE 6. La dernière mouture de IE, la #7, demandera une troisième feuille de style...
Des questions ? Vous pouvez communiquer avec moi à partir de la page Contact en cliquant sur la petite enveloppe bleue. Merci.