19
juin 07
Styler correctement les blockquotes avec des images
Par Guillaume BIZET | Lien permanent
Souvent les bloc de citation <blockquote> ne sont pas complètement et correctement stylisé via les CSS + images.
Je m'explique. On voit régulièrement sur les sites et autres blog les guillemets de départ mais rarement ceux de fin de phrase (exemple ci-dessous)
Cliquez pour voir en grand
Voici donc une technique complètement valide Xhtml et CSS qui permets de le faire, que je viens de mettre en place sur ce blog
Tout simplement reprennont la construction sémantique d'un blockquote.
<blockquote><p>ceci est le contenu de la citation</p></blockquote>
Comme vous pouvez vous rendre compte le un paragraphe p est forcément est inclu entre les balises blockquote ouvrante et fermantes et c'est grace à cela que nous allons pouvoir faire ce que l'on veut soit ceci :
Cliquez pour voir en grand
Voici donc le code à insérer dans votre fichier css
blockquote {
text-indent: 25px;
background: url(quotes1.png);
background-position: 0 2px;
background-repeat: no-repeat;
}
blockquote p {
display: inline;
margin: 0;
padding-right: 24px;
background: url(quotes2.png);
background-position: bottom right;
background-repeat: no-repeat;
}
Notez que le display: inline; sur le paragraphe permets que l'image avec les guillemets fermants suive exactement la fin du texte du paragraphe en transformant la définition display:block; par défaut des paragraphes



































Commentaires
k-ny
19/06/2007 - 16:58
Le coup du background c'est pas con du tout. A noter qu'en css 2, il existe des propriétés dédiée à ça, mais elles sont encore trop mal supportées par certains navigateurs (qui à dit internet explorer ? lol)
J'm'en servirais à l'occasion, merci pour l'astuce !
Luc
19/06/2007 - 17:21
Et dans le cas d'une citation de plus d'un paragraphe ? que se passe t il ?
ne risquerai t on pas de se trouver avec plusieurs fin de citations ?
Guillaume
19/06/2007 - 17:51
@ Luc
Alors pour moi une citation est un ensemble que ce soit un ou plusieurs paragraphes donc, selon moi, si tu souhaites avoir plusieurs paragraphes de citation il faudrait alors faire plusieurs citations indépendantes
Jean-Michel
21/06/2007 - 21:01
Grave pas mal ! J'ai trouvé une solution à une envie pour un des mes prochains blogs.
Merci !
br1o
24/06/2007 - 02:20
Très bien vu, je pense que je vais m'en servir sous peu
David, biologeek
28/06/2007 - 17:48
Je suis d'accord avec Luc, un bloc blockquote doit pouvoir contenir plusieurs paragraphes sans forcément que ce soit des citations différentes.
Ben
23/07/2007 - 16:57
Oui effectivement vraiment sympa cette astuce...
En ce qui concerne de multiples paragraphes au sein de la citation, je n'ai pas fait de nombreux test mais il s'avère qu'un petit
<br/>fonctionne dans mon cas. Peut être un piste pour certains...:P
Jean-Michel
03/08/2007 - 19:08
Une autre possibilité envisagé par le N.Design
http://www.webdesignerwall.com/tuto...