Base du web #1 | cours HTML

Bienvenue à notre neuvième leçon sur le HTML et le CSS où nous allons regardé le modèle de boîte. Dans cette leçon, nous allons nous concentrer sur les « margin », « padding », « border » ainsi que le modèle de boîte absolue.

Ne commençons pas les « margin » et les « padding ». Ces deux propriétés en CSS nous permettent de laisser de l’espace entre certains éléments. Commençons par un simple graphique :

CSS padding et magre | Base du web HTML

Suite à cette image, nous pouvons déduire que le « padding » est l’espace entre la « border » d’un objet et la bordure. Cependant, la marge est l’espace entre chaque objet. Nous définissons les « margin » et « padding » une à la fois en indiquant le côté que nous voulons affecter comme dans l’exemple suivant :

margin-left :15px;
margin-top :15px;
martin-bottom:15px;
margin-right:15px;
padding-left:15px;
padding-right:15px;
padding-top:15px;
padding-bottom:15px;

Par contre, une technique plus simple en CSS nous permet de définir les quatre côtés avec la même valeur comme ceci :

margin :15px;
padding :15px;

Finalement, si nous désirons avoir des dimensions différentes en CSS, nous pouvons les définir en une seule ligne de cette façon :

margin : 5px 7px 8px 9px;
padding :10px 11px 12px 13px;

Lorsque nous inscrivons les 4 valeurs à l’intérieur d’une seule ligne, la première valeur est celle du dessus (top) et nous continuons dans le sens des aiguilles d’une montre. Alors les valeurs représentent respectivement le haut, droit, bas et gauche.

Les bordures

Continuons avec les bordures. Elles nous permettent de délimiter les objets et ajouter un peu plus de beauté à notre page. Les bordures peuvent utiliser beaucoup de propriétés différentes, car on peut en changer la couleur, l’épaisseur et même le style de ligne sur chaque côté. De plus, on peut également modifier le « radius » (arrondissement de chaque coin) de la bordure. Voici un exemple pour effectuer un effet semi-3D.

.bouton {
 background-color :# ebebeb;
 border-width :1px 2px 2px 1px;
 border-style :solid;
 border-color :#cccccc #666666 #666666 #cccccc;
 border-radius:10px 10px 5px 5px;
}

Comme vous pouvez voir dans l’exemple ci-haut, pour la majorité des propriétés, nous pouvons indiquer 4 valeurs. Les quatre valeurs commencent toujours par le haut et tournent ensuite dans le sens des aiguilles d’une montre.

Position absolue

Pour terminer cette leçon, nous allons voir les positions absolues. Un objet avec une position absolue peut être placé où nous le désirons dans l’écran en définissant sa position. Quand on place un élément en position absolue, il faut définir au minimum 4 éléments : la largeur, la hauteur et les propriétés « top » et « left ». Les propriétés « top » et « left » indiquent en nombre de pixels à quel endroit que le coin supérieur gauche de notre objet soit être à l’intérieur de son contenant (dans une prochaine leçon, nous allons découvrir plus en détail les contenants pour le positionnement).

Toujours pour notre class « bouton », ajoutons les propriétés suivantes :

.bouton {
 position:absolute;
 width:200px;
 height:30px;
 top:200px;
 left:300px;
}

Pour finaliser le tout, si nous ajoutons un paragraphe à l’intérieur de notre bouton :

<div class="bouton">
   <p>mon bouton</p>
</div>

Nous pouvons décoller le texte du bouton en utilisant une des deux techniques que nous avons vues au début de cette leçon, soit utiliser le « padding » sur le bouton ou les marges sur le paragraphe. Voici le code pour le bouton avec le « padding » :

.bouton {
 background-color :#ebebeb;
 border-width :1px 2px 2px 1px;
 border-style :solid;
 border-color :#cccccc #666666 #666666 #cccccc;
 border-radius:10px 10px 5px 5px;
 position:absolute;
 width:200px;
 height:30px;
 top:200px;
 left:600px;
 padding:5px
}

Ou encore celui avec les marges sur notre paragraphe :

.bouton {
 background-color :#ebebeb;
 border-width :1px 2px 2px 1px;
 border-style :solid;
 border-color :#cccccc #666666 #666666 #cccccc;
 border-radius:10px 10px 5px 5px;
 position:absolute;
 width:200px;
 height:30px;
 top:200px;
 left:600px;
}
.bouton p {
 margin :5px
}

Nous vous invitons à essayer les deux options pour voir la différence entre les résultats. L’utilisation du « padding » va rajouter ceux-ci à la dimension du bouton. Ce qui veut dire que notre bouton que nous avons défini à 200 pixels de large va ajouter le « padding » des deux côtés et se redimensionner à 210 pixels le long. Le même principe s’applique pour la hauteur. Par contre, la modification d’une marge n’affectera pas la largeur ni la hauteur de l’objet original!

Maintenant, il ne reste qu’a vous prendre un hébergement web avec nous!

Voir la leçon sur You Tube