[HTML] text-align: justify; non pris en compte ?...

**{F-I}** · 28/03/2008, 16h01

Salut à tous,

C'est encore moi avec mon petit coin.

Je souhaite utiliser text-align: justify; pour avoir le texte durant toute la largeur de la ligne sans laisser de l'espace vide à la fin des lignes.

Mon souci c'est que je ne comprends pas pourquoi qu'il n'est pas pris en compte.

Voici le code source

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="contenu_article">
        	<table style="width: 90%; border: none">
  				<tr>
    				<td style="vertical-align:middle"><img src="images/ico_handymobil.jpg" alt="" width="102" height="102" class="image" /></td>
    				<td style="vertical-align:middle"><p><strong>Handy Mobil</strong> est une association à but non lucratif (loi de 1901), destinée à aider au déplacement des personnes à mobilité réduite, dans la région d'Annemasse et la Haute-Savoie. </p></td>
  				</tr>
                <tr>
    				<td colspan="2" class="cont_mis_tech">fgsdgdfgs ffsd gsdfg sdfggsdg sdfg sd  klmjmlk  kljlkjlkm klj ml lkjmk dfjslkdjklfmlk dgklsklgjdfklgs klmsgmjmlkjsfdmlkg sflgjkflgdl gjksdlgdklglkmdsfjgkl sdfjkl gmsdfklg sdflmgmskldgklmsdfgmfeùmglkerzlmk ùerzmgmù fxbklnsdfknqglmsqdmlfkmkqzùepogkm fdgkjkljzmekgùmlqfgkùmlqegk jdfgklùjqmrzeùj tglmqkdlmùdfg jqslmùg jrfgsdfg sdfgsfdg sdfg df</td>
  				</tr>
			</table>
		</div>

qui a pour le css suivant :

Code CSS :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	padding: 0;
	margin: 0;
}
 
body {
	margin: 0;
	padding: 0;
	background: #311C00 url(images/background_corps.jpg);
	text-align: justify;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #9B8767;
}
 
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #E8D6B4;
}
 
h2, h3 {
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	background: url(images/hr_corp_a.gif) repeat-x left bottom;
	text-transform: lowercase;
	letter-spacing: -1px;
}
 
h2 {
	font-size: 25px;
}
 
h3 {
	font-size: 17px;
	text-decoration: none;
}
 
h3 a {
	text-decoration: none;
}
 
h3 a:hover {
	text-decoration: none;
	color: #B6E13A;
}
 
p, ol, ul {
	line-height: 160%;
}
 
ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}
 
ul li {
	padding: 2px 0 5px 0;
	background: url(images/hr_col_b.gif) repeat-x;
}
 
ul li.first {
	background: none;
}
 
a {
	color: #D9C09A;
}
 
a:hover {
	text-decoration: none;
	color: #FF0000;
}
 
strong {
	color: #D9C09A;
}
 
#wrapper {
	background: url(images/background_header.jpg) repeat-x;
}
 
/* Header */
 
#zone_idef {
	float: right;
	margin-top: 10px;
}
 
#header {
	width: 730px;
	height: 250px;
	margin: 0 auto;
}
 
#header * {
	text-transform: lowercase;
	color: #FFFFFF;
}
 
#header h1 {
	float: left;
	padding: 30px 0 0 0;
	letter-spacing: -2px;
	font-size: 36px;
}
 
#header h2 {
	float: left;
	padding: 50px 0 0 6px;
	background: none;
	font-size: 12px;
	font-weight: normal;
}
 
#header h2 a {
	text-decoration: none;
}
 
#header ul {
	float: right;
	margin: 0;
	padding: 90px 0 0 0;
	list-style: none;
}
 
#header li {
	display: inline;
}
 
#header li a {
	display: block;
	float: left;
	padding: 0 15px;
	border-left: 1px solid #7DD2FA;
}
 
#header li.first a {
	border: none;
}
 
/* Content */
 
#content {
	width: 730px;
	margin: 0 auto;
}
 
#colOne {
	float: right;
	width: 500px;
}
 
#col_gauche {
	float: left;
	width: 184px;
}
 
#col_gauche h3 {
	margin-top: 10px;
	text-align: left;
}
 
/* Footer */
 
#footer {
	clear: both;
	width: 730px;
	margin: 20px auto;
	padding: 20px 0;
	background: url(images/hr_col_b.gif) repeat-x;
}
 
#footer p {
	margin: 0;
	padding: 0;
	text-transform: lowercase;
	text-align: center;
}
 
.contenu_article {
	background-color: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 5%;
	padding-right: 5%;
	width: 90%;
	overflow: hidden;
}
 
