Passage en douceur du HTML au XHTML/CSS.
Se débarrasser des Balises et attributs de balises inutiles
L'objectif de cet article est de mettre au point une méthode pour un passage progressif du langage HTML au XHTML/CSS.
Pourquoi ferions-nous cela ? Demanderons les plus impertinents d'entre vous... Je répondrai, sans entrer dans les détails, pour produire des documents valides qui s'afficheront correctement dans le plus grand nombre de support de navigation. Si vous ne vous intéressez qu'à Internet Explorer, vous pouvez quand même lire ce qui suit.
2. Supprimer le centrage par la balise <center>
Comme je suis un fan, pour ne pas dire un mordu de foot, le site auquel je m'intéresse actuellement est celui de la FIFA en raison, bien entendu, de la coupe du monde de football qui se déroule, à l'heure même où j'écris ces lignes, en Allemagne. L'URL suivante : http://fifaworldcup.yahoo.com/06/fr/ figure donc depuis peu dans mes favoris. Comme j'écris ces articles sur l'utilité de réaliser des documents valides pour le web, je n'ai pas pu m'empécher, d'abord de jeter un coup d'oeil sur le code source de FIFAwordlcup, puis de passer la page index dans la validateur du W3C. Résultat : document non-valide : il y a 125 erreurs dans la page. Rassurez-vous, je ne vais pas commenter toutes ces erreurs.
Ce qui m'intéresse c'est ceci :
<body marginheight=0 marginwidth=0 topmargin=0 bgcolor=#F1F1F1>
<center>
Vous pouvez faire un retour au précédent article de cette série pour savoir ce qu'il faut faire des attributs de la balise BODY qui génèrent tous un message d'erreur dans le validateur. Combien de documents HTML commencent de cette manière ? 80 ou 90%, à mon avis. Mais rien ne nous empêche de faire le choix de travailler proprement n'est-ce pas ? Dans ce cas, nous devons nous débarrasser de la balise <center>, juste après le body, qui, de nos jours, n'a plus lieu d'être.
La manière la plus simple de se débarasser de la balise en question.
La page dont je vous parle, se présente comme des millions d'autres, dans un cadre de 758 pixels centrée dans la fênetre du navigateur. La manière la plus simple d'obtenir ce centrage sans utiliser <center> et de remplacer cette balise par <div align="center"> et, évidemment, à la fin du document, juste avant la fermeture de body, vous femez la balise de la manière suivante </div>
Voici ce que ça donne sur une page de code :
<body>
<div align="center">
.... le reste du code
</div>
</body>
</html>
La manière la plus élégante (avec les styles CSS).
Pour centrer un cadre dans une fenêtre d'un navigateur, il suffit que la marge de ce cadre, à gauche, soit égale à sa marge à droite. Si ce cadre s'appelle "ContenuPrincipale" il suffit donc d'écrire la règle suivante en CSS.
#ContenuPrincipal{
margin:10px auto; /*marge de 10 px en haut et des marges égales entre elles à gauche et à droite, la valeur est calculée automatiquement, en fonction de la largeur du cadre*/
width:758px; /*la largeur de mon cadre */
}
Cela semble simple et ça le serait si Microsoft avait mis en place un bon navigateur. Mais Internet Explorer, interprête mal cette règle de CSS, comme il interprète mal la règle text-align. Alors nous allons jouer de finnesse avec ce navigateur. Dans le selecteur BODY, nous allons lui indiquer de centrer le texte, ce qui va lui faire centrer tous les élements du BODY, y compris notre cadre.
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
text-align: center;/* pour centrer le cadre dans IE */
margin:0px;
padding:0px;
background-color: #ffffff;
}
#ContenuPrincipal {
margin:10px auto; /* centre le cadre dans les autres navigateurs */
text-align:left;
width:758px;
}Ce code est intéressant. Pour qu'Internet Explorer centre notre cadre, on lui indique "text-align:center", mais ensuite, nous ne souhaitons pas que le texte qui s'affichera dans notre cadre soit également centré, c'est pourquoi nous rajoutons dans #ContennPrincipal, "text-align:left", ainsi le texte revient dans l'alignement à droite.
Dans le fichier HTML nous avons ceci :
<html>
<head>
<title>ma page</title>
<link href="ma_feuille de_styl.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="ContenuPrincipal">
... le contenu de mon cadre avec un tableau ou d'autres DIV
</div>
</body>
</html>
Maintenant, après les attributs de BODY, la balise FONT, vous pouvez également vous débarrasser de la balise CENTER. Certains dirons que les choses se compliquent, pour moi, elles se simplifient...
article à suivre...