Page 1 sur 2
Apostrophe sur du texte
Publié : 24 janv. 2007, 11:44
par guilhem_mdg
Bonjour à tous,
J'ai une petite question CSS pour vous...
Voilà j'ai un paragraphe :
Code : Tout sélectionner
<blockquote>
<p>ffsfd gh jhgfdshj hjg fhjg sghrfe ffsfd gh jhgfdshj hjg fhjg sghrfe <br />
ffsfd gh jhgfdshj hjg fhjg sghrfe ffsfd gh jhgfdshj hjg fhjg sghrfe <br />
ffsfd gh jhgfdshj hjg fhjg sghrfe ffsfd gh jhgfdshj hjg fhjg sghrfe</p>
</blockquote>
Et j'ai envi de mettre une apostrophe sous forme d'image au début et à la fin de mon texte de facon à ce que mon texte épouse la forme de l'apostrophe (style float:left/right)
Comment faire ?
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Publié : 24 janv. 2007, 13:01
par Asumbaa
Salut,
Pour encadrer un bloc de citation avec des jolis guillemets ? Genre comme sur le forum ubuntu-fr ?
Mmmh...
A première vue sans trop réfléchir, image de fond sur le blockquote (guillemets ouvrants) en top left, avec un padding pour pas écrire par dessus.
Pour le guillemet fermant, c'est plus embêtant puisque tu ne peux pas mettre deux images de fond sur un même élément.
Regarde voir sur Ubuntu comment ils ont fait ?
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Publié : 24 janv. 2007, 13:20
par guilhem_mdg
Ubuntu ? Sur quelle page ?
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Publié : 24 janv. 2007, 14:30
par Asumbaa
Dans le forum, quand il y a une citation.
Je vais essayer de te trouver comment ils ont fait.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Publié : 24 janv. 2007, 14:56
par guilhem_mdg
Merci Asumba, je viens de voir mais en fait ce n'est pas exactement ce que je cherche...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Publié : 24 janv. 2007, 15:05
par calimo
guilhem_mdg a écrit :Merci Asumba, je viens de voir mais en fait ce n'est pas exactement ce que je cherche...
C'est-à-dire plus exactement ?
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9
Publié : 24 janv. 2007, 18:35
par FF_Olivier
Peut-être qqc comme ça ?
Code : Tout sélectionner
blockquote {
quotes: "\201C" "\201E" "\00AB" "\00BB";
border: 1px #888 dashed;
padding: 1em 1em 1em 4em;
}
blockquote:before { content: open-quote; }
blockquote:after { content: " " close-quote; }
blockquote:before,
blockquote:after {
color: #557;
font-family: "Times New Roman", Times, serif;
font-size: 300%;
font-weight: bold;
}
blockquote:first-letter { margin: -1em; }
Publié : 25 janv. 2007, 09:25
par guilhem_mdg
Merci FF_Olivier,
Néanmoins, ce n'est pas encore exactement ce que je cherche...
Mais on se rapproche. Voici la capture : barré c'est ton résultat. En dessous c'est ce que je souhaite obtenir...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Publié : 25 janv. 2007, 09:55
par calimo
Un petit display:inline dans les :before et :after pour éviter de générer des blocs ?
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9
Publié : 25 janv. 2007, 10:10
par Asumbaa
Ah, sympa, ça !
FF_Olivier, aurais-tu un petit lien de doc sur tes quotes, open-quote, close-quote ? Ca rend pas mal du tout je trouve
Précisons tout de même que ça ne fera rien dans IE6 (comprend pas les :before et :after)
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Publié : 25 janv. 2007, 11:35
par guilhem_mdg
Non, non Calimo cela ne change rien...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Publié : 25 janv. 2007, 12:18
par FF_Olivier
Asumbaa a écrit :FF_Olivier, aurais-tu un petit lien de doc sur tes quotes, open-quote, close-quote ? Ca rend pas mal du tout je trouve
W3C :
12.
http://www.yoyodesign.org/doc/w3c/css2/generate.html
Et plus précisément :
12.4
http://www.yoyodesign.org/doc/w3c/css2/ ... tml#quotes
Publié : 25 janv. 2007, 13:13
par Asumbaa
Super, merci beaucoup !
C'est vraiment intéressant ce truc
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3
Publié : 26 janv. 2007, 09:19
par guilhem_mdg
je viens de trouver !!
http://corsairesforum.free.fr/fichiers/ ... rophe.html
EDIT : N'est-il pas possible de mettre le
à la fin ? (car mon texte est dynamique via une bdd)
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Publié : 26 janv. 2007, 10:03
par calimo
Je ne vois vraiment pas pourquoi ".apost" ne pourrait pas plutôt être un :before, mais bon
Pour le .apost2, le problème des flottements, c'est qu'ils ne peuvent flotter que par rapport au texte suivant, donc si tu le mets à la fin, il apparaitra en dessous. La méthode est donc moyennement robuste
Malheureusement CSS2 ne propose pas de pseudo-sélecteur :last-letter (il n'y a que first-letter)
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1