Magazine Journal intime

Ajouter une bordure à un paragraphe

Publié le 05 juin 2010 par Myrtilled
De temps en temps, je rajoute un "edit" dans mes articles, pour corriger quelque chose ou ajouter une précision. Et pour qu'ils soient plus visibles, je décale un peu le texte et rajoute une bordure sur le côté gauche.
Ajouter une bordure à un paragraphe
Une fois le texte tapé dans la partie "Rédiger", je vais dans l'onglet "Modifier le code HTML" et je rajoute avant et après le texte à décaler le code :
<div style="border-left: 1px solid #000000; padding-left: 12px;">
paragraphe à décaler vers la droite
</div>
► les balises <div> et </div> définissent le paragraphe auquel on veut appliquer la mise en forme
► l'élément style="...." permet de définir les caractéristiques de la mise en forme (les "éléments de style" ou css appliqués à la balise div)
► la propriété border-left définit la bordure gauche du paragraphe par une largeur (ici 1px), un type de bordure (ici solid) et éventuellement une couleur, définie par son code hexadécimal ou par son nom.
► la propriété padding-left définit l'espace à gauche, entre la bordure et le texte
De la même manière, on peut définir une bordure à droite border-right, en haut border-top et en bas border-bottom avec pour chacune des caractéristiques qui lui sont propres, ou tout simplement border pour une bordure identique de tous les côtés.
►► Plus d'infos sur le Site du Zero : propriétés des boîtes.
Exemple pour une bordure pointillée épaisse et bleue :
<div style="border: 5px dotted #0000FF; padding: 12px;">
paragraphe à encadrer avec une bordure pointillée bleue
</div>
Aperçu :
paragraphe à encadrer avec une bordure pointillée bleue
(tous mes tutoriels sont dans l'index "informatique")

Retour à La Une de Logo Paperblog

Magazine