28172 sujets

CSS et mise en forme, CSS3

Conserver la justif après un retour à la ligne manuel

Bonsoir,
Dans mon fichier, comment faire un retour à la ligne (à partir du texte "retour à la ligne" en gras dans mon exemple) et conserver la justif.
La propriété text-align: justify; ne suffit plus...

Voici mon exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans titre</title>
<style>
#footer
{
	height: 62px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 12px;
	text-align: justify;
	width: 940px;
}
</style>
</head>

<body>
<div id="footer"> nostrud elit at lobortis euismod aliquam praesent delenit wisi, facilisis tincidunt vero. Eum accumsan magna dolor crisare nonummy luptatum.<strong>Retour à la ligne</strong> molestie facilisis exerci. Volutpat accumsan, duis nulla augue accumsan nulla crisare sed consequat delenit commodo. Esse illum duis consequatvel amet consequat tation. Tincidunt et molestie enim, facilisi ullamcorper nulla commodo, eros exerci esse exerci praesent duis facilisi.</div>
</body>
</html>
avec une balise 
<br />
(qui est auto-fermante, alors ne pas oublier le "/" avant la fermeture de la balise)

Mais habituellement (tout dépend de ton utilisation finale et de la logique de ton retour à la ligne), il vaut mieux séparer deux sections de texte en les disposant tous dans dans des paragraphes différents en utilisant la balise de paragraphe:

<p>un paragraphe</p>
Désolé mais aucune des deux solutions ne fonctionne, ni <br/> ni <p/>
J'avais essayé ces options en premier. En fait il faudrait une option qui force la justif... et ça je ne connais pas Smiley confus
Cela dit, j'ai fait peut-être une mauvaise manip, si tu penses que ça fonctionne, ce serait super que tu reprennes mon exemple ... Smiley smile
Et si tu cible directement les paragraphes?


#footer p{
   /* tes règles css */
}


En tout cas, chez moi ça marche avec ton code de base, même sans <br/> et sans paragraphe... Peut-être que tu ne vois pas l'alignement parce que tu n'as pas mis assez de texte et que ton bloc div est trop large ce qui ne donne pas plus que deux lignes de texte.
Modifié par Vaxilart (04 Sep 2010 - 02:29)
Salut,

j'ai peut-être mal compris ce que tu veux faire mais il me semble que tu fais une confusion : le text-align:justify va effectivement modifier l'espacement des mots pour "coller" aux bords droit et gauche mais seulement pour les lignes suffisamment longues qui sont renvoyées à la ligne par manque d'espace dans leur conteneur. Donc pour un très long texte la dernière ligne sera calée à gauche et il en sera de même si le texte est trop court.
Salut

D'abord je resterais dans le sens de l'héritage : tu peux donc écrire « div { text-align:justify; } ».
Mais Vaxilart a entièrement raison de te parler de la balise « p ». On parle de sémantique ici. La balise « div » étant d'abord et avant tout un container non pas une balise de paragraphe.

