Le centrage horizontal et vertical d'un ensembleIl reste un détail à régler afin que tout soit parfait, à condition que le contenu affiché s'insère entièrement dans la fenêtre : éliminer l'ascenseur vertical que IE s'obstine à afficher alors que Mozilla l'a, et c'est normal, automatiquement éliminé : overflow:auto sera la règle nécessairement ajoutée dans la balise <BODY>. Une entorse aux recommandations du W3C, en utilisant ce que l'on nomme un attribut propriétaire, sera toutefois nécessaire pour arriver à vos fins dans la page que vous avez sous les yeux. Sans elle, Micro$oft Exploseur affichera non pas une mais deux barres de défilement verticales ! Il vous faudra ajouter un scroll="auto" dans la balise <BODY> pour obtenir un résultat parfaitement identique avec les différents navigateurs. Pour être complet, je vais ajouter quelques éléments d'information à cet exposé : je ne suis pas certain que vous auriez envisagé ce qui suit :
Les cellules qui précèdent ont été insérées dans la même structure que celle qui est décrite dans cet exposé. Vous devinerez sans doute que cela signifie qu'il vous est possible de centrer non seulement un élément (en l'occurence le contenu d'une cellule) mais également de créer une combinaison de plusieurs éléments. Pour ce faire, il vous suffira d'installer deux, trois ou plus encore, cellules dans la même table ... ou dans plusieurs tables (ici, la table3 est utilisée à 3 reprises) et de leur attribuer leurs propres règles de styles comme dit précédemment. L'ensemble ainsi créé bénéficiera du même centrage qu'un élément unique. Attention : le centrage des blocs dans la table principale ne sera respecté qu'à la condition de déclarer une DTD incomplète en HTML 4.01 Strict comme suit : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> L'absence de DTD ou l'utilisation d'une DTD HTML ou XHTML stricte complète aligneront automatiquement ces blocs sur la gauche. Voici les balises HTML et les règles de styles utilisées :
Ne vous étonnez pas si vous remarquez que certaines règles de styles peuvent être regroupées : c'est voulu ! Cela vous confirmera que chaque balise peut parfaitement intégrer ses propres règles. "Jouez" avec ce code et transformez-le à votre gré : cela vous permettra d'en trouver les innombrables variantes et de vous exercer à une utilisation pragmatique des FDS. Ne vous étonnez pas, non plus, si le tableau qui précède répète deux fois le même code : c'est également voulu. Il souligne qu'à partir du centrage créé par les tables, il est possible d'intégrer, enfin, des calques : c'est la méthode utilisée dans ce cas. Les deux calques comportant le code sont dimensionnés chacun à 50% de la largeur du tableau et installés en position relative grâce aux propriétés float:left et float:right. A vous de jouer maintenant ! |
