[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.

**{F-I}** · 29/03/2008, 07h27

J'ai du mal à comprendre, quelle est la différence entre text-align: justify et word-spacing

Bizarrement j'ai essayé de réduire un peu le nombre de caractère chacun des mots et j'ai recommencé à essayer avec text-align: justify pour voir. Surprise cela marche...

J'ai cherché partout dans mes disques durs et j'ai enfin retrouvé les coordonnées pour me connecter au FTP chez 1&1 (gratuit commandé qu'il y a je crois 2 ans :p jamais servi)

Bon, voici le site en ligne juste config-gw et la page en question.
Chose qui va faciliter nos échanges données pour une meilleure entraide...

Au fait information supplémentaire, j'envisage avoir une liste (ul li /li li /li /ul) dans la même partie d'où j'essaie d'avoir text-align: justify, je suppose que je suis très mal parti...

Auriez-vous un conseil à me donner ?

Merci beaucoup

**niklaus** · 29/03/2008, 08h48

Salut F-I,

Difficile de suivre cette conversation avec tous ces post. J'ai bien tenté de regarder ton fichier CSS que tu donnes plus haut et j'ai vu que le text-align: justify est toujours sur le body et non sur le TD.

A part cela, pour poursuivre la conversation, peut-on se brancher à l'adresse http://www.config-gw.info/siteinternet.php ?

Un peu de lecture:
word-spacing:
Définit l'epace entre les mots. La valeur spécifiée s'ajoute à l'espacement standart. Ne pas confondre la propriété word-spacing: avec letter-spacing: qui définit quand à elle l'espacement entre les lettres.
text-align: justify:
Justifier (à la façon des articles de journaux, textes en colonnes). Cela tient compte des marges me semble-t-il. Suis-je clair et compréhensible ?

Concernant ta question sur ta liste dans la partie class="contenu_article", tu fais le bon choix s'il s'agit d'une liste. Après il s'agit simplement de mises en forme. Pourquoi cette hésitation ?
Niklaus

PS: je pense qu'il serait plus compréhensible pour tous si tu préciserais le nom des class au lieu de partie, trucs, machin bidule. Si non moi je m'y perds un peu

**{F-I}** · 29/03/2008, 10h21

Envoyé par niklaus

A part cela, pour poursuivre la conversation, peut-on se brancher à l'adresse http://www.config-gw.info/siteinternet.php ?

Tu veux dire qu'on peut discuter en utilisant cette adresse ?
> Naturellement, j'ai mis exprès afin de faciliter les échanges.

Envoyé par niklaus

Un peu de lecture:
...........................
Suis-je clair et compréhensible ?

Oui je comprends mieux la différence entre word-spacing et text-align.

Concernant mon class="contenu_article", je voulais préparer le contenu c'est à dire définir les padding, la largeur et la couleur du fond afin d'insère proprement les articles à venir. Je n'hésite rien du tout.

Mais comme que cela ne suffit pas puisqu'il y a aussi des tr et td, chacun ont des règles à respecter indépendante (par exemple la première tr, à gauche une image et à droite un texte, le deuxième uniquement texte)

Suis-je assez clair ? (je sais que j'ai des soucis avec mon français)

Et voici l'aperçu final que j'essaie d'obtenir avec vos aides :

A savoir que le texte "blabla" j'aimerais bien que ce soit word-spacing et que la liste soit à gauche comme qui va la logique.

En espérant vous avoir éclairé mes requetes

**niklaus** · 29/03/2008, 16h54

Pour faire propre, c'est à dire séparer le contenu (HTML) de la mise en page (CSS), voici ma proposition:

Remplace <div class="contenu_article"> par celui-ci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="contenu_article">
<img src="images/ico_handymobil.jpg" alt="" />
 
<p><strong>BLA BLA</strong> fdsgdsfg dsfg dfsg dfg ds dfg dsfg dsfg sdfgdsfhgsfh fdsfg dsfg sdfgsdfg dsfd gdfg fsdg sdfgdfg fgsdfg sdfg gsdfg sfgd gsdf gsdfg sdf gsdf gsfd gsdggdfgdfgd sfdgd </p>
 
<p>fgsdgdfgs ffsd gsdfg sdfggsdg sdfg sd  klmjmlk  kljlkjlkm klj ml lkjmk dfjslkdjklfmlk dgkl sklgjdfklg s klmsgmjm lkjsfdml kg sflgjkflg dl gjksdlg dklglkmd sfjgkl sdfjkl gms dfklg sdflmgmskl dgklm sdfg mfeù glkerzl k ùerzmgmù fxbklnsdfk nqglmsqd mlfkmkqz ùepogkm fdgk jkljz mekgù m lqfgk ùmlqegk jdfgklùj qmrzeùj tglmq d lmùdfg jqsl mùg jrfgsdfg sdfgsfdg sdfg df</p>
 
<ul>
	<li>liste1</li>
	<li>liste2</li>
	<li>...</li>
</ul>
</div>

remplace dans ton fichier design.css

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
.contenu_article {
	background-color: #fff;
	padding: 20px 5%;
	width: 90%;
	overflow: hidden;
}
.contenu_article img {	 
	width: 102px;
	height: 102px;
	float: left;
	margin-right: 23px;
	border: solid 2px #663300;
}
.contenu_article p {	 
	text-align: justify; 
}
+ enlever class .image

Maintenant tu peux définir des class pour les balises "P" et "UL" en fonction de tes besoins. Tiens-moi au courant.
Niklaus

PS: N'oublie pas aussi de remplir le contenu alternatif des images (alt="")

**{F-I}** · 30/03/2008, 23h49

Pour le moment je le mets à côté, temps que je recodes quelques choses afin d'avoir un code source plus propre et plus clair.

Merci beaucoup aux ceux qui ont essayé de m'aider

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

HTML

Discussions similaires

Partager

Partager