Voici un exemple de code mais selon ton code à toi. Il n'y a pas de « p » ici.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans titre</title>
<style>
#footer
{
	height: 62px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 12px;
	text-align: justify;
	width: 940px;
	
}
span#retourLigne { color:#333; display:block }
strong { color:#ff0000; }
</style>
</head>

<body>
<div id="footer">nostrud elit at lobortis euismod aliquam praesent delenit wisi, facilisis tincidunt vero. Eum accumsan magna dolor crisare nonummy luptatum.<span id="retourLigne"><strong>Retour à la ligne</strong> molestie facilisis exerci. Volutpat accumsan, duis nulla augue accumsan nulla crisare sed consequat delenit commodo. Esse illum duis consequatvel amet consequat tation. Tincidunt et molestie enim, facilisi ullamcorper nulla commodo, eros exerci esse exerci praesent duis facilisi. molestie facilisis exerci. Volutpat accumsan, duis nulla augue accumsan nulla crisare sed consequat delenit commodo. Esse illum duis consequatvel amet consequat tation. Tincidunt et molestie enim, facilisi ullamcorper nulla commodo, eros exerci esse exerci praesent duis facilisi.</span></div>
</body>
</html>

Et les résultats en image : ici

Remarque que j'ai presque conserver ton code. Mais comme le dit Vaxilart, vaut mieux que tu respecte la sémantique. Donc tu devrais utiliser « p à l'intérieur de div ». Mais le code reste identique.

Peut importe la longeur de la première ligne ton retour à la ligne est effectif.

++
Modifié par zardoz (04 Sep 2010 - 03:02)
Hello

Tu peux l'écrire comme ceci aussi avec la notion d'héritage « du parent div »

div { text-align:justify; }
#footer
{
	height: 62px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 12px;
	width: 940px;
	
}
span#retourLigne { color:#333; display:block }
strong { color:#ff0000; }

J'ai repris le code : il me manquait une ligne au copier/coller.
Ce sont les mêmes résultats : on gère l'héritage du parent : « div ».

++
Modifié par zardoz (04 Sep 2010 - 03:07)
ok mais dans ton exemple, la première ligne reste alignée à gauche et c'est bien elle que je souhaiterais voir justifiée.
Un span avec display:block, j'avais essayé aussi... Smiley ohwell
Salut

Dans ce sens non impossible de justifier la première ligne: un text-indent peu être utile mais je ne suis pas sûr que tu puisses avoir le contrôle absolu des résultats. Cependant il y a plusieurs façons de faire avec « p » et « l'inter lignage » en particulier, que je crois possible.

++
En fait, j'ai aussi testé l'interlettrage pour augmenter un peu la longueur de ma ligne mais l'approche la plus fine était 0.5 em et c'était déjà trop, ma ligne débordait trop.

Le meilleur résultat, je l'ai obtenu en faisant des espaces manuels de part et d'autre des puces qui séparent les intitulés de ma ligne jusqu'à ce qu'elle soit suffisamment longue pour se justifier.

Bon, je concède que le procédé est à hurler sur le plan du code mais je n'ai pas trouvé mieux... Smiley rolleyes
Salut

Sans compter évidemment l'approche esthétique : est-ce vraiment vraiment ce que tu veux.
Oubli pas que de couper une ligne au hasard et de la justifier à 940px và défigurer l'ensemble.

++
Modifié par zardoz (04 Sep 2010 - 03:27)
En fait, cette manip un peu bancale n'est vraiment limité qu'au pied de page et j'ai essayé bien entendu d'harmoniser la présentation générale et donc le rendu graphique, un point capital pour moi qui fignole au max mes formatages.

Bon, il se fait un peu tard, je pourrai répondre demain.
Merci beaucoup pour votre aide !
Ok

Quoi qu'il en soit je reviens comme en début de topic : au niveau de la sémantique.
C'est en CSS que « p » ou « div » sont des blocs mais la sémantique touche particulièrement XHTML.

Pour ce qui est des tes intentions : 0.5em sur l'interspacing ne te donnera pas un contrôle absolu sur la ligne. Surtout pas que le retour à la ligne est aléatoire.

D'accord pour l'heure : moi il est 21:35 à Qc CA.

++
Modifié par zardoz (04 Sep 2010 - 03:43)
Allo

Ce serait même bien que tu nous donne un visuel de tes intentions finales.
À partir d'un visuel on peut sûrement voir un CSS possible.

Et surtout je crois que ta solution est ailleurs que le retour (forcé) à la ligne.
Ne s'agit-il pas d'un footer « tel qu'on le voit régulièrement sur le web » ?

++
Modifié par zardoz (04 Sep 2010 - 06:12)
Si je place des vrai mots à la place de mon texte bolo, l'exemple que j'ai fourni en début de post illustre parfaitement l'objectif et d'ailleurs tes remarques totalement en phase avec le problème.

Sinon, il s'agit effectivement d'un footer standard. Pour préciser un peu plus : Mon footer, étant composé de plusieurs rubriques séparées par un point ou un trait vertical, devrait occuper la totalité de la largeur du pied de page. C'est la cas actuellement mais la dernière rubrique de la première ligne (composée de deux mots) est coupée en deux, le deuxième mot retournant à la ligne.
Il faudrait donc que la totalité de ma rubrique passe sur la deuxième ligne mais que la première ligne reste justifiée. C'est la question Smiley biggol

Sinon Zardoz, j'ai cru à un moment que tu étais une sorte d'androïde qui ne dort jamais, Smiley eek dans quel coin te trouves-tu ? je n'ai pas bien compris ton abréviation Smiley lol
Salut

C'est le Canada : dans la province de Québec. 6 hrs de différence avec la France. Là il est 07:30 chez moi mais à peu près 13:30 en France.

Selon mes tests je n'ai pas trouver si ce n'est qu'un code qui n'est pas assez solide. Même le word-spacing n'assure pas la solidité du code. Aucun contrôle précis. Si ce n'est que d'accepter que la première ligne soit :center plutôt que :justify.

++
Modifié par zardoz (04 Sep 2010 - 15:17)
Surtout pas center. Mais bon, ce qui compte, c'est que le résultat soit correct et que je ne passe pas à côté d'une manip magique.
Merci et bon petit déjeuner alors !
Sujet clos
Aller à