Dans une mise en page réalisée en CSS, tous les éléments sont considérés comme des boîtes (box). Chacune de ces boîtes est constituée d’un contenu, d’un espacement intérieur, d’une bordure, et d’une marge externe.
Voici les propriétés CSS qui permettent de déterminer les dimensions, la couleur, le style de chacun de ses constituants :
| Propriété CSS | Ce qui est concerné : |
|---|---|
width et height |
largeur et hauteur du contenu (texte, image, etc.) |
padding |
espacement intérieur, entre le contenu et la bordure |
border |
bordure (ou encadrement) |
margin |
marge externe, espace (transparent) entourant le tout |
Selon le modèle standard du W3C, la largeur apparente à l’écran correspond à width+padding+border. De même, la hauteur occupée à l’écran correspond à height+padding+border.
Exemple illustré ci-dessus : div { width: 250px; padding: 20px; border: 5px; margin: 25px; }. Cette boîte ayant un contenu de 250 pixels de large, des padding latéraux de 20 pixels chacun et des bordures latérales 5 pixels chacune, occupera à l’écran une largeur apparente de 5 + 20 +250 + 20 + 5= 300 pixels.
Tout se gâte avec IE !
Il existe un autre modèle de boîte, celui de Microsoft, où la largeur apparente à l’écran est égale à la seule valeur de width, son navigateur (Internet Exploreur pour Mac ou PC) réduisant la zone de contenu selon les valeurs des padding et border. Ainsi le code de l’exemple ci-dessus affichera une boîte de 250 pixels de large dans IE, au lieu des 300 pixels attendus. La différence n’est pas négligeable !
Pour ne pas se poser de questions, certain-e-s modifient leur façon de coder en CSS, plaçant les propriétés border et padding sur des boîtes différentes de celles où sont définies largeur et hauteur, quite à surcharger leur code de boîtes par ailleurs inutiles.
Mieux : on forcera le choix du modèle à appliquer, en spécifiant un DOCTYPE dans le head de chaque page. Pour en savoir plus, lire : « Gérer les modèles de boîtes CSS standard et Microsoft », par Laurent Denis, OpenWeb, mars 2003.
Notons que cela ne change rien pour IE5/Win qui ne connaît que le modèle Microsoft, ni pour IE6/Win dans certains cas. On utilisera alors le « Box Model Hack », hack de référence developpé par Tantek Çelik, ici traduit en français (par Christophe Ducamp) : « Bidouillage de Boîtes ».
Vos commentaires
# Le 17 juillet 2009 à 07:36, par Solan
Pour un non spécialiste, cette démolition systématique du navigateur IE a quelque chose d’excédant, je me permets de le dire ici en espérant que les professionnels se modèrent un peu pour rester crédibles ! Après tout, c’est pour le public que vous travaillez et vous devriez comprendre qu’il n’a pas les mêmes critères qu’un designer ou un webmestre pour juger le navigateur ! Ces limitations d’IE, ce sont les concepteurs qui s’en apercoivent parce qu’ils ne peuvent pas faire ce qu’ils veulent ! Qu’est-ce que ça nous fait à nous ? Va-t-on sur Internet pour admirer seulement des pages ultra sophistiquées ou des couleurs transparentes ? Bien sûr que non ! IE a une supériorité sur tous les autres du fait qu’il se met à la place de l’internaute de base et cherche à lui faciliter les choses. Ce n’est pas un navigateur "intellectuel". Des navigateurs comme Opera et Safari sont beaucoup trop sophistiqués et compliqués à comprendre. Quant à Firefox, il reste tourné vers des gens qui ont des notions avancés d’informatique car il n’est pas facile à paramétrer. Je vous donne simplement un point de vue d’utilisateur ordinaire.
# Le 27 novembre 2009 à 20:17, par grrrr
Et le respect des standards ? Les standards ne sont pas faits pour les chiens.
Un message, un commentaire ?
Suivre les commentaires :
| 