Bonjour,
je suis en train d'essayer d'adapter un code pour créer de jolis blocs pour des citations.

J'en suis pour le moment au stade ci-dessous. Je me heurte à deux problèmes.
  1. Les espaces, aka les paddings, verticaux avant et après la citation ne correspondent pas à 2%.
  2. Le guillemet fermant déborde à gauche du corps du texte.


Comment résoudre ces deux soucis ?

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Une mise en forme jolie des citations</title>
 
        <style type="text/css">
/* Source :
    + http://www.designmeme.com/tutorials/csscurlyquotes/
*/
body {
    margin: 3% 10% 3% 10%; /* top , right, bottom , left */
}
 
blockquote {
    display: block;
    padding: 2% 0% 2% 0%;
    width: 86%;
}
blockquote:before, blockquote:after {
    color: #69c;
    display: block;
    font-size: 400%;
    width: 7%;
}
 
blockquote:before {
    content: '\201C';
    height: 0;
    margin-left: -0.5em;
}
 
blockquote:after {
    content: '\201D';
    height: 35px;
    margin-top: -28px;
    margin-left: 100.5%;
}
 
blockquote div.author{
    text-align:right;
    font-size: 95%;
}
blockquote div.title{
    text-align:right;
    font-size: 95%;
}
blockquote div.editor{
    margin-top: 0.5%;
    text-align:right;
    font-size: 85%;
}
        </style>
    </head>
 
    <body>
	<p>
            La citation du jour...
 
            <blockquote>
                <p>
		    Le but de l'homme moderne sur cette terre est à l'évidence
		    de s’agiter sans réfléchir dans tous les sens, afin de pouvoir
		    dire fièrement, à l'heure de sa mort :
		    « Je n'ai pas perdu mon temps. ».
		</p>
		<div class="author">Pierre Desproges</div>
		<div class="title">"La Minute nécessaire de monsieur Cyclopède"</div>
		<div class="editor">Éditions du Seuil</div>
	    </blockquote>
 
	    Bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
	    bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
	    bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
	    bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
	    bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
	    bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
	    bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
	    bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
	    bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,
	    bla, bla, bla, bla, bla, bla, bla, bla, bla, bla,...
	</p>
    </body>
</html>