Entourer un texte par 2 images
yoyo
-
yoyo -
yoyo -
Bonjour,
Je fais appel à vos lumières pour une idée que je n'arrive pas à mettre à plat.
Je voudrais, pour un site internet, écrire des citations, et que celles ci soient entourées de guillemets.
Mais là ou ca se complique c'est que je voudrais des Jpg de guillemets ( un gauche et un droite) .
ce qui donnerait ca :
<img guillemets gauche> Qui vole un oeuf vole un boeuf<img guillemets droite>
Seulement chaque citation n'ayant pas la même longueur, et certaines, s'etendant sur plusieurs lignes, je n'arrive pas avec les float à encadrer toutes les citations proprement.
par ex :
<img guillemets gauche> Qui vole un oeuf vole un boeuf blablablablablablablablablablablablablablablablblablabla<img guillemets droite( sur la deuxieme ligne)>
Avez vous quelques pistes ?
Merci de m'avoir lu
Je fais appel à vos lumières pour une idée que je n'arrive pas à mettre à plat.
Je voudrais, pour un site internet, écrire des citations, et que celles ci soient entourées de guillemets.
Mais là ou ca se complique c'est que je voudrais des Jpg de guillemets ( un gauche et un droite) .
ce qui donnerait ca :
<img guillemets gauche> Qui vole un oeuf vole un boeuf<img guillemets droite>
Seulement chaque citation n'ayant pas la même longueur, et certaines, s'etendant sur plusieurs lignes, je n'arrive pas avec les float à encadrer toutes les citations proprement.
par ex :
<img guillemets gauche> Qui vole un oeuf vole un boeuf blablablablablablablablablablablablablablablablblablabla<img guillemets droite( sur la deuxieme ligne)>
Avez vous quelques pistes ?
Merci de m'avoir lu
A voir également:
- Entourer un texte par 2 images
- Supercopier 2 - Télécharger - Gestion de fichiers
- Des images - Guide
- Mettre un texte en majuscule - Guide
- Extraire texte d'une image - Guide
- Texte barré whatsapp - Guide
2 réponses
Il faut mettre les images en bakground. L'une déclarée dans blockquote (le guillemet de fin de citation) et l'autre dans p (le guillemet de début de citation).
CSS :
Voilà pour le principe. Évidemment ce code est à compléter/modifier par des marges ou un positionnement plus fin en % selon l'effet désiré.
<blockquote> <p>citation</p> </blockquote>
CSS :
blockquote {
background:url(guillemet-droit.png) no-repeat right bottom;
}
blockquote p {
background:url(guillemet-gauche.png) no-repeat left top;
}
Voilà pour le principe. Évidemment ce code est à compléter/modifier par des marges ou un positionnement plus fin en % selon l'effet désiré.
Salut notobe,
merci pour cette piste.
Je cherchais en fait une idee script qui adapterait la taille du paragraphe ou justement de ces marges, en fonction de la taille de la citation.
Parce que, et je n'ai pas été super clair j'avoue, les citations seraient posté par les internautes, et récupérée dans une base de données.
Je ne comptais pas adapter les marges à chaque fois manuellement mais essayait de reflechir à une fonction qui pourraient les adapter directement.
merci pour cette piste.
Je cherchais en fait une idee script qui adapterait la taille du paragraphe ou justement de ces marges, en fonction de la taille de la citation.
Parce que, et je n'ai pas été super clair j'avoue, les citations seraient posté par les internautes, et récupérée dans une base de données.
Je ne comptais pas adapter les marges à chaque fois manuellement mais essayait de reflechir à une fonction qui pourraient les adapter directement.
