logo_gauche Bric à Brac informatique  logo_Droite

Comment centrer une page avec BlueGriffon 2


Les moniteurs de PC sont de plus en plus grands (19, 20, 21 pouces et plus).

Par défaut une page web est affichée alignée à gauche.

Votre souhait est que le contenu de votre page html  s'affiche centrée sur la page, dans tous les navigateurs.

Pour obtenir ce résultat il est nécessaire d'imposer au conteneur principal de la page c'est à dire <body>   </body>  une valeur 0 aux marges haut et bas et une valeur automatique aux marges gauche et droite

Ce formatage peut être obtenu dans BlueGriffon

- par l'intermédiaire du panneau Styles CSS
ou
- en tapant directement le code dans le  Code Source.

A. Utilisation du Panneau CSS.

Vous avez le choix entre deux méthodes : Appliquer les styles :

Mode opératoire

A.1. Appliquer les styles à tous les éléments de même type (1).

RAPPEL : dans ce cas, la feuille de style, (si elle existe) est modifiée avec les propriétés spécifiées. Sinon une feuille de style interne va être créée.

  1. Cliquer sur l'élément <body>  dans la barre de structure pour le sélectionner

  2. Sélectionner Styles CSS dans la commande : Panneaux, Styles CSS pour afficher le panneau Styles CSS qui s'affiche à droite de la fenêtre.







    Remarque importante : si le Panneau Styles CSS ne s'affiche pas après avoir sélectionné la commande Styles CSS, c'est qu'il est masqué.
    Pour l'afficher cliquer sur la petite barre verticale en pontillés et encadrée de deux têtes de flèches dirigées vers la droite, affichée au milieu du côté droit de la fenêtre.

  3. Appliquer les styles à : est en tête du panneau affiché.
    Activer la liste déroulante à droite de Uniquement cet élément via son ID. Sélectionner tous les éléments de même type (1).
    L'élément sélectionné <body> (comme demandé en 1)   s'affiche dans l'encadré situé à droite.

  4. Le panneau Styles CSS possède 17 sections. Nous nous intéressons à la 4ème section Géométrie. Cliquer sur la tête de flèche pour afficher la liste déroulante correspondante.





  5. Tout en bas du volet Géométrie, décocher Marges identiques

  6. Donner la valeur 0px pour la marge Haut (A) et la marge Bas : (B)

  7. Activer la liste déroulante et sélectionner Automatique pour la marge Gauche (C) et la marge Droite (D)

  8. Si vous souhaitez que votre page soit limitée en largeur : (900px par exemple), entrer cette valeur en (E).













Dans la page Web de BlueGriffon, appuyer sur l'onglet Code source.

Si votre document n'est pas lié à une feuille de styles externe vous pouvez constater que BlueGriffon a créé des valeurs pour chaque marge de l'élément  <body>. Cela se présente ainsi dans la partie <head>   </head> si vous avez opté pour une largeur de 900px :

<style type="text/css">

body { 
  margin-top: 0px; 
  margin-right: auto; 
  margin-bottom: 0px; 
  margin-left: auto; 
  width: 900px;
}

</style>

Si votre document est lié à une feuille de styles externe les valeurs des "margin"s sont enregistrés directement dans la feuille de styles externe ainsi que la valeur de la largeur demandée. Ce qui signifie que tous les documents liés à cette même feuille de styles auront tous la même configuration en ce qui concerne la largeur du document et la taille des marges.

Vous pouvez  vérifier en affichant le panneau Feuilles de Styles et en affichant la feuille de styles liée.


A.2. Appliquer les styles à cet élément, via ses styles embarqués (2)

Faire ce choix de méthode permet de ne mettre en forme que le document en cours. Cette mise en forme aura priorité sur la feuille de styles liée.

Effectuer les mêmes manipulations de 1 à 8 après avoir sélectionné Appliquer les styles à cet élément, via ses styles embarqués (2)

Dans le Code source vous pouvez lire, par exemple (si vous avez opté pour une largeur de 900px)  :

<body style="margin: 0px auto; width: 900px;">

Le résultat reste identique, même si le code est simplifié par rapport aux données évoquées en A.1.


B. Effectuer la mise en forme directement dans le Code source

Si vous maîtrisez le code HTLM, il est possible de saisir le code (si vous avez opté pour une largeur de 900px)  :

 style="margin: 0px auto; width: 900px;"

directement au clavier, à l'intérieur de la balise <body>


Retour

Dernière mise à jour : le 01/03/17