28172 sujets

CSS et mise en forme, CSS3

[Résolu] Gros guillemets

Bonsoir
Mon problème est que je ne parviens pas à obtenir l'image de droite en pur CSS. Le mieux que j'obbtiens avec :before et after est l'image de gauche, donc je suis très loin du but.
Les margin et padding des :before et :after n'ont pas l'air d'avoir un effet quelconque.
http://paralletes.free.fr/tests/photo/citation.png
mon css: 

.quote {
	
}
.quote p:before{
	display:inline;
	content:'“';
	font-size:4em;
	padding:0;
	margin:-0.25em 0.25em -0.5em 0;
}
.quote p:after{
	display:inline;
	content:'”';
	font-size:4em;
	padding:0;
	margin:0;
} */
.quote p{
	display:inline;
}

Je suis pourtant certain qu'on doit pouvoir faire cela sans image et balises superflues dans le HTML, mais comment?
Merci de votre aide
Modifié par PapyJP (07 Nov 2015 - 18:41)
Les padding et margin ne sont pas vraiment applicable sur un element formater en "inline", un inline-block permet de modifier le contexte de formatage et d'appliquer les marges internes/externes.

as tu essayer de mettre les pseudos en display:block et text-align:right pour after ? Smiley smile

quel est le HTML ?
Modifié par gc-nomade (07 Nov 2015 - 19:38)
Bonjour,
J'avais utilisé le code ci-dessous pour un petit test perso.
Fonctionne sous Firefox (à voir sur d'autre navigateurs).
Attention du réglage du décalage des guillemets en EM... peut vite devenir inesthétique.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
blockquote
{
margin:2em 4em;
font-style:italic;
}
blockquote:before
{
position:relative;
top:0.2em;
padding-right:0.4em;
font-size:1.6em;
font-weight:bold;
content:"\201C";
}
blockquote:after
{
position:relative;
top:0.2em;
padding-left:0.1em;
font-size:1.6em;
font-weight:bold;
content:"\201D";
}
</style>
</head>
<body>

<p>Donec eu metus hendrerit, sagittis ipsum consectetur, venenatis eros. Interdum et malesuada fames ac ante ipsum 

primis in faucibus. Aenean convallis mattis ipsum non consequat. Vivamus eget eros ultricies, placerat neque a, 

sodales libero. Mauris urna dolor, lobortis nec suscipit vitae, placerat at urna. In velit sapien, sollicitudin non 

nisi vel, porta porta nunc. Nulla facilisi. Ut finibus aliquet faucibus. Ut purus sem, gravida a massa et, 

vestibulum egestas ex. Donec hendrerit mauris ut magna pharetra, dignissim imperdiet urna sagittis. Pellentesque 

aliquet ante id erat dapibus aliquam. Donec molestie felis at mauris commodo, iaculis ornare augue efficitur. 

Praesent lacus lorem, vehicula nec pharetra quis, malesuada vitae lectus. Aliquam luctus, purus vel suscipit 

scelerisque, neque magna mollis leo, nec feugiat leo urna eu orci. Nullam tempor, nisi vitae venenatis congue, diam 

lorem pulvinar metus, et commodo ligula tortor vel dolor. Aliquam quis euismod urna.</p>

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque neque sit amet iaculis 

faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis magna quis lacus volutpat 

efficitur. In turpis sem, suscipit quis interdum quis, auctor ut erat. Curabitur posuere nisi et imperdiet 

condimentum. Nunc nisl sapien, imperdiet a libero eu, posuere sagittis sapien. Donec non rutrum nisi. Proin erat 

turpis, mollis eu fringilla eget, ornare non elit.</blockquote>

<p>Pellentesque hendrerit suscipit quam, in commodo felis faucibus vitae. Proin imperdiet feugiat sagittis. 

Praesent lacinia neque nec tellus porttitor, rhoncus dignissim purus vulputate. Sed pretium ex non ligula laoreet 

suscipit. Quisque ante orci, molestie ac sapien id, vulputate aliquam leo. Suspendisse eu finibus ex, non efficitur 

nibh. Donec quam diam, aliquet vitae odio id, maximus convallis massa. Integer fringilla augue in venenatis 

venenatis. Vivamus egestas erat non hendrerit dignissim. Praesent sit amet congue orci.</p>

</body>
</html>
gc-nomade a écrit :
Les padding et margin ne sont pas vraiment applicable sur un element formater en "inline", un inline-block permet de modifier le contexte de formatage et d'appliquer les marges internes/externes.

Oui, ça j'ai bien compris (pour une fois!!)

gc-nomade a écrit :

as tu essayer de mettre les pseudos en display:block et text-align:right pour after ? Smiley smile

je pense avoir essayé ça, mais trop tard aujourd'hui pour recommencer les tests, je verrai demain soir en rentrant chez moi.
gc-nomade a écrit :

quel est le HTML ? 


<section class="docSection">
	<div class="insert width25 left quote">
		<p>Il convient d'être très  prudent en pareille matière et de ne pas songer encore à atteindre à la connaissance parfaite des conceptions religieuses  antiques, même en avancant à l'appui d'une thèse les arguments les plus convaincants en apparence.<br>Gustave Jéquier</p>
	</div>		
</section>

Il y a une grande page de CSS qui définit entre autres les classe docSection, width25 (with:25%;) left (float:left;) insert (inline-block avec fond coloré), rien de bien compliqué. La classe quote est décrite plus haut.
L’objectif c'est que les utilisateurs aient un jeu de classes et puissent s'en servir sans mon intervention, comme du lego, et sans avoir à écrire eux mêmes du CSS, langage dangereux comme chacun sait.

@sepecat
Merci de ta réponse, il me faut plus de temps pour assimiler. Je suis claqué et je dois partit tôt demain matin. Je regarderai à mon retour.

Bonne nuit
salut,
il s'agit d'un line-height trop grand. De plus, le vertical-align n'est pas celui qui correspond pour avoir l'effet escompté.
Donc on pourrait réduire le line-height des pseudo-éléments et passer le vertical-align à "bottom".

Pour les méthodes plus radicales, on peut faire ça aussi via un positionnement absolue contrôlé.
a écrit :
il s'agit d'un line-height trop grand. De plus, le vertical-align n'est pas celui qui correspond pour avoir l'effet escompté. Donc on pourrait réduire le line-height des pseudo-éléments et passer le vertical-align à "bottom".

Effectivement.

* {
	font: 24px/1.5 Verdana;
	padding: 0;
	margin: 0;
}

p {
	background-color: gold;
	width: 400px;
	padding: 10px;
	border: 1px solid silver;
	margin: 10px auto
}

p:before {
	content: "“"
}

p:after {
	content: "”"
}

p:before, p:after {
	font-size: 48px;
	line-height: 18px;
	vertical-align: bottom;
}

<p>Le stellarator (de stellar : stellaire, et generator : générateur) est un dispositif destiné à la production de réactions contrôlées de fusion nucléaire proche du tokamak.</p>

Sorry, pas pu joindre d'image.
Modifié par thierry (08 Nov 2015 - 19:39)
Merci à tous
Voici ce que je suis parvenu à faire à partir de la solution de Thierry
http://paralletes.free.fr/tests/photo/citation2.png
Compte tenu des spécificités de la police de caractères utilisée, j'ai dû réduire line-height à 2px;

.quote p:before {
	content:'“\2005'; /* très petit espace après le guillemet pour compenser  le padding 0 du paragraphe */
}
.quote p:after {
	content:'”'; /* pas besoin d'espace avant ??? */
}
.quote p:before, .quote p:after {
	font-size: 36px;
	line-height: 2px;
	vertical-align: bottom;
	padding:0;
}
Curieux.

Chez moi, avec mon code, ça marche sur Chrome.
Modifié par thierry (09 Nov 2015 - 13:59)
thierry a écrit :
Curieux.

Chez moi, avec mon code, ça marche sur Chrome.

Je m'en doute bien. Tu peux regarder s'il n'y a pas une énormité que je ne vois pas?
Bonjour,

J'ai testé avec un line-height de 2px sur Chrome, ça marche toujours. ce n'est donc pas ça.

Tout ce que je vois, c'est que dans mes content, j'ai juste les caractères “ et ”.

p:before {
	content: "“"
}

p:after {
	content: "”"
}

Ce pourrait-il être ça ? Je ne sais pas Smiley decu

Bonne continuation.
Modifié par thierry (11 Nov 2015 - 11:38)
Bingo!
C'est effectivement ça.
Je peux mettre 

.quote p:before {
	content:'“ ';
}

Ça marche également si je remplace l'espace par \a0 (alias &nbsp;)
mais si je remplace l'espace par \202F ou \200A ça marche sur FireFox mais pas sur Chrome
Le problème est qu'un espace est trop large pour ce que je veux faire.

Si je mets un padding-left sur <p> l'espacement se met avant le guillemet gauche.
Si je mets un padding-right sur p:before il est inopérant.

Une idée sur la façon de contourner ce problème?
Bonjour,

Perso, j'arrive à mettre un padding aux pseudos-contenus sans problème et sans devoir les mettre en inline-block.

De toute façon, pour info, il ne faut normalement pas d'espace à l'intérieur des guillemets anglais.

Bonne continuation.
thierry a écrit :
Bonjour,

Perso, j'arrive à mettre un padding aux pseudos-contenus sans problème et sans devoir les mettre en inline-block.

De toute façon, pour info, il ne faut normalement pas d'espace à l'intérieur des guillemets anglais.

Bonne continuation.


voici un dessin pour que tu visualise l'incidence avec des padding et margin sur une boite en ligne sans contexte de formatage et avec : http://codepen.io/anon/pen/pjQBGd
Merci à tous
1) concernant le fait de ne pas mettre d'espace après ou avant des "guillemets anglais", le problème n'ést pas là : le texte du paragraphe mord sur le "gros guillemet" de gauche si je ne mets pas d'espacement. Cela semble lié aux particularités du caractère "double guillemet gauche" de cette police de caractères
2) après divers essais de "display", et sans que je comprenne très bien le pourquoi du comment et le comment du pourquoi, j'ai trouvé quelque chose qui a l'ai assez simple et de fonctionner:

.quote {                        /* le bloc "aside" qui contient la citation */
	margin-top:0;
}
.quote.left{
        float:left;
	margin-right:0.5em;
}
.quote.right {
        float:right;
	margin-left:0.5em;
}
.quote p:before {
	content:'“';
	margin-right:0.25em;
}
.quote p:after {
	content:'”';
}
.quote p:before, .quote p:after {
	font-size:3.0em;
	line-height: 2px;
	vertical-align: bottom;
}

Je crois qu'on peut considérer que c'est "vraiment résolu"... jusqu'à la prochaine!!!
Modifié par PapyJP (12 Nov 2015 - 12:23)
Sujet clos
Aller à