.indent {
	margin-top: 0;
	margin-left: 130px;
}
 
.image {
	margin-right: 23px;
	border: solid 2px #663300;
}
 
.cont_mis_tech {
	color: #FF0000;
	text-align: justify;
}

(je vous fournis le CSS complet au cas d'où)

Voilà et merci d'avance

**Erwan31** · 28/03/2008, 17h09

Ce n'est pas au niveau du body qu'il faut l'appliquer mais plus localement au niveau des tes paragraphes.

**{F-I}** · 28/03/2008, 21h39

Effectivement, je me suis trompé, je modifie le code source et cela ne marche toujours pas, voici le code source à jour :

Code XHMTL :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="contenu_article">
        	<table style="width: 90%; border: none">
  				<tr>
    				<td style="vertical-align:middle"><img src="images/ico_handymobil.jpg" alt="" width="102" height="102" class="image" /></td>
    				<td style="vertical-align:middle"><p><strong>Handy Mobil</strong> est une association à but non lucratif (loi de 1901), destinée à aider au déplacement des personnes à mobilité réduite, dans la région d'Annemasse et la Haute-Savoie. </p></td>
  				</tr>
                <tr>
    				<td colspan="2" class="cont_mis_tech"><span class="cont_mis_tech_p">fgsdgdfgs ffsd gsdfg sdfggsdg sdfg sd  klmjmlk  kljlkjlkm klj ml lkjmk dfjslkdjklfmlk dgklsklgjdfklgs klmsgmjmlkjsfdmlkg sflgjkflgdl gjksdlgdklglkmdsfjgkl sdfjkl gmsdfklg sdflmgmskldgklmsdfgmfeùmglkerzlmk ùerzmgmù fxbklnsdfknqglmsqdmlfkmkqzùepogkm fdgkjkljzmekgùmlqfgkùmlqegk jdfgklùjqmrzeùj tglmqkdlmùdfg jqslmùg jrfgsdfg sdfgsfdg sdfg df</span></td>
  				</tr>
			</table>
		</div>

Et le CSS qui va avec : (je mets CSS complet au cas d'où)

Code CSS :

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	padding: 0;
	margin: 0;
}
 
body {
	margin: 0;
	padding: 0;
	background: #311C00 url(images/background_corps.jpg);
	text-align: justify;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #9B8767;
}
 
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #E8D6B4;
}
 
h2, h3 {
	margin: 0 0 20px 0;
	padding: 0 0 10px 0;
	background: url(images/hr_corp_a.gif) repeat-x left bottom;
	text-transform: lowercase;
	letter-spacing: -1px;
}
 
h2 {
	font-size: 25px;
}
 
h3 {
	font-size: 17px;
	text-decoration: none;
}
 
h3 a {
	text-decoration: none;
}
 
h3 a:hover {
	text-decoration: none;
	color: #B6E13A;
}
 
p, ol, ul {
	line-height: 160%;
}
 
ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}
 
ul li {
	padding: 2px 0 5px 0;
	background: url(images/hr_col_b.gif) repeat-x;
}
 
ul li.first {
	background: none;
}
 
a {
	color: #D9C09A;
}
 
a:hover {
	text-decoration: none;
	color: #FF0000;
}
 
strong {
	color: #D9C09A;
}
 
#wrapper {
	background: url(images/background_header.jpg) repeat-x;
}
 
/* Header */
 
#zone_idef {
	float: right;
	margin-top: 10px;
}
 
#header {
	width: 730px;
	height: 250px;
	margin: 0 auto;
}
 
#header * {
	text-transform: lowercase;
	color: #FFFFFF;
}
 
#header h1 {
	float: left;
	padding: 30px 0 0 0;
	letter-spacing: -2px;
	font-size: 36px;
}
 
#header h2 {
	float: left;
	padding: 50px 0 0 6px;
	background: none;
	font-size: 12px;
	font-weight: normal;
}
 
#header h2 a {
	text-decoration: none;
}
 
#header ul {
	float: right;
	margin: 0;
	padding: 90px 0 0 0;
	list-style: none;
}
 
#header li {
	display: inline;
}
 
#header li a {
	display: block;
	float: left;
	padding: 0 15px;
	border-left: 1px solid #7DD2FA;
}
 
#header li.first a {
	border: none;
}
 
/* Content */
 
#content {
	width: 730px;
	margin: 0 auto;
}
 
#colOne {
	float: right;
	width: 500px;
}
 
#col_gauche {
	float: left;
	width: 184px;
}
 
#col_gauche h3 {
	margin-top: 10px;
	text-align: left;
}
 
