Dreamweaver 8 : centrer un calque en CSS

I. Introduction à centrer un calque CSS

Ce tutorial vient en complément des deux précédents sur la mise en forme CSS d’un site à l’aide de Dreamweaver :

Dreamweaver 8 : mise en forme CSS d’un site (1/2)

Dreamweaver 8 : mise en forme CSS d’un site (2/2)

Bien que conseillée, leur lecture préalable n’est pas indispensable si vous connaissez les bases de la mise en page des calques avec CSS.

La raison d’être de ce tutorial complémentaire, un peu à retardement par rapport aux parties 1 et 2, et que nombre de webmasters en herbe rencontrent des problèmes lorsqu’ils veulent centrer correctement leur page afin de s’adapter à la résolution écran du client. Cet aspect n’était pas abordé dans le tutorial initial. Cette troisième partie vient combler ce manque 😉 .

II. Explications

1. Centrer un calque simple

Je pars du principe que vous avez suivi les étapes 1 et 2 du tutorial. Vous vous retrouvez ainsi avec un site dont la page d’acceuil est la suivante :

Page accueil initiale

La résolution de l’écran est supérieure à la largeur de la page de sorte que la page alignée sur la gauche laisse une marge noire sur la droite. Nous allons donc en modifier quelques propriétés afin de centrer ses différents éléments quelle que soit la résolution du client.

Nous allons commencer par le logo qui est un calque simple contenant uniquement une image. Dans la fenêtre calques sélectionnez le calque Logo. Dans la fenêtre création le calque est entouré par un cadre jaune marquant ainsi qu’il est sélectionné (cette phase n’est pas obligatoire, elle a pour unique but de vous montrer le calque sur lequel nous entamons le travail) :

Sélection calque Logo

Dans l’onglet Styles CSS double cliquez sur le style #Logo pour ouvrir sa fenêtre de propriétés :

Sélection style logo

Dans le champ Catégorie cliquez sur Boîte. Décochez Idem pour tous dans la rubrique Marge afin de pouvoir paramétrer uniquement les marges gauche et droite. Fixez les valeurs de Marge Droite et Marge Gauche à Auto :

Paramètres Boite

Sélectionnez ensuite la catégorie Positionnement. Changez le Type à Fixe et modifiez le champ Emplacement Gauche en tapant 0 :

Paramètres Positionnement

Validez en cliquant sur OK.

Dans la fenêtre de création cliquez sur le bouton Code et cherchez le style CSS #Logo pour observer les modifications que nous venons d’apporter :

Code style Logo

Double cliquez sur le style #Pied_De_Page et répétez l’opération décrite pour le style #Logo.

Enregistrez votre travail et lancez un aperçu dans votre navigateur en cliquant sur le bouton Aperçu :

Bouton aperçu

Comme vous pouvez le voir le logo et le pied de page sont centrés alors que la partie centrale, non encore modifiée, est toujours décalée vers la gauche. Le pied de page est venu se coller sous le logo mais ce n’est pas important. Il reprendra sa position correcte dès lors que toutes les modifications nécéssaires auront été apportées à la page :

Aperçu Navigateur

2. Centrer un calque contenant des calques

Si vous avez suivi les deux premiers tutoriaux vous devez vous souvenir que la partie située entre le logo et le pied de page est composée d’un calque nommé Centre contenant deux calques (Navigation et Contenu). Pour centrer correctement ce groupe de calques procédez ainsi :

Commencez par paramétrer le style #Centre comme indiqué ci-dessous :

Dans la catégorie Boîte : décochez Idem pour tous, fixez Marge Gauche et Marge Droite à Auto :

Style Centre

Dans la catégorie Positionnement : établissez le Type à Relatif, l’emplacement Haut et l’emplacement Gauche à 0 :

Réglage Positionnement

Validez en cliquant sur OK.

Double cliquez ensuite sur le style #Navigation et vérifiez que les propriétés Type et Emplacement sont renseignées comme ci-dessous :

Style Navigation contrôle

Contrôlez de même le style #Contenu :

Style Contenu contrôle

Si nécessaire validez vos modifications et enregistrez votre travail. Lancez ensuite un aperçu dans votre navigateur :

Aperçu final

Cette fois-ci tous les calques de la page sont centrés, ce qui donne une meilleure présentation à notre site quelle que soit la résolution écran du client.

III. Conclusion du tutorial

Notez qu’au lieu de centrer les calques un par un, nous aurions pu aussi les placer dès le départ dans un calque conteneur. Le simple fait de centrer ce calque conteneur aurait donc centré la totalité des calques.

Voilà qui nous mène à la fin de ce tutorial qui, j’espère, sera utile pour nombre d’entre ceux qui n’ont pu jusqu’ici trouver une réponse satisfaisante à ce problème. Si vous avez un commentaire à faire ou si vous connaissez une façon de procéder différente, voire meilleure, n’hésitez pas à en faire profiter tout le monde en postant votre avis sur le forum.

Merci de votre attention.

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*