Comprendre l’utilisation des marges externes et des marges internes est obligatoire lorsque l’on désire créer ou modifier son thème WordPress. En effet, à l’aide de votre feuille de style (style.css), vous allez déterminer la dimension de vos boîtes en fonction de la dimension des marges. Nous allons apprendre à nous servir dans un premier temps des marges externes pour mettre en forme notre blog WordPress. Nous allons prendre un exemple concret ci-dessous pour vous expliquer l’intérêt des marges externes  :

css-wordpress

Pour plus de simplicité, nous nous occuperons de la page, du contenu et de la sidebar. Comme vous le voyez sur le schéma, nous désirons une page centrée de 900px de largeur, d’un contenu (c’est ici que vous aurez par exemple l’article de votre blog) de 560 px de largeur positionné à gauche et une sidebar de 250 px de largeur positionnée à droite ainsi que des espaces de 30 px entre les différents blocs. Commencez par ouvrir votre feuille de style de votre thème à l’aide du tableau de bord. Nous allons d’abord indiquer dans la balise body (le support de votre blog) que nous ne voulons aucune marge extérieure (margin) et interne (padding)) car quelques navigateurs ont des pages par défaut qui faussent ensuite le positionnement de vos blocs. Donc indiquez :

body {
  1. margin: 0;
  2. padding: 0;
  3. }

Ensuite, nous allons déterminer la largeur de notre page. La page contient différentes parties comme l’entête, la sidebar, le footer, etc.. Nous voulons une page de 900 px de largeur centrée et sans aucune marge en haut et en bas. Insérez les lignes :

#page {
  1. margin: 0 auto 0 auto;
  2. width: 900 px;
  3. }

On va maintenant déterminer la position de nos deux élements : La sidebar a une largeur de 250 px, est à droite et à gauche une marge externe de 30px. Insérez cette ligne :

.sidebar {
  1. width: 250px;
  2. margin: 0 30px 0 30px;
  3. float: right;
  4. }

Il nous reste maintenant le contenu qui sera sur la gauche. On a une page de 900px de large, une sidebar de 250 px avec une marge à droite de 30px et une marge à sa gauche de 30px et le contenu doit avoir aussi une marge à gauche de 30px. On va donc maintenant calculer la largeur du contenu en fonction de ce que l’on a dit : 900-250-30-30-30=560px. On va indiquer la largeur et la marge externe à gauche de 30px. Insérer le code suivant :

#content {
  1. width: 560px;
  2. margin-left: 30px;
  3. float: left;
  4. }

Voilà, si vous avez tout bien suivi, ça devrait le faire ;) Dans un prochain article, on parlera du positionnement de votre entête (header) et de votre pied de page (footer) ainsi que des marges internes (padding). J’espère que ce petit tutorial vous aura bien aidé et n’hésitez pas à laisser vos commentaires si vous avez des difficultés.

A+ David