Accueil 
Ce dont vous avez besoin Model à télécharger Personnaliser les arrière-plans Les polices de caractère Les marges.
Les marges
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
| Résumé de la matière | Description |
|---|---|
| L'affichage | Comme nous l'avons vue précédemment, notre modèle est moins large... |
| Margin et padding | Les attributs margin et padding sont un élément essentiel... |
| Les conteneurs | Le conteneur <body> est le bloc principal... |
| Positionnement relatif et absolu | Le positionnement relatif et absolu des éléments conteneur... |
L'affichage
Comme nous l'avons vu précédemment, la page (la largeur de body) a seulement 800 pixels et est donc moins large que la plupart des écrans d'aujourd'hui. Nous avons donc choisi de centrer la page de façon à ce que l'excédent de l'écran s'affiche de chaque côté de celle-ci. Pour ce faire, nous avons attribué la valeur auto à margin (ligne 22). La valeur de padding (la marge intérieure ou le rembourrage) est « 0 ».
Margin et padding
Les attributs CSS margin et padding sont un élément essentiel de la construction d'une page web. Il faut bien comprendre qu'une page peut-être divisée en plusieurs blocs conteneurs. Ses conteneurs contiendront à leur tour d'autres blocs comme des paragraphes par exemple. L'espace qui leur sera attribué est défini par width (largeur) et height (hauteur). Par exemple:
.header {
width:800px;
height:200px
}
L'espace réserver pour la bannière est donc 800 pixels de large par 200 pixels de haut. Si le calque qui vous servira de bannière a les mêmes dimensions ou qu'il est insérer en arrière plan, il n'y a pas de problème sauf si vous ajoutez une marge avec un calque insérer sur la page XHTML.
En effet, si vous ajoutez une marge de 10 pixels (margin : 10px = marge de 10 pixels de chaque côté du conteneur header), vous devez réduire la grandeur du calque qui vous servira de bannière à 780 pixels afin de positionner le calque dans l'espace qu'il reste. Si vous ajoutez en plus un rembourrage de 10 pixels (padding : 10px = rembourrage de 10 pixels de chaque côté du conteneur), il y aura dans les faits, 760 pixels dans sa largeur pour insérer la bannière qui contiendra votre logo, votre texte etc. et 160 pixels dans sa hauteur.
Si vous insérez votre bannière et qu'elle est plus grande que l'espace prévu, le calque dépassera du conteneur de 20 pixels soit 10 pixels de chaque côté.
Pour vous aider, ajouter une bordure temporaire à tous vos conteurs, y compris à body. Par exemple:
.header {
width:800px;
height:100px
margin:10px
padding:10px
border:1px solid #f00
}
Vous saurez ainsi de combien d'espace vous avez pour insérer votre calque. Lorsque tous les conteneurs de votre page seront bien positionnés et les éléments bien imbriquer, supprimer la bordure, sauf si vous en avez besoin évidemment.
Les conteneurs parents.
Le conteneur <body> est le bloc principal, le conteneur parent de tous les autres bloque descendant directement de lui. Nous parlons dans ce cas d'une hiérarchie d'élément. Ce qui veut dire que les marges, les caractères et autre paramètre défini dans body serons les carac- téristiques de base de tous les conteneurs enfants qui suivront à moins que ceux-ci soit modifié. Nous verrons plus loin comment chaque élément pourra recevoir ses propres paramètres. Pour plus ample information sur les conteneurs parents, lisez la rubrique Ancêtre, Parents, Enfants, Frères.
Positionnement relatif et absolu
J'en profite pour vous parlez du positionnement de ses blocs conteneur. Il y a deux position- nements possible, le positionnement relative (ang) et le positionnement absolute (ang).
Tous les blocs par défaut sont en position relative. Par conséquent, il est inutile de le préciser dans le CSS. Pour le positionnement absolu (absolute) il suffit de définir le positionnement souhaité du votre bloc en pixel, par rapport au côté gauche de votre navigateur et par rapport à son haut. En mode absolute, le positionnement se fait donc en X et Y par rapport au body (la fenêtre du navigateur).
Différence entre les deux positionnements.
La position relative {position: relative} (par défaut) dans le Css, se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balise div seront positionnés à la suite des éléments après lesquels ils se trouvent. L'élément positionné de façon relative ne peut être chevauché ni chevauché d'autres éléments.
Le positionnement absolu {position: absolute} dans le Css se détermine par rapport au coin supérieure gauche de la fenêtre du navigateur. L’élément positionné de façon absolue peut chevaucher d’autres éléments ou être chevauché. Utile pour écrire un texte sur une image ou superposé deux bloque conteneur par exemple. Si vous regardez le menu en haut de cette page sous « Table des matières », le troisième niveau chevauche le second grâce au positionnement absolu.
Ajouter ce site à vos favoris
