Pendant la création ou l’édition de sites ou de blogs les balises du HTML (HyperText Mark-up Language) qu’on utilise sont destinées à contenir au moins un medium (notamment: image, texte, vidéo). À ce titre, les balises ou éléments html sont perçus comme des conteneurs ou boîtes avec des caractéristiques très particulières à certaines. Pour rendre le document web plus attrayant la manipulation de ces éléments (comme le div ou la table) est faite avec le CSS (Cascading Style Sheet) suivant l’idée du modèle de boîte.
Une petite tentative de compréhension de ce modèle paraît utile pour savoir comment exploiter la technologie qu’offre le CSS à notre avantage.
i- La marge La marge est une partie qui se trouve à l’extérieur. Elle quitte le bord de l’élément du coté extérieur et s’étend au-delà. La commande ‘margin’ permet de la définir.
ii- Le bord Le bord est la limite réelle d’un élément. C’est le point de démarcation entre l’extérieur et l’intérieur. La commande qui définit le bord est ‘border’.
iii- Le rembourrage C’est l’intervalle de la bordure au contenu de l’élément. La commande de définition du rembourrage est ‘padding’.
iv- La largeur (zone d’affichage) C’est la partie interne du conteneur destinée à recevoir le contenu vraisemblablement à afficher (dans la majeure partie des cas). Pour manipuler la largeur, on utilise la commande ‘width’.
Fixe ou dynamique?
La valeur ‘auto’ qu’on peut attribuer à certaines parties permet de laisser le système décider de la disposition d’un élément par rapport au contenu et au contenant. Les valeurs fixes absolues servent à manifester les préférences personnelles du propriétaire.
Le contenu à afficher est probablement la chose la plus essentielle car après tout on pourrait la présenter dans une page html toute simple sans se soucier d’une quelconque élégance. Le modèle nous montre aussi que la zone des données est une partie centrale autour de laquelle se place le reste. Ce qui fait qu’en absence de spécifications d’une marge et/ou d’un rembourrage, un élément se résume fondamentalement à sa largeur; que celle-ci soit automatique (width: auto) ou fixe (width: 999px).
Mentionnons au passage que la valeur de rembourrage ou de marge n’est pas déduite de la zone d’affichage réel des données d’un élément.
Insertion d’un élément dans un autre
Si la largeur d’un élément est automatique, elle sera ajustée en tenant compte de sa marge et son rembourrage; ceci de manière à tenir dans l’objet auquel il est interne. Dans le cas où cet élément-conteneur ne peut le contenir on assistera à un débordement.
Si la largeur d’un élément est fixe, sa taille est conservée également à sa marge et son rembourrage avec l’ambition de s’intégrer dans l’objet auquel il est interne. Un débordement de cet élément survient s’il ne peut tenir en entier dans un autre élément-conteneur.
Note: Pour montrer la marge d’un élément il faut la placer dans un autre avec un fond coloré et sans bourrage.
2. Pour écarter l’un de l’autre deux objets se trouvant dans le même contenant, en général on privilégiera la commande margin en sachant qu’entre deux objets qui se suivent la marge la plus grande l’emporte. Plus précisément avec un objet flottant à gauche par exemple (float: left), la commande margin permet de mettre une séparation avec l’élément le plus voisin.
Maintenant les suggestions n’ont rien de religieux ou de doctrinal. Elles dépendent seulement d’une certaine éthique de développement. J’ai personnellement vu et je continue de voir des manières de faire traduisant une autre conception qui donnent le résultat visuel attendu. De plus des fois on se trouve devant des difficultés ou face à des défis de conception qui amènent à tordre le coup à certains principes de codage mais cela doit rester des exceptions et ne pas se transformer en une conduite habituelle.
© Copyright 2011-2012. United Kingdom of Love - Tous droits réservés.
Une petite tentative de compréhension de ce modèle paraît utile pour savoir comment exploiter la technologie qu’offre le CSS à notre avantage.
Le modèle
On peut trouver une ressemblance du modèle de boîte avec un cadre pour photo. Les différentes parties qu’on peut distinguer dans ce modèle sont: la marge, le bord, le rembourrage, la largeur. |
| Modèle de boîte |
i- La marge La marge est une partie qui se trouve à l’extérieur. Elle quitte le bord de l’élément du coté extérieur et s’étend au-delà. La commande ‘margin’ permet de la définir.
ii- Le bord Le bord est la limite réelle d’un élément. C’est le point de démarcation entre l’extérieur et l’intérieur. La commande qui définit le bord est ‘border’.
iii- Le rembourrage C’est l’intervalle de la bordure au contenu de l’élément. La commande de définition du rembourrage est ‘padding’.
iv- La largeur (zone d’affichage) C’est la partie interne du conteneur destinée à recevoir le contenu vraisemblablement à afficher (dans la majeure partie des cas). Pour manipuler la largeur, on utilise la commande ‘width’.
Mise en œuvre
Dans la pratique on peut se poser la question de savoir s’il faut utiliser tout élément avec toutes ses parties à la fois. Heureusement le modèle ne l’impose pas. On peut ne pas indiquer une bordure si ce n’est pas utile, se débarrasser d’une marge si on n’en a pas besoin. Cependant certaines conditions peuvent s’imposer au technicien.Fixe ou dynamique?
La valeur ‘auto’ qu’on peut attribuer à certaines parties permet de laisser le système décider de la disposition d’un élément par rapport au contenu et au contenant. Les valeurs fixes absolues servent à manifester les préférences personnelles du propriétaire.
Le contenu à afficher est probablement la chose la plus essentielle car après tout on pourrait la présenter dans une page html toute simple sans se soucier d’une quelconque élégance. Le modèle nous montre aussi que la zone des données est une partie centrale autour de laquelle se place le reste. Ce qui fait qu’en absence de spécifications d’une marge et/ou d’un rembourrage, un élément se résume fondamentalement à sa largeur; que celle-ci soit automatique (width: auto) ou fixe (width: 999px).
Mentionnons au passage que la valeur de rembourrage ou de marge n’est pas déduite de la zone d’affichage réel des données d’un élément.
Insertion d’un élément dans un autre
Si la largeur d’un élément est automatique, elle sera ajustée en tenant compte de sa marge et son rembourrage; ceci de manière à tenir dans l’objet auquel il est interne. Dans le cas où cet élément-conteneur ne peut le contenir on assistera à un débordement.
Si la largeur d’un élément est fixe, sa taille est conservée également à sa marge et son rembourrage avec l’ambition de s’intégrer dans l’objet auquel il est interne. Un débordement de cet élément survient s’il ne peut tenir en entier dans un autre élément-conteneur.
 |
