Dans la peau d'une biroute

Le style et l'élégance: premier pas

--> les premiers sont toujours les plus durs

On en a fini avec le tour de code, on peut enfin passer à la mise en page. On va oublier les articles passés sur le sujet histoire de prendre un bon départ. Donc aujourd'hui, on va commencer par quelques règles générales et tant qu'on y est (vu que c'est pas long) on va s'occuper de la mise en page du titre.

Tout d'abord les règles concernant la mise en page sont placées dans l'en-tête, entre les balises <style type="text/css"> et </style type="text/css">. À l'intérieur de ces balises, le texte qui nous intéresse aujourd'hui est le suivant 

body {
      font-size: .9em;
      font-family: arial, sans-serif;
      background: #fefeea;}
a {text-decoration: none;}
body, h1, p, div {margin: 0;}
hr {clear: both; visibility:hidden;}
p {padding: .5em 0;}

#titre {background: #dcdcc8;
        padding: .3em .5em .5em 1em;}
h1 {font-size: 2em;
    padding: 0;}
h1 a {color: #004183;}
#titre p {font-size: 1.4em;
          font-style: italic;
          padding: 0 0 0 1em;
          color: #1a51ac;}

Le code ci-dessus permet donc de définir partiellement la mise en page de ce joueb. En gros, il donne son aspect final au titre rajoute quelques informations sur les éléments courants.

Je ne vous cache pas que je n'en suis pas très fier. Il est assez brouillon et trop lourd à mon goût mais il fallait bien continuer.

On commence par les règles qui s'appliquent à l'élément body et à tous les éléments qui en héritent. La ligne font-size: 0.9em indique que la taille du texte affiché est de 0,9 fois la taille par défaut. On indique ensuite (par font-family: arial, sans-serif) que l'on utilisera la police arial ou si elle n'est pas disponible, la police par défaut de type sans-serif de votre navigateur. On a enfin la couleur de fond de notre joueb (background: #fefeea;) cette jolie (humpf) couleur crème qui fait tant d'envieux.

On indique ensuite que les liens ne seront pas soulignés (a {text-decoration: none;}) et on force les marges à avoir une valeur égale à 0 pour différents éléments (eurk, mais ce qui est fait est fait) : body, h1, p, div {margin: 0;}. Les règles horizontales (hr) ne sont pas utiles quand le style est affiché, on les gardes juste pour crée un espacement : hr {clear: both; visibility:hidden;}. Le premier indique que les règles seront affichés après tout objet flottant, on verra pourquoi un autre jour. La deuxième indique que les éléments hr ne sont pas affichés mais occupent tout de même leur place. En clair, ils sont là, mais on ne les voit pas.

On indique ensuite le padding des paragraphes (éléments p)... Mais qu'est ce que le padding ? Patience...

On définit ensuite le fond du titre et son padding. Il est tant peut-être de parler de dire ce qu'est le padding et d'expliquer la différence entre padding et margin. Le premier définit la distance entre les bords de la boite et ce qu'elle contient), le deuxième définit l'espace minimum entre une boite et la suivante. Ainsi, pour notre titre, on a écrit : #titre {background: #dcdcc8; padding: .3em .5em .5em 1em;}, ce qui définit la couleur de notre fond (qui est beurk elle aussi) et indique la distance qui sera tenu pour vide à l'intérieur du bloc contenant le titre. A quoi correspondent ces 4 chiffres et qu'est ce qu'un em? Pour em, c'est très simple : l'em est une unité de mesure telle qu'un em est égale à la hauteur du caractère M (elle dépend donc de la taille de caractère utilisée par l'utilisateur). Pour les 4 chiffres, c'est presque aussi simple: il y a quatre bord à notre boite. On peut donc définir le padding en quatre étape (en utilisant les règles padding-top, padding-right padding-bottom, padding-left ou tout regrouper dans une unique déclaration padding). Dans ce dernier cas, on a trois soutions:

• On ne donne qu'une valeur: (par exemple padding: 1em) et la taille du padding est de 1em pour les quatres bords de la boite.
• On donne deux valeurs: (par exemple padding: 1em 2em) le padding pour le haut et le bas vaut alors 1em, celui pour la gauche et la droite 2em.
• On donne quatre valeurs: (par exemple padding: 1em 2em 3em 4em) le padding haut vaut 1em, celui de droite 2em, celui du bas 3em et celui de gauche 4em.

En gros on commence toujours par le haut et on continue dans le sens des aiguilles d'une montre.

Ainsi notre titre à un fond et on a défini l'espacement entre ses bords et son contenu. de plus, comme notre titre est un bloc de type div, la règle donné plus haut pour les div s'applique aussi à lui : il n'a donc aucune marge, les blocs suivants seront donc collés au titre.

On arrive ensuite aux règles indiquant que le titre du joueb (h1) fait deux fois la taille d'un texte normal (font-size: 2em) et qu'il n'y a pas de padding pour cet élément (oui, j'ai un truc lourd et indigeste). Comme le titre est donné sous forme de lien, on définit sa couleur grâce à h1 a {color: #004183;}. La forme du soutitre est donné par les règles s'appliquant à l'élément #titre p. Il y a là une seule nouvelle règle: font-style: italic qui, comme son nom l'indique, met le sous titre en italique.

Ecrit par be-rewt, le Lundi 1 Décembre 2003, 14:25 dans la rubrique "Comment faire ?".

Repondre a cet article