Texte justifié qui ne l'est pas

**philippef** · 12/09/2018, 16h18

Bonjour

J'ai une balise <div> qui contient 4 paragraphes <p>
le 1er paragrphe est ok
dans le 2è paragraphe le texte est justifié comme je le veux
le 3è paragraphe contient un texte pour afficher le 4è paragraphe

Code HTML :

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

1
2
3
<p class="text_justifie">
Mesdames, Messieurs, Chers amis,...
</p>

Code CSS :

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

.text_justifie { text-align:justify; }

mon souci est dans le 4è paragraphe. Je n'arrive pas à justifier le texte

Code HTML :

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

1
2
3
<p  id="suite_discours" class="p_discours_suite" >
Nous pensons à tous ceux qui....
</p>

Code CSS :

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

.p_discours_suite { text-align:justify; display:none; }

Je ne comprends pas pourquoi si je ne mets display:none le texte est justifié

Merci d'avance

**psychadelic** · 12/09/2018, 16h33

et que dit le debugger ? ( c'est la première chose à regarder, et ça évite souvent de poser des questions inutiles ici)

Invité · 12/09/2018, 17h16

Bonjour,

comment veux-tu qu'on puisse TESTER si tu ne mets pas un EXEMPLE de code COMPLET (HTML, CSS, avec du texte,...) ??

**philippef** · 12/09/2018, 17h50

Merci pour vos réponses.
Je ne sais pas utiliser le debugger mais j'ai quand même trouver la solution!!

**psychadelic** · 12/09/2018, 18h05

mettre un display à none n'est pas une solution mais une rustine.
le débugger c'est la touche F12 sur n'importe quel navigateur.

**philippef** · 12/09/2018, 20h06

Envoyé par psychadelic

mettre un display à none n'est pas une solution mais une rustine.

Je suis tout à fait disposer à toujours apprendre!! Merci de me donner un lien où je vais apprendre à remplacer display:none par autre chose.

Invité · 12/09/2018, 20h32

Envoyé par jreaux62

comment veux-tu qu'on puisse TESTER si tu ne mets pas un EXEMPLE de code COMPLET (HTML, CSS, avec du texte,...) ??

On ne peut pas t'aider si TU ne fais pas le nécessaire.

**ProgElecT** · 12/09/2018, 20h34

Salut

Envoyé par philippef

Merci pour vos réponses.
Je ne sais pas utiliser le debugger mais j'ai quand même trouver la solution!!

Et cette solution est ?

**philippef** · 12/09/2018, 21h23

ah! pardon. Je n'ai pas trouvé la solution, mais une solution qui me donne le résultat attendu.

ma page 2015

Code HTML :

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
<div id="div2015_discours_1">
	<p class="titre">
		Inauguration du square Troissy-Partenheim<br />
		Dimanche 26 avril 2015
	</p>
	<p class="text_justifie">
		Mesdames, Messieurs, Chers amis,<br /><br />
		Depuis de 25 ans, par le biais du jumelage entre nos deux villages,
		des familles allemandes et française se retrouvent régulièrement.
		Elles ont compris...
	</p>
	<p class="p_suite" onclick="montrer('suite_discours');" >Lire la suite
	</p>
 
	<p id="suite_discours" class="p_discours_suite" >
		Nous pensons à tous ceux qui se sont battus pour connaître la paix. Pour eux, 
		nous sommes fiers de cultiver cette paix à travers notre jumelage.<br /><br />
		...
		<br />
		Un certain nombre de ces présents se remarquent ici ou là à Troissy comme à Partenheim, à la mairie, à la bibliothèque,
		ou dans les rues du village.... 
		Vive note jumelage, vive notre amitié !<br />
		Mem Le Maire et son conseil municipal nous invitent maintenant à prendre un verre de champagne en la salle des fêtes.<br />
		<a href="index.php?page=2015" style="float:right; margin-right:1em; "> Fermer</a><br /><br />
	</p>
</div>

le css

Code :

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

1
2
3
4
5
6
#div2015_discours_1 { width:49%; margin-left:1%; text-align:justify; background-image:url('../images/rencontres/2015/20180823_165913.jpg');
	background-size:100%; background-repeat:no-repeat; }
.titre { text-align:center; font-weight:bold; }
.text_justifie { text-align:justify; }
.p_suite { text-align:right; margin-right:1em; color:blue; cursor:pointer; }
.p_discours_suite { display:none; }

Ce que j'ai fait par rapport à mon premier post:
dans #div2015_discours_1 j'ai ajouté "text-align:justify"
dans .p_discours_suite j'ai enlevé "text-align:justify"

et cela me donne le résultat attendu.
comme je l'ai dit je suis tout à fait disposé à apprendre plus dès l'instant où je sais aller !!! Et donc s'il existe un autre moyen que display:none je suis preneur

Merci

**ProgElecT** · 12/09/2018, 21h30

Re

