Pourquoi un décalage entre les balises d'un paragraphe ?

Avatar du membre
Eléphanteau du PHP | 49 Messages

07 févr. 2023, 16:18

Bonjour à tous,

Faisant un site PHP, j'inclus des pages HTML.
Seulement, ces pages n'ont pas l'affichage que je souhaiterais.
J'ai essayé les P, les DIV , et même tenté de passer par le CSS, mais ça va pas !

Bon, j'ai mis un intitulé dans le "HEADER" espacé du bord, mais je voudrais que les paragraphes en dessous aient un plus grand espace par rapport à l'intitulé !

Ensuite, après "test de QI (...)," je mets 2 sauts de ligne <BR>, mais il y a tout un décalage entre "Test de QI" et "Dans ce test" !
http://qi98.free.fr/temp/decalage.jpg

Pourriez vous me dire comment gérer tout ça, écart plus important pour les paragraphe par rapport au HEADER et éviter ce décalage dans les paragraphes ?
Je n'ai mis que l'image montrant 1 seul paragraphe, mais il y en a plusieurs... et font tous pareil.

Merci d'avance.
	<article>
		<header>
			<div class="intitule bleu gras"><span class="puce-libelle">&nbsp;&nbsp;&nbsp;</span>Testez en ligne vos capacités intellectuelles.</div>
		</header>
				<p>
					Test de QI avec une évaluation à imprimer !
					<br><br>
					Dans ce test de 19 minutes, plusieurs critères d'analyses seront testés :
					Observation, Logique, Numération, Verbal, Spatial, Psychologie, Performance, etc.
				</p>
	</article>

PS : Pourquoi, l'image de s'affiche pas avec les balises "img" ?

Avatar du membre
Mammouth du PHP | 1609 Messages

07 févr. 2023, 16:30

Salut, c'est compliqué de déterminer d'où vient le décalage sans avoir accès à la page.

En tout cas quand il est question de mise en page, forcément on se tourne vers les CSS.

Les navigateurs principaux proposent des outils de développement qui permettent d'explorer le dom et voir et modifier les styles appliqués sur les différentes balises.

Ça permet de jouer avec pour voir en direct le résultat. Je te conseille d'essayer ces outils.
Développeur web depuis + de 20 ans

Avatar du membre
Eléphanteau du PHP | 49 Messages

07 févr. 2023, 17:18

C'est évident que paramétrer avec du CSS, mais ça me dit pas pourquoi.
J'utilise Edge, FF et Maxthon, et l'un comme l'autre, j'ai toujours ce problème.

J'avais posé une question en rouge, pas de réponse ?

Avatar du membre
Mammouth du PHP | 1564 Messages

12 févr. 2023, 23:29

Pour ouvrir l'éditeur/visualiseur de DOM sur FF, c'est "CTRL + Flèche du haut + I (i)".

Concernant un espace pour les éléments (p, div,...), on utilise la propriété margin.

Concernant ceci :
<span class="puce-libelle">&nbsp;&nbsp;&nbsp;</span>
Profite de ta classe .puce-libelle pour lui donner de l'espace plutôt que des espaces HTML (&nbsp;)

Un display:inline-block et un width:10px devrait suffire.