Apostrophes images sur une citation...

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 ?
Modifié par guilhem_mdg (24 Jan 2007 - 12:42)

Salut,

Merci de relire les règles du forum, et en particulier celle qui demande d'encadrer les extraits de code avec les balises appropriées.

Bonjour,

Il me semble que le sujet a déjà été abordé sur le forum. Par exemple ici :
http://forum.alsacreations.com/topic.php?fid=4&tid=21665&s=guillemets

Bien sûr, la recherche marche mieux avec les termes adéquats (« guillemets » plutôt qu'« apostrophe »).

Au passage :
http://fr.wikipedia.org/wiki/Faux-texte

Bonjour,
As tu essayer de placer tes image directement dans le code
avec utilisation eventuel de marges négative et de la propriété vertical-align?
Il y aurait sans doute des possibilité avec les pseudo-éléments :before et :after mais pas compatible avec IE toute version confondue.
Sinon essayer même si c'est un peu du bricolage avec un background
placé comme il faut en fond de <p> pour le guillemet ouvrant
et un background en fond de blockquote pour le guillemet fermant.

Non toutes vos réponses ne répondent pas à ma question...

D'accord c'est une lecture un peu rapide de ton post...
Ce n'est pas possible tout simplement parcequ'une image html
ne peut être qu'un quadrilatère et non une forme précise.
Le html est pas encore au niveau de la mise en page print.

guilhem_mdg a écrit :
Non toutes vos réponses ne répondent pas à ma question...

Je crains qu'il n'y ait pas de réponse, à vrai dire.
Un aperçu du type d'effet que tu voudrais créer ?

Florent V. a écrit :
Au passage :
http://fr.wikipedia.org/wiki/Faux-texte

Encore mieux, ici tu peux générer la quantité de texte que tu veux, en paragraphes, mots ou même en liste.
Modifié par Mikachu (24 Jan 2007 - 16:32)

Salut,

Une solution (avant de vous poser mes pbs !) ... si j'ai compris la demande, évidemment.

Ce que tu cherches à faire > c'est ça ?

Sinon, pour ceux qui cherchent du faux-texte original (il me semble que ce n'était pas le sujet) et qu'on peut faire soi-même, bienvenue chez les Corsaires avec La Machine à BoloBolo

Talisker merci beaucoup pour ta réponse c'est exactement ça que je cherche à faire... C'est top !
Merci également d'avoir précisé que les réponses envoyées étaient un peu hors sujet... D'où mon déviement sur d'autres forums plus intéressants...
Cordialement.
EDIT : N'est-il pas possible de mettre le

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

à la fin ? (car mon texte est dynamique via une bdd)
Modifié par guilhem_mdg (26 Jan 2007 - 09:25)

guilhem_mdg a écrit :
D'où mon déviement sur d'autres forums plus intéressants...

Quel tact.

Dommage de faire ce genre de remarques, je doute que ça donne envie aux membres du forum de te répondre...

guilhem_mdg > ravi de t'avoir été utile.

Mais comme s'est plu à le souligner Julien Royer, tu aurais pu faire l'économie de cette remarque

Quoi qu'il en soit, et pour poursuivre le débat de façon constructive :

• concernant le span de fin, j'avoue ne m'être pas posé trop de questions et été plus préocupé par l'habillage en faisant cet essai. Il doit y avoir moyen d'améliorer ça... allez ! bosse un peu !

Par ailleurs, j'ai mis en ligne un autre principe, qui permet, via un Javascript léger, de formater un blockquote, à la manière de ce qu'on fait dans la presse (citation). J'ai pensé que cela pouvait intéresser du monde. Examinez le code source pour comprendre...
Il ne serait pas très compliqué de modifier ce principe pour y adjoindre des guillemets. C'est > ici

Enjoy.

Talisker a écrit :
concernant le span de fin, j'avoue ne m'être pas posé trop de questions et été plus préocupé par l'habillage en faisant cet essai.

Essai de démonstration qui pose un problème important : que se passe-t-il si on agrandit le texte ? C'est simple : le span « remonte », et les guillemets fermant se retrouvent dans le texte, et non plus à la fin.

À ma connaissance, il n'existe pas de moyen pour obtenir exactement l'effet voulu.

Talisker a écrit :
Par ailleurs, j'ai mis en ligne un autre principe, qui permet, via un Javascript léger, de formater un blockquote, à la manière de ce qu'on fait dans la presse (citation). J'ai pensé que cela pouvait intéresser du monde. Examinez le code source pour comprendre...
Il ne serait pas très compliqué de modifier ce principe pour y adjoindre des guillemets. C'est > ici

Ma foi, ça m'a l'air très intéressant cette petite technique.

Un exemple de chose simple à faire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Nouvelle page</title>
	<meta name="description" content="" />
	<link rel="stylesheet" type="text/css" media="screen" href="" />
	<style type="text/css">
	blockquote span.guillemet {
		font-size: 4em;
		color: red;
		line-height: .5em;
	}
	blockquote span.debut {
		vertical-align: baseline;
	}
	blockquote span.fin {
		vertical-align: top;
	}
	</style>
</head>

<body>
	<blockquote><p><span class="guillemet debut">«</span> Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. <span class="guillemet fin">»</span></p></blockquote>
</body>
</html>

Rendu :

Hello,

Sur mon blog (bah, l'adresse n'a aucun intérêt vu que je vais changer de nom de domaine), le design qui a été fait pour moi sur mesure proposait des guillemets qui encadrent les blockquote.

L'avantage du code CSS que je propose est qu'il n'utilise pas de balises <span> :

/* Block de citation */
blockquote { 
	quotes: "\00AB" "\00BB";
	padding: 0 1.5em;
	background: transparent;
	border-left: 1px solid #ddd;
	color: #000;
	text-indent: 1.7em;
	text-align: justify;
	margin: 1em 40px;
 }
blockquote p { padding: 0; margin:0; }
blockquote:before { 
	content: open-quote '...';
	font-weight: bold; 
	margin-top: -0em;
	margin-left: -1.6em;
	margin-bottom: 0.3em;
	float: left;
	color: #F78A2B;
	font-size: 200%;
	height: 1px;
	display: block;
	text-align: left;
	line-height: 1em;
}
blockquote:after { 
	content: '... 'close-quote; 
	font-weight: bold;
	margin-top: -1em;
	margin-right: -0.7em;
	display: block;
	text-align: right;
	color: #f78a2b;
	font-size: 200%;
	border-right: 1px solid #333;
	border-bottom: 1px solid #999;
}

À toi de l'adapter pour ton usage perso

Dommage de faire ce genre de remarques, je doute que ça donne envie aux membres du forum de te répondre...

Désolé pour cette remarque directe mais pourtant si proche de la réalité de chacun... Quand les réponses sont hors sujets, pourquoi continuer à surveiller le topic ?
Bon cela étant, Alsacreations est un super forum que j'utilise depuis de nombreuses années ! Et dont je continuerai à me servir...
Sur ce, je vous souhaite une très bonne journée !
Edit : Merci à tous les autres pour vos réponses, très concrètes et qui répondent bien à ma question lol
Modifié par guilhem_mdg (29 Jan 2007 - 09:23)