Apostrophe sur du texte

guilhem_mdg · Message par **guilhem_mdg** » 24 janv. 2007, 11:44

Bonjour à tous,
J'ai une petite question CSS pour vous...
Voilà j'ai un paragraphe :

<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

Asumbaa · Message par **Asumbaa** » 24 janv. 2007, 13:01

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

guilhem_mdg · Message par **guilhem_mdg** » 24 janv. 2007, 13:20

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

Asumbaa · Message par **Asumbaa** » 24 janv. 2007, 14:30

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

guilhem_mdg · Message par **guilhem_mdg** » 24 janv. 2007, 14:56

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

calimo · Message par **calimo** » 24 janv. 2007, 15:05

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

FF_Olivier · Message par **FF_Olivier** » 24 janv. 2007, 18:35

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; }

guilhem_mdg · Message par **guilhem_mdg** » 25 janv. 2007, 09:25

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

calimo · Message par **calimo** » 25 janv. 2007, 09:55

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

Asumbaa · Message par **Asumbaa** » 25 janv. 2007, 10:10

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

guilhem_mdg · Message par **guilhem_mdg** » 25 janv. 2007, 11:35

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

FF_Olivier · Message par **FF_Olivier** » 25 janv. 2007, 12:18

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

Asumbaa · Message par **Asumbaa** » 25 janv. 2007, 13:13

FF_Olivier a écrit :
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

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

guilhem_mdg · Message par **guilhem_mdg** » 26 janv. 2007, 09:19

je viens de trouver !!

http://corsairesforum.free.fr/fichiers/ ... rophe.html

EDIT : N'est-il pas possible de mettre le

Code : Tout sélectionner

<span class="apost2"></span>

à 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

calimo · Message par **calimo** » 26 janv. 2007, 10:03

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

Geckozone

Apostrophe sur du texte

Apostrophe sur du texte

Qui est en ligne ?