| Marge fixe autour d’un élément |
 |
| Un élément à marge fixe et à largeur automatique dans un autre |
 |
| Un élément à marge fixe et à largeur fixe dans un autre |
Note: Pour montrer la marge d’un élément il faut la placer dans un autre avec un fond coloré et sans bourrage.
Deux directives profitables
1. Dans le souci de créer le retrait d’un contenu de la bordure visible d’un élément, il faut utiliser la commande de rembourrage; padding (padding: 10px par exemple).2. Pour écarter l’un de l’autre deux objets se trouvant dans le même contenant, en général on privilégiera la commande margin en sachant qu’entre deux objets qui se suivent la marge la plus grande l’emporte. Plus précisément avec un objet flottant à gauche par exemple (float: left), la commande margin permet de mettre une séparation avec l’élément le plus voisin.
 |
| Eléments avec padding et margin à valeur fixée entre eux |
 |
| Eléments avec une valeur de margin à zéro |
Conclusion
Le modèle de boîte nous donne la possibilité de donner de l’attrait à un site ou un blog. L’esthétique obtenue dépendra de la cohérence avec le modèle de boîte. Plus les règles de style définies sont en accord avec le modèle de boîte, meilleure est l’esthétique produite.Maintenant les suggestions n’ont rien de religieux ou de doctrinal. Elles dépendent seulement d’une certaine éthique de développement. J’ai personnellement vu et je continue de voir des manières de faire traduisant une autre conception qui donnent le résultat visuel attendu. De plus des fois on se trouve devant des difficultés ou face à des défis de conception qui amènent à tordre le coup à certains principes de codage mais cela doit rester des exceptions et ne pas se transformer en une conduite habituelle.
© Copyright 2011-2012. United Kingdom of Love - Tous droits réservés.
