samedi 5 juin 2010

Ajouter une bordure à un paragraphe

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.


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")
Rendez-vous sur Hellocoton !

3 commentaires:

  1. Trop trop bien ce petit truc !
    Merci d'avoir partagé !

    RépondreSupprimer
  2. fiouuu c'est trop pour moi mdr
    en fait mon haut débit n'a pas bcp de .....débit, alors mes balises n'apparaissent pas, ni les bannieres d'ailleurs, je ne vois ni les couleurs des blogs( des autres et du mien) ni les bannieree c'est pour dire....;)

    RépondreSupprimer