Merci d'avoir indiqué ce que tu avais trouver comme solution.
Perso j’apprends encor beaucoup du forum, même si cela n'est pas la meilleur des solutions, il y aura peut être quelqu'un qui en proposera une, et là je/nous auront appris encore des choses

.

Invité · 12/09/2018, 21h58

Bon.
Un peu de sérieux......

Il faut VRAIMENT APPRENDRE LES BASES du HTML...

Une BONNE STRUCTURE HTML assure :

une bonne SEMANTIQUE
une lecture plus facile (+ accessibilité pour les mal et non-voyants)

1- Tu ne sais pas ce qu'est une balise titre ?

<h1>, <h2>, .... <h6> ?

2- display:none; n'a absolument RIEN à voir avec l'histoire de texte justifié !
Ça sert juste à masquer un élément.

3- <p> est une balise de "paragraphe". Elle ne sert pas à mettre un simple lien "Lire la suite"

4- Ce serait bien aussi de connaitre les balises HTML5 !

<section>, <article>,...

PAR CONSÉQUENT, le code HTML peut s'écrire :

Code html :

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
<article class="discours" id="div2015_discours_1">
  <header>
    <h1>
      Inauguration du square Troissy-Partenheim<br />
      Dimanche 26 avril 2015
    </h1>
  </header>
 
  <div>
    <p>
      Mesdames, Messieurs, Chers amis,<br /><br />
      Depuis de 25 ans, par le biais du jumelage entre nos deux villages,
      des familles allemandes et française se retrouvent régulièrement.
      Elles ont compris...
      <span class="span_suite" onclick="montrer('suite_discours_1');" >Lire la suite</span>
    </p>
 
    <div class="discours_suite" id="suite_discours_1">
      <p>Nous pensons à tous ceux qui se sont battus pour connaître la paix. Pour eux, 
        nous sommes fiers de cultiver cette paix à travers notre jumelage.<br />...
      </p>
      <p>Un certain nombre de ces présents se remarquent ici ou là à Troissy comme à Partenheim, à la mairie, à la bibliothèque,
        ou dans les rues du village.... 
        Vive note jumelage, vive notre amitié !<br />
        Mem Le Maire et son conseil municipal nous invitent maintenant à prendre un verre de champagne en la salle des fêtes.<br />
        <a class="a_fermer" href="index.php?page=2015"> Fermer</a>
      </p>
    </div>
 
  </div>
</article>

A RETENIR :

Les classes permettent de styler PLUSIEURS éléments similaires.
Un id doit être UNIQUE

Le CSS :

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
.discours {
  width: 49%;
  margin-left: 1%;
  text-align: justify;
}
#div2015_discours_1 {
  background-image: url("../images/rencontres/2015/20180823_165913.jpg")
    no-repeat;
  background-size: 100%;
}
.discours > header > h1 {
  text-align: center;
  font-weight: bold;
}
.discours div p {
  text-align: justify;
}
.span_suite {
  display: block;
  text-align: right;
  margin-right: 1em;
  color: blue;
  cursor: pointer;
}
.a_fermer {
  float: right;
  margin-right: 1em;
}
.discours_suite {
  display: none; /* on masque */
}

Le JavaScript (que tu n'as pas montré) :

Code JavaScript :

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

1
2
3
4
5
function montrer( div )
{
  /* on affiche */
  document.getElementById( div ).style.display = 'block'; 
}

Variante (pour afficher/masquer) :

Code JavaScript :

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

1
2
3
4
5
function montrer( div )
{
  /* on affiche/masque */
  document.getElementById( div ).style.display = (document.getElementById( div ).style.display == 'block')? 'none':'block'; 
}

Invité · 12/09/2018, 22h05

Envoyé par philippef

...Je ne sais pas utiliser le debugger...

Il s'agit de l'"inspecteur" du navigateur que tu utilises.

Il suffit de cliquer sur la touche "F12" du clavier pour l'ouvrir.

Découvrir les outils de développement des navigateurs

On peut notamment y voir les propriétés CSS qui s'appliquent sur un élément.

**philippef** · 13/09/2018, 14h15

Bonjour,
J'accepte volontiers toutes ces remarques et critiques.
Ce n'est "que" mon 4è site depuis 1991.

Je connais les balises h1, h2, et c'est à tord que je ne les utilise pas!!
Pour ce qui est de "display:none" je sais que cela n'a rien à voir avec "text-align:justify". Je voulais juste dire que je ne comprenais pas pourquoi lorsque j'enlevais "display:none" le texte était bien justifié.
La balise <p> que j'ai utilisée pour le lien me permettais de "sauter" une ligne. Je trouvais cela plus simple !!
Je n'avais pas mis la fonction javascript car elle fonctionne.
Pour HTML5 je regarderai lorsque j'aurai terminé ce site (pour le réécrire) car je ne peux pas tout reprendre d'ici demain soir!!

Texte justifié qui ne l'est pas

CSS

Discussions similaires

Partager

Partager