/* Footer */
 
#footer {
	clear: both;
	width: 730px;
	margin: 20px auto;
	padding: 20px 0;
	background: url(images/hr_col_b.gif) repeat-x;
}
 
#footer p {
	margin: 0;
	padding: 0;
	text-transform: lowercase;
	text-align: center;
}
 
.contenu_article {
	background-color: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 5%;
	padding-right: 5%;
	width: 90%;
	overflow: hidden;
}
 
.indent {
	margin-top: 0;
	margin-left: 130px;
}
 
.image {
	margin-right: 23px;
	border: solid 2px #663300;
}
 
.cont_mis_tech {
}
 
.cont_mis_tech_p {
	color: #FF0000;
	text-align: justify;
}

Merci beaucoup d'avance

**Bisûnûrs** · 28/03/2008, 22h52

Cf FAQ :
http://xhtml.developpez.com/faq/?pag...XTE_span_align

**niklaus** · 28/03/2008, 22h59

Bonjour,

C'est au niveau des cellules qu'il faut l'appliquer :

Soit dans le code HTML
<td style="vertical-align:middle; text-align: justify;">

ou dans les CSS

table td {
text-align: justify;
}

Niklaus

**Erwan31** · 29/03/2008, 00h16

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="cont_mis_tech_p">fgsdgdfgs ffsd gsdfg sdfggsdg sdfg sd  klmjmlk  kljlkjlkm klj ml lkjmk dfjslkdjklfmlk dgklsklgjdfklgs klmsgmjmlkjsfdmlkg sflgjkflgdl gjksdlgdklglkmdsfjgkl sdfjkl gmsdfklg sdflmgmskldgklmsdfgmfeùmglkerzlmk ùerzmgmù fxbklnsdfknqglmsqdmlfkmkqzùepogkm fdgkjkljzmekgùmlqfgkùmlqegk jdfgklùjqmrzeùj tglmqkdlmùdfg jqslmùg jrfgsdfg sdfgsfdg sdfg df</span>

Ce n'est pas avec un <span> qu'il faut baliser ce code mais un <p>.
Un span sert essentiellement à spécifier localement le style CSS désiré sur
un groupe de mots et un mot en particulier...

D'autre part comme le souligne Bisounours via un lien vers la FAQ, la propriété text-align ne s'applique pas aux éléments en-ligne (strong, em, span, a...) mais aux éléments de niveau bloc.

**{F-I}** · 29/03/2008, 01h06

Envoyé par Erwan31

Ce n'est pas au niveau du body qu'il faut l'appliquer mais plus localement au niveau des tes paragraphes.

Envoyé par Erwan31

[CODE]D'autre part comme le souligne Bisounours via un lien vers la FAQ, la propriété text-align ne s'applique pas aux éléments en-ligne (strong, em, span, a...) mais aux éléments de niveau bloc.

Ta première citation dit qu'il faut appliquer au niveau des paragraphes et ton deuxième dit le contraire, qu'il faut appliquer au niveau des blocs...

J'ai rien compris :s

Envoyé par Bisûnûrs

Cf FAQ :
http://xhtml.developpez.com/faq/?pag...XTE_span_align

J'ai testé cela et ça n'a pas marché avec moi

Envoyé par niklaus

C'est au niveau des cellules qu'il faut l'appliquer :

Soit dans le code HTML
<td style="vertical-align:middle; text-align: justify;">

J'ai testé cette solution, sous editeur HTML je vois bien et que c'est parfait mais lorsque je sauvegarde pour vérifier avec mon firefox, cela ne marche pas :s

Je joints les 2 fichiers au cas d'où vous voulez les avoir pour regarder.

Merci d'avance

**Erwan31** · 29/03/2008, 02h29

Envoyé par {F-I}

Ta première citation dit qu'il faut appliquer au niveau des paragraphes et ton deuxième dit le contraire, qu'il faut appliquer au niveau des blocs...

Un <p> est un élément de niveau block donc il n'y a rien de contradictoire ici.
La seule contradiction est que le body est un élément de bloc et que cette propriété s'applique donc à cet élément mais je te le déconseillerais, puisqu'on applique rarement ou jamais une justification sur la totalité des textes d'une page, c'est en général trop risqué.

Sur ton exemple la propriété text-align est bien appliquée mais certains espace intermot sont excessif à cause de la longeur anormale de certain morceaux de texte.
Pour régler précisément l'espace intermot, utiliser la propriété word-spacing.

[HTML] text-align: justify; non pris en compte ?...

HTML

Vue hybride

Discussions similaires

Partager

Partager