Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

06.05.2009

Un style pour les citations avec la propriété « border »

Dans un contexte toujours plus tendu autour de la propriété intellectuelle, il conviendrait de ne pas négliger la bonne présentation des extraits de texte auxquels vous souhaitez réagir, ou que vous utilisez pour illustrer votre propos.

La mise en forme des citations fait parfois partie des styles par défaut proposés dans les éditeurs de note des plateformes de blog, mais pas chez Hautetfort pour l'instant. Comme nous avons créé un style pour le code, nous allons en créer un autre pour les citations en abordant en trois notes : les bordures, les marges, et cette logique bizarre de montre carrée.

En CSS, "border" vous permet de créer une bordure autour de votre texte, vous pouvez très simplement l'utiliser en style attaché à un paragraphe de cette façon.

Exemple de texte avec "bordure".

<p style="border-style:solid; border-width:1px; border-color:#000;">Exemple de texte avec "bordure".</p>


Style de trait, épaisseur et couleur

Il est recommandé de donner ces propriétés dans cet ordre, même si certains navigateurs "supportent le désordre".

Les styles de trait les plus courants sont : continu (solid), avec des tirets (dashed), avec des points (dotted), ou doublé (double). Il en existe d'autres.

La commande de l'épaisseur se fait avec « width », généralement en pixels, mais éventuellement avec des adjectifs (length, thin, medium, thick). Notez qu'il est utile d'avoir au moins 3 pixels d'épaisseur pour avoir deux lignes visibles. De même, pour voir les points passer de « carrés » à « ronds » faut-il leur accorder un minimum de largeur.

La couleur se commande avec « border-color ».



Au royaume des bordures autonomes...

Nous pouvons paramétrer indépendamment chaque côté de bordure. En combinant les différentes propriétés évoquées plus haut, il est possible d'obtenir quelque chose de tout à fait hideux, mais illustratif.

*<p style="
border-top-style:solid; border-top-width:2px; border-top-color:#F00;
border-right-style:dashed; border-right-width:3px; border-right-color:#0F0;
border-bottom-style:dotted; border-bottom-width:4px; border-bottom-color:#00F;
border-left-style:double; border-left-width:5px; border-left-color:#FF0;
padding:4px;">
Nous pouvons paramétrer indépendamment chaque côté de bordure. En combinant les différentes propriétés évoquées plus haut, il est possible d'obtenir quelque chose de tout à fait hideux, mais illustratif.
</p>*


Arrondissons les angles...

Pour finir, nous pouvons créer des arrondis, vous l'avez-vu dans la distinction de vos réponses dans les commentaires. S'il n'y a pas de bordure visible, il y en a tout de même une qui permet de donner un contour à la couleur de fond.

Ici encore, vous n'êtes pas obligés d'arrondir tous les angles avec le même degré. Vous pouvez simuler des onglets par exemple. Notez que vous pouvez fortement augmenter le pourcentage, il faudra « suffisamment » de lignes dans le cadre pour que cela se voie.

Ne vous rongez pas
les onglets...

*<p style="border-style:solid; border-width:1px; border-color:#000;
-moz-border-radius: 1% 5% 0% 0%;
-webkit-border-radius: 1% 5% 0% 0%;
text-align: center;">
Ne vous rongez pas <br>
les onglets...
</p>*Ne vous rongez pas
les onglets...


Et notre style ?

Pour l'instant le style citation pourrait-être une simple ligne de tirets sur la gauche avec le texte en italique comme Léo, "ferré" à gauche donc, ce qui donnerait :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

<p style="
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
text-align:left; font-style:italic">
Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.<br /><br />
Balzac (Le Lys dans la vallée)
</p>


Autant admettre tout de suite que ce n'est pas terrible. Nous réglerons cela avec les marges que nous aborderons dans une prochaine note, puis nous poposerons l'intégration à la feuille de styles.

En attendant, si vous voulez en savoir plus sur les bordures, je vous recommande la lecture de :
• "Bordures, couleurs, tailles, style" chez CSS Débutant
• "Bordures" chez SelfHTML

 

13:26 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, border, bordure, cadre, citation, style | |  del.icio.us | | Digg! Digg |  Facebook

Les commentaires sont fermés.