Problèmes de placement et de dimensions

Version imprimable

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.

Les espaces, aka les paddings, verticaux avant et après la citation ne correspondent pas à 2%.
Le guillemet fermant déborde à gauche du corps du texte.

Comment résoudre ces deux soucis ?

Code:

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>

03/05/2012, 14h54
elfamine

Bonjour,

Quelqu’un qui a l'habitude de travailler avec % pourra certainement me corriger mais à ma connaissance ces 2% vont correspondre à la haute du conteneur du blockquote : donc 2% du height du body et donc ca va dépendre de la résolution de l’écran.

En ce qui concerne le guillemet fermant qui déborde. quand je fais le test de mon coté ca s'affiche de cette facon :
http://i.imgur.com/aOAcW.png

Je pense qu'il est sensé s'afficher de cette façon non ? :aie:
03/05/2012, 15h36
rambc

Merci pour ta réponse. Je vais étudier cela un peu plus en détail ce weekend.

Concernant ta capture d'écran, on voit bien que les espacements à gauche et droite sont différents. Ceci rejoint peut-être ta remarque...

Bonjour,
je suis finalement arrivé à la solution suivante qui me semble acceptable.

Code:

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">
/* Sources :
    + http://www.designmeme.com/tutorials/csscurlyquotes/
    + http://auriza.site40.net/notes/webdev/css-curly-quotes-without-images/
*/
body {
    margin: 3% 10% 3% 10%; /* top , right, bottom , left */
}
 
blockquote {
    padding: 0 4% 0 4%;
    font: italic 1em serif; 
}
blockquote:before, blockquote:after { 
    color: #69c;
    display: block;
    font-size: 350%;
    width: 7%;
}
blockquote:before { 
    content: '\201C';
    margin-left: -0.625em;
    margin-top: -0.35em;
    height: 0; 
}
blockquote:after { 
    content: '\201D';
    margin-left: 100%; 
    margin-top: -0.375em;
    margin-bottom: -0.3em;
    height: 33px; 
}
 
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>

08/05/2012, 14h45
Candygirl

Hello,

Citation:

Envoyé par Melcain

Quelqu’un qui a l'habitude de travailler avec % pourra certainement me corriger mais à ma connaissance ces 2% vont correspondre à la haute du conteneur du blockquote : donc 2% du height du body et donc ca va dépendre de la résolution de l’écran.

En faite, les margin-top, margin-bottom, padding-top et padding-bottom en % se réfèrent à la largeur du parent, pas la hauteur ;)