Forum d'entraide PHPFrance

Bonjour à tous,

Pourriez-vous m'aider pour empêcher le décalage de la 1ère ligne dans un paragraphe simple, dont voici un extrait de code.

<section>
		<div class="intitule grand"><span class="puce-page">&nbsp;&nbsp;&nbsp;</span>Test de QI</div>

	<article>
		<header>
			<div class="intitule bleu gras"><span class="puce-libelle">&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;</span>Testez votre QI directement en ligne.</span></div>
		</header>
			<br />
			<p>
				Avec ces différents tests de QI, vous pourrez ainsi définir dans quel environnement vous êtes le plus performant.
				<br />
				Comme je l'ai déjà signalé, cela pourra servir "<span class="gras bleufonce">d'entraînement</span>" pour l'utilisateur qui serait succeptible de passer des tests de QI dans un cabinet de recrutement par exemple, ou encore si un test doit être passé dans une entreprise avant une embauche.
				<br /><br />
				Je le rappelle encore, bien que certaines questions sont issues de tests officiels, il ne faut pas les prendre comme référence.
				<br /><br />
				Si, malgré les efforts de recherches, un test reste insoluble, <a title="" href="../contact2/contact.php"><span>contactez-moi</span></a> en m'expliquant avec quel test et quel numéro la solution est difficile à trouver.<br />
				Je vous répondrai personnellement par mail et vous enverrai le moyen de parvenir à la bonne solution en vous expliquant le moyen d'y parvenir !
				<br /><br />
					<ul class="liste">
						<li><a title="" href="tests/mot_etranger.php">Mot étranger</a></li>
						<li><a title="" href="tests/manque_chiffre-lettre.php">Manque chiffre ou lettre</a></li>
						<li><a title="" href="tests/suite_numerique.php">Suite numérique</a></li>
						<li><a title="" href="tests/suite_logique.php">Suite logique</a></li>
						<li><a title="" href="tests/nombre_etranger.php">Nombre étranger</a></li>
						<li><a title="" href="tests/dessin_etranger.php">Dessin étranger</a></li>
						<li><a title="" href="tests/tableau_juste.php">Tableau juste</a></li>
						<li><a title="" href="tests/sens_rotation.php">Sens de rotation</a></li>
						<li><a title="" href="tests/grand_test.php">Grand test de QI</a></li>
					</ul>
			</p>
	</article>
</section>

Merci de votre aide.

Diomos

Salut diomos (jlb59430 ?), de base la première ligne d'un paragraphe n'est pas sensée être décalée. Tu devrais vérifier les styles associés aux paragraphes qui posent problème.

Tes espaces peuvent être du aux     (ce sont des espaces créés avec des entités HTML)

Concernant ton HTML, ya quelques erreurs :
Un <ul> à l'intérieur d'un <p> n'est pas correct
Tu as des </span> en trop dans ton <header>
<br /> doit être écrit sans / en HTML5 : <br>

A noter l'existence du validateur HTML du W3c qui permet d'aider à améliorer son code :
https://validator.w3.org/#validate_by_input

Merci à tous de vos précieux conseils.

Et pour te répondre @rthur, je ne pense pas forcément à W3 et je doute que cela m'apporterait une réponse à mon problème !

Tes espaces peuvent être du aux &nbsp;&nbsp;&nbsp; (ce sont des espaces créés avec des entités HTML)

Concernant ton HTML, ya quelques erreurs :
Un <ul> à l'intérieur d'un <p> n'est pas correct
Tu as des </span> en trop dans ton <header>
<br /> doit être écrit sans / en HTML5 : <br>

Les espaces &nbsp! sont contenus entre <div> et </div>, donc, logiquement, ça n'a rien à voir avec le paragraphe après !
Dans le <DIV> du HEADER, il y avait une balise fermante </span> en trop, j'ai corrigé mais le problème existe toujours.

Je ne savais pas que <UL></UL> ne pouvait pas être dans un paragraphe !

Pour <br />, je l'avais fait depuis 1997, et je ne pense pas trop à corriger ça car c'est pas un empêchement pour le bon fonctionnement de la ou les pages.
Mais je vais faire attention au fur et à mesure du temps !

Salut diomos (jlb59430 ?), de base la première ligne d'un paragraphe n'est pas sensée être décalée. Tu devrais vérifier les styles associés aux paragraphes qui posent problème.

Et oui, je me suis rebaptisé "diomos", car j'ai le même pseudo dans plusieurs forums.

En se qui concerne le style pour le paragraphe, j'ai rien vu !
Je suis peut-être passé à côté ! Je vais encore regarder.

Au pire file le lien de la page et on va vite voir.

Au pire file le lien de la page et on va vite voir.

Ce ne sera pas possible parce que je travaille en local !
C'est évident qu'il aurait sûrement d'autres possibilités, mais dans l'immédiat, je n'en vois pas !

As-tu testé les outils de développement du navigateur ? parce qu'en inspectant les paragraphes et ce qui gravite autour, tu devrais voir les marges internes et externes des éléments, et ça pourrait grandement t'aider à comprendre d'où vient ce décalage. C'est un outil indispensable quand on fait du développement web.

As-tu testé les outils de développement du navigateur ? parce qu'en inspectant les paragraphes et ce qui gravite autour, tu devrais voir les marges internes et externes des éléments, et ça pourrait grandement t'aider à comprendre d'où vient ce décalage. C'est un outil indispensable quand on fait du développement web.

Bonjour,
Désolé du retard , mais avec le nouveau site et la mise en pratique de ce que vous m'avez appris, two3d et toi, je zappe le forum parce que parfois, j'ai des erreurs et je regarde pourquoi et comment y remédier.

Pour en revenir à ce que tu m'as écrit, je n'ai pas trop bien compris que tu parles des "outils de développement du navigateur" !

C'est quoi exactement ?

Merci, j'ai vu ! C'est plutôt cool !

Oui, c'est super pratique !

Bonjour,

J'ai trouvé pour le retrait de la ligne c'est

text-indent:xxpx;

.
J'avais recherché partout et je ne voyais rien.
C'était simplement dans le style pour le html.
Au départ, je pensais que ça indentait tous le textes dans les <p> et <div>, mais ça n'affectait que la 1ère ligne.