[Résolu] Formatage des guillemets dans un blockquote

Bonjour à tous.
J'ai un blockquote (tout simple) dans ma feuille de style pour les citations.

blockquote { 
font: italic normal 110% "Georgia", Times, "Times New Roman", serif;
text-align: justify;
}

Je cherche à formater les guillemets de cette citation
pour qu'ils ressemblent à ça


Quelqu'un aurait-il une idée ?
Merci d'avance
Modifié par bambi (14 Jan 2007 - 17:56)

Salut !

Je crois que tu devrais employer des images de fond.

Le problème étant que tu ne pourras pas avoir deux images de fond pour un blockquote. Par contre, si tu as des citations d'un seul paragraphe, tu peux avoir :

<blockquote>
	<p>Ma citation.</p>
</blockquote>

Tu pourras alors mettre la première image sur le paragraphe (en haut à gauche), et la seconde pour le blockquote (en bas à droite).

Il te faudra jouer sur :
- les padding ;
- le positionnement des images de fond avec background-position.


Note : pour mémoire, il devrait être possible de faire des choses avec les pseudo-sélecteurs blockquote:before et blockquote:after. Mais pas de compatibilité avec IE, même IE7... qui implémente par contre :first-line et :first-letter : peut-être une piste à creuser, donc.
Modifié par Florent V. (14 Jan 2007 - 16:50)

Bonjour Thomas et Florent
J'ai pensé aux images mais je crois que c'est possible avec le css.

En fait, c'est ce que j'ai dans mon userContent.css de Firefox (pour ceux qui connaissent)
et qui me formatent de cette manière les citations sur les forums phpBB.
Mais je n'arrive pas à extraire ce qui concerne les guillemets
et l'insérer dans mon css pour mon site.

Voilà le code dans mon userContent.

/* phpBB - Changer l'apparence des citations QUOTE */

td.quote {
  quotes: "\201C" "\201E" "\00AB" "\00BB" !important;
  border: 1px #888 dashed !important;
  padding: 1em 1em 1em 4em !important;
}
td.quote:before { content:      open-quote !important; }
td.quote:after  { content: " " close-quote !important; }
td.quote:before, td.quote:after 
{
  color: #557 !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 300% !important;
  font-weight: bold !important;
}

td.quote:first-letter { margin: -1em !important; }

Modifié par bambi (14 Jan 2007 - 16:49)

Finalement, j'ai trouvé la solution sur ce site
et j'ai donc opté pour une solution html

Ce qui me donne le résultat souhaité