Créer et modifier les feuilles de style d'un site SPIP
(→Positionnement des blocs dans une page html) |
(→Positionnement des blocs dans une page html) |
||
| Ligne 140 : | Ligne 140 : | ||
== Positionnement des blocs dans une page html == | == Positionnement des blocs dans une page html == | ||
| + | === Principe général=== | ||
| + | A la création de la structure d'une page html (et donc d'un squelette Spip), il s'agit : | ||
| + | * 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. <br>Ces parties de code seront appelées dans les pages à l’aide de l'instruction Spip INCLURE. | ||
| + | S'agissant des blocs, une différence très importante existe ceux dont la position est absolue (fixée en pixels, px) et ceux dont la position ne l'est pas (leur largeur est exprimée en %, par rapport à la dimension de la page écran). | ||
| − | + | La largeur et la hauteur des blocs peuvent être relatives ou absolues. | |
| − | + | ===Blocs dont la position n’est pas absolue === | |
| + | Ils 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. | |
| − | + | ||
| − | + | ||
| − | + | ===Blocs dont la position est absolue === | |
| − | + | Ces blocs peuvent en revanche s’écrire où l’on veut dans le fil du code html. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | === Internet Explorer ou non...=== | ||
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. | 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. | ||
