Chronique familiale




La chronique familiale pas à pas

Tracer une ligne



Comme je l'ai dit, tout ce que nous pouvons faire en matière de ligne avec la balise <hr> se résume à ce genre de syntaxe :

<hr style="width:50%; margin:auto;">

avec ce résultat :


Lequel n'a rien de transcendant ! Qui plus est, l'affectation d'attributs à la balise <hr> est déconseillée en HTML5 et il n'est pas sûr que cette syntaxe soit valide encore longtemps. Aussi faut-il trouver une autre solution qui soit pérenne.

Nous avons vu comment paramétrer la balise <div> dans la page Créer un conteneur avec <div> ↗. Cela va nous servir ici à tracer des lignes.


 Une solution simple


<div style="width:50%; margin:auto; height:6px; background-color:red;"></div> (une boite qui occupe 50% de la largeur de la page, centrée, d'une hauteur de 6 pixels, dont la couleur de fond sera rouge.)


avec ce résultat :


Notez qu'il n'est pas utile d'affecter un contenu à la balise <div> mais qu'il ne faut pas oublier de la refermer.


 Et une un peu plus élaborée


Souvenez-vous, on peut choisir le style de bordure ↗ d'un conteneur.

Et voici par exemple ce qu'on peut faire avec cette syntaxe :

<div style="width:50%; margin:auto; border-top:dashed 5px blue;"></div> (une boite avec seulement la bordure supérieure 1, constituée de tirets d'une épaisseur de 5 pixels et de couleur bleue.)


Pour obtenir ce résultat :



Faites des expériences, amusez-vous, ces deux exemples ne sont là que pour vous montrer le principe.



 Notes

 
1. border-top, border-right, border-bottom et border-left définissent respectivement la bordure haute, droite, basse et gauche d'un élément.



───── oOo ─────


Index des pages