Blogue

Les Bases d’une page WEB – #9

Les Bases d’une page WEB – #9

     Bienvenue à notre neuvième leçon sur le HTML et le CSS. 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 :

Les bases du web cours #9

     Suite à cette image, nous pouvons déduire que le « padding » est l’espace entre la « border » d’un objet et la bordure, tandis que 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.

     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.

     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, car 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!

     Dans notre prochaine leçon, nous allons raffiner nos notions de positionnement et allons toucher aux différentes couches d’un style (d’où le premier « C » dans CSS pour « Cascading »).

Voir la leçon sur You Tube

Voir le blogue 8 pour utiliser le même modèle HTML que j’utilise dans cette leçon