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.

12.05.2009

Intégrer le style citation à la feuille de styles

Après avoir jouer à être "border line", puis avoir exploré les espaces intérieurs (et au-delà), nous en sommes arrivés à l'intégration du style citation dans la feuille de styles. Et nous allons enfin aborder la logique de la montre carrée...

Voilà où nous avions laissé notre style citation :

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="backgroun-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
padding-top: 2px;
padding-right: 8px;
padding-bottom: 2px;
padding-left: 8px;
margin-top:4px;
margin-right:32px;
margin-bottom:12px;
margin-left:32px;
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>

Nous le transformons maintenant en "class" et nous avons ceci :

.citation p{
background-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
padding: 2px 8px;
margin: 4px 32px 12px;
text-align:left; font-style:italic">
}

Le lecteur attentif aura noté que le code avait changé.


La logique de la montre carrée

Autant avouer tout de suite que cette terminologie Carollienne n'a aucune légitimité technique. C'est ma façon de vous faire approcher les différentes syntaxes possibles pour donner des paramètres.

Qu'il s'agisse d'épaisseur de bordure, d'espace ou de marge, notamment, vous pouvez gérer les quatre côtés séparément. Vous pouvez donc déclarer des intructions séparées du type :

border-top-width:2px;
border-right-width:4px;
border-bottom-width:6px;
border-left-width:8px;

ou les déclarer à la suite en suivant la syntaxe :

border-width: 2px 4px 6px 8px;

Évidemment, il vous faudra respecter l'ordre dans lequel la navigateur interprète les commandes. À partir du haut, dans le sens des aiguilles d'une montre (d'où la montre carrée, voyez ;-) Mais ce serait trop facile de s'arrêter là.


Si les côtés opposés sont de même valeur, au lieu d'écrire :

border-top-width:2px;
border-right-width:4px;
border-bottom-width:2px;
border-left-width:4px;

nous pouvons déclarer :

border-width:2px 4px;


Si haut et bas ont des valeurs différentes, mais droite et gauche sont identiques, au lieu d'écrire :

border-top-width:2px;
border-right-width:4px;
border-bottom-width:6px;
border-left-width:4px;

nous pouvons déclarer :

border-width:2px 4px 6px;

Ce n'est pas pour vous faire coder dans les règles de l'art, en économisant des caractères, que je me suis permis d'exposer cette logique de montre carrée. Je souhaitais juste vous donner une clé supplémentaire pour comprendre le code que vous trouvez.


Intégrons enfin le style citation dans la feuille

Vous pouvez vous référer à la note sur le style "code" pour avoir des images, la manœuvre est identique.

1. Il faut copier le code suivant

.citation p{
background-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
padding: 2px 8px;
margin: 4px 32px 12px;
text-align:left; font-style:italic;">
}

2. Aller dans Présentation, puis Configuration avancée, et devant Feuille de styles cliquer sur modifier le template.
3. Descendre jusque .content p, puis après le } marquant la fin de ce code, coller le code copié.
4. Enregistrer les modifications de la feuille de styles.

 

Pour utiliser le style dans une note

Deux méthodes au choix :

  1. Taper le texte d'abord.
  2. Utiliser l'éditeur HTML pour l'encadrer par
    <div class="citation">
    <p>Texte de la citation</p>
    </div>
  3. Veillez à ve que les balises de paragraphe soient bien encadrées, sinon cela ne fonctionnera pas.

Ou

  1. D'abord utiliser l'insertion de code embed
  2. Insérer <div class="citation"><p>**</p></div>
  3. Taper le texte entre les astérisques
  4. Supprimer les astérisques au moment de la publication


Là encore, le résultat n'est parfaitement visible que publié sur le bolg, et ce n'est pas très facile à mettre en place.
Je proposerai bientôt une méthode intermédiaire.

Et pour finir, une citation mise en forme par la feuille de style, elle encore tirée de cette collection d'avertissements préalables.

Comme leurs noms l’indiquent, tous les personnages de ce roman sont fictifs. Si les événements décrits dans ces pages semblent plus vrais que nature, c’est parce qu’ils le sont : dans la réalité, tout est moins simple. Cela dit, même lorsqu’elles ne sont pas délibérées, les ressemblances avec des personnes ou des événements réels sont, probablement, inévitables.

Martin Winckler (La Maladie de Sachs)

Les commentaires sont fermés.