Lilapuce
 

exercices (lundi 19 novembre 2007)

Html - Css [8]

Padding

Résumé de l’étape précédente :

- en fait, nous n’avons rien vu de bien nouveau ; nous avons mis en pratique ce qui avait été déjà abordé pour placer le second bloc, à droite.

Nous en étions donc là :

JPEG - 28.5 ko

Autant le dire tout de suite : ce n’est pas avec ce design-là que vous allez casser la baraque. Ceci étant, la page est déjà structurée et cela peut représenter les fondations d’une maquette plus aboutie.

Nous sommes très loin d’avoir fait le tour de la question, mais après avoir lu ces supports, j’espère que vous aurez été sensibilisés aux logiques, contournements et contorsions qu’il est nécessaire d’adopter pour mettre en pratique les CSS.

Il faudra compléter vos connaissances sur Internet. Le net regorge d’infos au sujet des CSS. Je vous suggère de vous documenter, notamment, sur les sujets suivants :

- les blocs en position absolue

- l’intégration d’images de fond

- les menus

- les tableaux

- les champs de formulaires

- etc.

Ceci étant, vous pouvez, d’ores et déjà, améliorer le modèle, existant en modifiant quelques paramètres que nous avons vus : les largeurs de blocs, afin d’adapter l’affichage aux résolutions d’écran, les couleurs, les marges, etc.

Tiens, à propos de marges, justement, pour terminer, je vais vous raconter l’histoire du padding ; je pense que ça pourra vous servir.

Vous vous souvenez en quoi consistent les marges ?

Reprenons notre modèle, côté CSS. Les marges (externes et internes) sont définies à 1em (lignes 26 et 27) :

JPEG - 42 ko

Sortons un moment de ce modèle et essayons de préciser ce que signifient, d’un point de vue plus général, « marges externes » et « marge internes » :

- marges externes (margin) : délimitées, de l’extérieur, par le conteneur parent et les conteneurs voisins.

- marges internes (padding) : délimitées, de l’intérieur, par les éléments enfants.

Normalement, avec padding (marges internes) on devrait avoir la solution idéale pour régler une bonne fois pour toutes les marges à l’intérieur d’un conteneur.

Oui, mais malheureusement c’est plus compliqué que ça, car la propriété padding est, par la force des choses, largement sous-employée :

Aussi étonnant que cela puisse paraître, il faut savoir que la propriété padding n’est pas interprétée de la même façon par Internet Explorer et Firefox. (Eh oui, encore une fois !). Ces différences d’interprétation peuvent entraîner des résultats spectaculaires. Voici, à titre d’exemple, le même fichier chargé sur les deux navigateurs, après avoir modifié grossièrement la valeur de padding du bloc de gauche :

Firefox :

Internet Explorer :

Qu’est-ce qui a provoqué cette différence ?

Pour comprendre le problème, il est nécessaire de faire appel au schéma classique des spécifications CSS concernant les propriétés d’un bloc :

Apportons, quelques précisions d’ordre général :

- Les marges externes (margin) ne font pas partie du contenu du bloc. Elles ne sont jamais matérialisées par un fond. Par contre, les marges externes étant transparentes, elles laissent apparaître le fond du bloc parent.

- Si un bloc comporte un fond, ce dernier s’affichera sur : la largeur (width), la marge interne (padding) et sous la bordure (border) (le fond sera visible sous la bordure si cette dernière est hachurée ou pointillée).

La différence d’interprétation entre navigateurs intervient à partir du moment où l’on indique des valeurs pour la largeur (ou la hauteur) ainsi que pour les marges internes et les bordures.

Pour Firefox, la propriété (width) est réservée à l’affichage du contenu ; ce dernier étant strictement constitué par les éléments enfants. Toutefois, comme nous l’avons vu, la largeur du bloc étant définie par la propriété width, elle ne s’adapte pas au contenu pour englober ce dernier, au cas où celui-ci serait composé d’éléments de largeur supérieure. La marge interne (padding) et la bordure (border) s’ajoutent toujours au contenu :

Pour Internet Explorer, la propriété width définit un contenu qui englobe à la fois les éléments enfants du bloc, la marge interne et la bordure. La largeur s’adapte toujours au contenu de l’élément enfant, même si elle a été paramétrée :

Comme vous pouvez le constater sur ces schémas, c’est bien Internet Explorer, une fois de plus qui joue le rôle du méchant. Ce navigateur interprète, à sa façon, les spécifications CSS en redéfinissant les propriétés width et height.

Si la différence d’interprétation de padding d’un navigateur à un autre ne pose aucun problème pour les marges verticales (dès lors qu’on n’indique pas de hauteur), il n’en est pas de même en ce qui concerne les marges horizontales, qui sont a priori paramétrées avec des largeurs.

C’est précisément pour éviter ces différences importantes dans l’interprétation des pages que les webmestres ont pris l’habitude de règler systématiquement les marges internes (padding) à zéro.

Bien. Retour à notre CSS :

Dans un premier temps, je supprime donc la marge interne (padding) réglée uniformément à 1em et, à la place, je règle tout à zéro sauf pour la marge inférieure (la troisième, correspondant à bottom). La marge inférieure n’étant pas problématique puisque aucune hauteur n’est indiquée.

JPEG - 15.7 ko

Ensuite, je définis une règle s’appliquant à tout élément parent du conteneur gauche de la façon suivante :

JPEG - 5.7 ko

L’étoile placée ainsi (sélecteur universel) permet de créer la marge gauche interne à ce bloc, sans avoir à passer par la propriété padding.

Je corrige les marges du paragraphe en retirant la marge gauche (la dernière) puisque je viens de le définir ci-dessus. Je procède ainsi pour tous les autres sélecteurs (titres, liste, etc.).

JPEG - 7.1 ko

J’applique une marge supérieure à l’image :

JPEG - 4.6 ko

Un dernier réglage pour annuler le cumul de la marge gauche sur la pseudo classe (le lien) :

JPEG - 9.8 ko

J’enregistre, je charge…

JPEG - 45.7 ko

C’est ajusté !

 

Projet RECETTE [8]