Créer et modifier les feuilles de style d'un site SPIP
(→Les éléments html de type bloc et les éléments html de type en ligne) |
(→Positionnement des blocs dans une page html) |
||
| Ligne 144 : | Ligne 144 : | ||
Le principe général est de créer des blocs div délimitant les contours des différentes zones de la page (haut de page, menu gauche, pied de page, encadrés...), puis de détacher en squelettes autonomes les invariants des pages (qui seront appelés à l’aide de INCLURE). | Le principe général est de créer des blocs div délimitant les contours des différentes zones de la page (haut de page, menu gauche, pied de page, encadrés...), puis de détacher en squelettes autonomes les invariants des pages (qui seront appelés à l’aide de INCLURE). | ||
| − | Précisons une différence importante entre les blocs dont la position n’est pas absolue et ceux dont la position est absolue (c’est-à-dire fixée en px) : | + | Précisons une différence importante entre les blocs dont la position n’est pas absolue et ceux dont la position est absolue (c’est-à-dire fixée en pixels, px) : |
| − | + | ||
| − | + | ||
| − | La largeur et la hauteur des blocs peuvent être relatives ou absolues. Attention cependant | + | * les blocs dont la position n’est pas absolue se placent les uns à la suite des autres par ordre de leur apparition dans le fil du code html de la page et chacun se positionne en haut à gauche de son bloc conteneur. |
| + | ** les marges externes du bloc (''margin'') positionnent chaque bloc précisément relativement à son bloc parent et à ses blocs "frères" | ||
| + | ** la marge interne (''padding'') positionne précisément le texte à l’intérieur du bloc. | ||
| + | |||
| + | Si un bloc a un positionnement horizontal absolu (du type left : 180px) mais pas de positionnement vertical absolu (du type top : 40px), il se placera sous le bloc qui le précède. | ||
| + | |||
| + | Sa place dans le fil du code html est donc déterminante. | ||
| + | |||
| + | * les blocs dont les positions sont absolues peuvent en revanche s’écrire où l’on veut dans le fil du code html. | ||
| + | |||
| + | La largeur et la hauteur des blocs peuvent être relatives ou absolues. | ||
| + | |||
| + | Attention cependant : pour la plupart des navigateurs, la taille d’un bloc est égale à width + padding + border. Mais pour Internet Explorer, la taille du bloc est seulement égale à width. | ||
| + | |||
| + | Ainsi, pour éviter les disparités entre un affichage de votre page dans I. Explorer et un affichage dans un autre navigateur, il vaut mieux : | ||
* éviter d’attribuer une largeur width à un bloc qui comporte un padding left ou right ou un border left ou right. Utilisez plutôt les margin-left et margin-right, | * éviter d’attribuer une largeur width à un bloc qui comporte un padding left ou right ou un border left ou right. Utilisez plutôt les margin-left et margin-right, | ||
* éviter d’attribuer une hauteur height à un bloc qui comporte un padding top ou bottom ou un border top ou bottom. Utilisez plutôt les margin-top et margin-bottom. | * éviter d’attribuer une hauteur height à un bloc qui comporte un padding top ou bottom ou un border top ou bottom. Utilisez plutôt les margin-top et margin-bottom. | ||
| − | |||
== Héritage des caractéristiques de style == | == Héritage des caractéristiques de style == | ||
