Le dimensionnement des éléments
2. Le contenu
Pour spécifier complètement la dimension d'un élémentde type bloc, il faut aussi connaître la dimension du contenu. Suite à des dissentions dans le monde des navigateurs, ceci peut maintenant se faire de deux manières différentes. Nous feront usage des notations introduites à la page précédente.
La guerre des navigateurs
Les données mentionnées à la page précédante ne sont bien-sûr pas suffisantes pour connaitre les dimensions de l'élément : il nous faudrait également savoir quelles sont les dimensions du contenu, par exemple, ou encore les dimensions extérieures du cadre.
Ceci se fait à l'aide des propriétés width (largeur) et height (hauteur). Mais encore faudrait-il savoir de quelle largeur et de quelle hauteur il s'agit !
Pendant longtemps, il y a eu problème avec le navigateur Internet Explorer (IE) de Microsoft, pour qui width et height désignaient la largeur et la
hauteur incluant la marge interne et le cadre, alors que les standards du consortium W3C, adoptés par le reste des navigateurs,
stipulaient que width et height
devaient désigner la largeur et la hauteur du contenu seul. C'était un beau casse-tête pour les concepteurs de pages Web !
Heureusement, les choses se sont arrangées depuis et les deux « modèles de boite » (comme on les appelle en anglais) sont maintenant disponibles grâce à la propriété box-sizing qui peut
prendre les valeurs content-box (style W3C, le défaut), ou border-box (style IE).
Les modèles de boite
Outre les dimensions précitées, nous sommes aussi intéressés à connaitre les dimensions totales de notre élément, car elles sont également importantes pour le design de notre page Web.
Aux fins de nos calculs, nous désignerons donc respectivement par :
wcethcla largeur et la hauteur du contenu seul ;wbethbla largeur et la hauteur du contenu plus la marge interne et le cadre ;wmethmla largeur et la hauteur totales de l'élément, incluant la marge externe.
Le modèle « content-box »
Dans ce modèle, qui est le modèle par défaut, les propriétés width et height ont pour valeur wc et hc. On peut donc calculer les
autres dimensions par les formules:
wb = bl+pl+width+pr+br
hb = bt+pt+height+pb+bb
(on additionne les largeurs de la marges internes et de le cadres ; les choses se simplifient un peu si bl = br et pl =
pr et si bt = bb et pt = pb).
Pour les dimensions totales, il faut en plus ajouter la largeur de la marge externe :
wm = ml+wb+mr
hm = mt+hb+mb
Les dimensions totales sont donc :
wm = ml+bl+pl+width+pr+
br+mr
hm = mt+bt+pt+height+pb+
bb+mb
Ce modèle est bien adapté quand les dimensions du contenu sont imposées (par exemple s'il s'agit d'une image). Par contre, la situation est plus compliquée si on désire avoir un élément de dimensions données, cadre inclus.
Le modèle « border-box »
Dans ce modèle, les propriétés width et height ont pour valeur wb et hb. On peut donc calculer les
dimensions du contenu par les formules:
wc = width-bl-pl-pr-br
hc = height-bt-pt-pb-bb
et les dimensions totales sont :
wm = ml+width+mr
hm = mt+height+mb
Ce modèle est plus facile à utiliser pour faire le design de la page Web.
Choix du modèle
Le choix du modèle se fait en utilisant la propriété box-sizing :
| box-sizing | content-box | border-box | inherit |
et en lui donnant la valeur voulue. On peut aussi choisir de faire hériter le modèle de l'élément parent (valeur inherit).
On peut ensuite spécifier la valeur de width :
| width | longueur | pourcentage | auto |
en donnant une longueur en pixels ou en cadratins ; lorsqu'on utilise un pourcentage, c'est relativement à la largeur de l'élément parent. Généralement, on ne spécifie pas la hauteur : elle est déterminée par la quantité et la taille du contenu.
Il est à noter qu'au lieu de spécifier une valeur précise pour la largeur, on peut spécifier une valeur minimum (min-width) ou maximum (max-width).