Médiaforma

Les divisions

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

La balise <div> </div> est un élément essentiel en programmation HTML/CSS. Elle permet de définir une zone rectangulaire dans laquelle seront affichés divers éléments textuels, graphiques ou vidéo.

Une division (parfois appelée boîte) est caractérisée par plusieurs propriétés CSS :

–          ses dimensions : with (largeur) et height (hauteur) ;

–          ses marges intérieures : padding ;

–          ses marges extérieures : margin ;

–          sa couleur d’arrière-plan : background-color ;

–          sa bordure : border.

Les marges intérieures peuvent être identiques en haut, en bas, à droite et à gauche. Dans ce cas, vous utiliserez la propriété margin. Par contre, si vous voulez définir des marges intérieures différentes, vous devrez utiliser les propriétés margin-top, margin-bottom, margin-left et margin-right.

Il en va de même pour les marges extérieures. Si elles sont identiques, utilisez la propriété padding. Si elles sont différentes, utilisez les propriétés padding-top, padding-bottom, padding-left et padding-right.

Nous allons faire une première approche des balises <div> en écrivant quelques lignes de code :

Le corps du document contient deux <div>. La première a pour identifiant div1 et contient du texte. La deuxième a pour identifiant div2 et contient une image.

Comme vous le voyez, ce document HTML n’utilise aucune feuille de styles. Voyons le résultat dans Internet Explorer. Le texte et l’image sont affichés l’un à la suite de l’autre, comme s’ils étaient séparés par un passage à la ligne <br>.

Pour montrer l’intérêt des balises <div>, nous allons attacher la feuille de styles styles6.css au document et y définir les caractéristiques des deux balises <div>.

Avant de commencer à écrire le code CSS, nous ajoutons une balise <link> dans le document pour faire référence à la feuille de styles :

<link rel= »stylesheet » href= »styles6.css » />

Commençons par définir le style de la balise d’identifiant div1. Ses dimensions sont fixées à 400 pixels horizontalement et à 200 pixels verticalement. Ses marges extérieures sont fixées à 30 pixels. Sa marge intérieure supérieure est fixée à 40 pixels. Sa couleur d’arrière-plan est rouge. Enfin, sa bordure est épaisse de 2 pixels, continue et de couleur noire.

Définissons le style de la balise d’identifiant div2. Ses dimensions sont fixées à 300 pixels horizontalement et à 200 pixels verticalement. Ses marges extérieures sont fixées à 0 pixels. Ses marges intérieures sont fixées à 0 pixels. Sa couleur d’arrière-plan est bleue. Enfin, sa bordure est épaisse de 4 pixels, pointillée et de couleur rouge.

Voyons le résultat dans Internet Explorer.

Remarquez en particulier :

–          la marge autour de la première div, qui a été fixée à 30 pixels par la propriété margin ;

–          la marge intérieure supérieure de la première div, fixée à 40 pixels par la propriété padding-top ;

–          la position de l’image dans la deuxième <div>. Elle se retrouve « collée » à l’angle supérieur gauche de la division car la propriété padding a été initialisée à 0 ;

–          aucune marge n’ayant été définie pour la deuxième <div>. Elle se retrouve calée sur le côté gauche de la zone d’affichage.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply