Formation 36

Mise en forme des balises de type block

Largeur et Hauteur : width et height

De manière évidente, ces 2 paramètres CSS fixent la largeur et la hauteur d’un bloc HTML.

Vous pouvez indiquer des valeurs en pixels, en points, en pouces... Si vous utilisez l’attribut auto, les dimensions du bloc s'adapteront automatiquement en fonction de son contenu.

width: 200px;
height: auto;

Transformer un bloc en « calque » : float

Float fait “ flotter ” un bloc à droite (right) ou à gauche (left), ce qui permet de faire cohabiter plusieurs blocs côte à côte sur une même ligne. Cela permet de créer une mise en page à plusieurs colonnes. Si vous ne spécifiez rien, ou si vous indiquez « aucune » (none), la suite de la page sera par défaut placé sur une nouvelle ligne.

float: left;

Cette technique est très employée pour élaborer la mise en page d’un site, car elle évite d’avoir recours aux tableaux.

Mettre fin à la règle float : clear

Tant que l’on n’annule pas l’effet d’une propriété float, les blocs continuent à se positionner côte à côte, dans la limite de la place disponible à l’écran.

Pour annuler l’effet float, on utilise la propriété clear avec les attributs suivants :

  • left : interrompt l’alignement sur une même ligne des blocs à gauche

  • right : interrompt l’alignement sur une même ligne des blocs à droite

  • both : interrompt totalement l’alignement côte à côte des blocs

 

Marges intérieures : padding

En HTML, les blocs possèdent des marges intérieures et des marges extérieures.

 

 

 

Voici un exemple pour vous montrer la différence entre les marges intérieures et les marges extérieures. Cette notion est très importante en XHTML et CSS.

 

 

 

 

 

 

 

 

 

 

 

 

 

La marge intérieure est l’espace entre le contenu (texte ou image) du bloc et sa bordure.

Bien que la distance se mesure par rapport à la bordure du bloc, cette bordure n’est pas obligatoirement apparente. Vous pouvez très bien choisir de laisser la bordure invisible.

La largeur de la marge intérieure (le padding en CSS) peut être exprimée en pixels, points, pouces... Et chacune des 4 marges intérieures (haut, droite, bas, gauche) peut avoir une dimension différente.

 

En langage CSS, plusieurs syntaxes sont possibles.

Vous pouvez indiquer une à une les largeurs respectives de chaque marge intérieures en utilisant les propriétés CSS padding-top, padding-right, padding-bottom et padding-left.

padding-top: 20px;
padding-left: 10px;
padding-right: 25px;
padding-bottom:12px;

 

Il existe également une propriété globale padding qui nécessite entre 1 et 4 attributs :

  • si vous indiquez 1 valeur, cette dimension sera appliquée aux 4 marges intérieures

  • si vous indiquez 2 valeurs, la première s’appliquera aux marges intérieures du haut et du bas, la seconde correspond aux marges intérieures de droite et de gauche

  • si vous indiquez 3 valeurs, la première s’applique à la marge du haut, la seconde aux marges de droite et gauche, et la dernière correspond à la marge intérieure du bas

  • si vous indiquez 4 valeurs, ces dimensions correspondent respectivement aux marges intérieures du haut, de droite, du bas et de gauche (on décrit les marges dans le sens des aiguilles d'une montre)

/* marges intérieures du haut, de droite, du bas et de gauche */
padding: 5px 10px 5px 20px;

/* marges intérieures du haut, de droite/gauche, puis du bas */
padding: 10px 5px 20px;

/* marges intérieures haut/bas et droite/gauche */
padding: 5px 20px;

/* 4 marges intérieures identiques */
padding: 5px;

 

Marges : margin

A l’inverse du remplissage qui sépare le contenu du bloc de sa bordure, la marge (ou marge extérieure) est l’espace qui sépare la bordure du bloc du reste de la page internet. Le fonctionnement est identique aux marges intérieures que nous venons de voir.

 

La largeur de la marge extérieure (margin en CSS) peut être exprimée en pixels, points, pouces... et chacune des 4 marges extérieures (haut, droite, bas, gauche) peut avoir une valeur différente.

Il est également possible d’indiquer auto pour un couple de marge (droite/gauche ou haut/bas), de manière à centrer le bloc horizontalement ou verticalement. Cela permet notamment de centrer le contenu d’un site web à l’écran.

En langage CSS, plusieurs syntaxes sont possibles.

Vous pouvez indiquer une à une les largeurs respectives de chaque marge extérieurs en utilisant les propriétés CSS margin-top, margin-right, margin-bottom et margin-left.

margin-top: 20px;
margin-left: 10px;
margin-right: 25px;
margin-bottom:12px;

 

Il existe également une propriété globale margin qui nécessite entre 1 et 4 attributs :

  • si vous indiquez 1 valeur, cette dimension sera appliquée aux 4 marges extérieures

  • si vous indiquez 2 valeurs, la première s’appliquera aux marges extérieures du haut et du bas, la seconde correspond aux marges extérieures de droite et de gauche

  • si vous indiquez 3 valeurs, la première s’applique à la marge du haut, la seconde aux marges de droite et gauche, et la dernière correspond à la marge extérieure du bas

  • si vous indiquez 4 valeurs, ces dimensions correspondent respectivement aux marges extérieures du haut, de droite, du bas et de gauche (on décrit les marges dans le sens des aiguilles d'une montre)

/* marges extérieures du haut, de droite, du bas et de gauche */
margin: 5px 10px 5px 20px;

/* marges extérieures du haut, de droite/gauche, puis du bas */
margin: 10px 5px 20px;

/* marges extérieures haut/bas et droite/gauche */
margin: 5px 20px;

/* 4 marges extérieures identiques */
margin: 5px;



Pour plus d'informations, vous pouvez nous contacter par mail.

 

Tutos et cours en ligne

Ergonomie et accessibilit�R�f�rencementHTML / CSS