5223 sujets

Sémantique web et HTML

Bonjour,

Je suis nouveau sur le site et souhaiterais si possible avoir une petite aide.

Voilà. Sur mon blog jusqu'à maintenant je postais des billets sans plus. Puis hier j'ai voulu agrémenter un de mes billets d'un tableau HTM contenant des infos chiffrées.

Il s'avère que mon tableau est très en-dessous de mon texte.

Comment faire pour que mon tableau contenant des infos chiffrées soit juste en dessous de mon texte ?

Je pensais que ça venait des "margin" mais rien n'y fait.

Merci pour votre aide.
Modérateur
Bonjour,

Il faudrait plus de détails pour qu'on puisse te répondre. Là, il peut y avoir 10 000 raisons.

Amicalement,
Merci Parsimonhi de m'alerter sur le peu que j'ai pu écrire.

Pour l'affichage de mes balise table j'ai fait appel à des preg_replace où je demande à ce que mes codes soit transformer selon des impératifs CSS. Tout cela marche parfaitement.

Mais je ne sais pas pourquoi mon tableau est largement en dessous du texte qu'il doit agrémenter. Je vous mets ci-dessous mes preg_replace qui fonctionne bien pour mes tableaux sauf que celui-ci se trouve très en dessous de mon texte d'explication qu'il doit accompagner.


$contenu = preg_replace('#\<table\>(.+)\</table\>#isU', '<table style="font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;margin-top:inherit; ">$1</table>', $contenu);
	$contenu = preg_replace('#\<caption\>(.+)\</caption\>#isU', '<caption style="color:#090;font-size :20px  ;text-align: center ; ">$1</caption>', $contenu);
	$contenu = preg_replace('#\<th\>(.+)\</th\>#isU', '<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">$1</th>', $contenu);
	$contenu = preg_replace('#\<tr\>(.+)\</tr\>#isU', '<tr style=" hover:bgcolor #ffffff;">$1</tr>', $contenu);
	$contenu = preg_replace('#\<td\>(.+)\</td\>#isU', '<td style="border :1px solid black ;text-align: center;">$1</td>', $contenu);
	$contenu = preg_replace('#\<td colspan = \^d$\>(.+)\</td\>#isU','<td style="bgcolor:#000000;text-align: center;">$1</td>', $contenu);
	$contenu = preg_replace('#\<td rowsppan = \^d$\>(.+)\</td\>#isU','<td style="bgcolor:#000000;text-align: center;">$1</td>', $contenu);



Merci pour votre aide.
lucluc a écrit :
Merci Parsimonhi de m'alerter sur le peu que j'ai pu écrire.

Pour l'affichage de mes balise table j'ai fait appel à des preg_replace où je demande à ce que mes codes soit transformer selon des impératifs CSS. Tout cela marche parfaitement.

Mais je ne sais pas pourquoi mon tableau est largement en dessous du texte qu'il doit agrémenter. Je vous mets ci-dessous mes preg_replace qui fonctionne bien pour mes tableaux sauf que celui-ci se trouve très en dessous de mon texte d'explication qu'il doit accompagner.


$contenu = preg_replace('#\&lt;table\&gt;(.+)\&lt;/table\&gt;#isU', '&lt;table style="font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;margin-top:inherit; "&gt;$1&lt;/table&gt;', $contenu);
	$contenu = preg_replace('#\&lt;caption\&gt;(.+)\&lt;/caption\&gt;#isU', '&lt;caption style="color:#090;font-size :20px  ;text-align: center ; "&gt;$1&lt;/caption&gt;', $contenu);
	$contenu = preg_replace('#\&lt;th\&gt;(.+)\&lt;/th\&gt;#isU', '&lt;th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;"&gt;$1&lt;/th&gt;', $contenu);
	$contenu = preg_replace('#\&lt;tr\&gt;(.+)\&lt;/tr\&gt;#isU', '&lt;tr style=" hover:bgcolor #ffffff;"&gt;$1&lt;/tr&gt;', $contenu);
	$contenu = preg_replace('#\&lt;td\&gt;(.+)\&lt;/td\&gt;#isU', '&lt;td style="border :1px solid black ;text-align: center;"&gt;$1&lt;/td&gt;', $contenu);
	$contenu = preg_replace('#\&lt;td colspan = \^d$\&gt;(.+)\&lt;/td\&gt;#isU','&lt;td style="bgcolor:#000000;text-align: center;"&gt;$1&lt;/td&gt;', $contenu);
	$contenu = preg_replace('#\&lt;td rowsppan = \^d$\&gt;(.+)\&lt;/td\&gt;#isU','&lt;td style="bgcolor:#000000;text-align: center;"&gt;$1&lt;/td&gt;', $contenu);



Merci pour votre aide.


Utilise l'inspecteur de ton naviguateurs.
Clique droit > Inspecter.
Si tu es sur google chrome, tu clique sur la souris tout en haut à gauche de l'inspecteur. Tu mets en suite ta souris au dessus de l'espace et tu devrais voir d'où il vient (:
Bonne soirée !
Modérateur
Bonjour,

On ne peut pas savoir avec l'extrait de code donné pourquoi il y aurait un espace trop grand entre un texte qui précède le tableau et ce tableau.

Pourquoi y-a-t-il "margin-top:inherit;" ?

Amicalement,
Bonjour Vztoi et Parsimhoni

Merci de chercher à m'aider.

Parsimhoni en fait j'essaie tout d'où le inherit de tout à l'heure.

Voici le code source et peut-être y verriez-vous une information qui m'échappe.

<article>
<div id="news">

<h2>
	test</h2>

<h1 class="title">
	test	
</h1>

<div id="photo1">	
	</div>

<div id="fotoreg2015">	
	</div>

<p>	

<em></em><br><p>
   <p>Test test test test test Test test test test test Test test test test test Test test test test testTest test test test test Test test test test test Test test test test test Test test test test test<br />
<br />
<table style="font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;margin:; "><br />
<caption style="color:#090;font-size :20px  ;text-align: center ; ">Titre</caption><br />
<br />
<tr style=" hover:bgcolor #ffffff;"><br />
<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">Produits</th><br />
<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">PAHT</th><br />
<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">PVHT</th><br />
<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">Qtés vendues</th><br />
<th style="font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #000000;text-align:center;">CA</th><br />
<br />
</tr><br />
<br />
<tr style=" hover:bgcolor #ffffff;"><br />
<td style="border :1px solid black ;text-align: center;">A</td><br />
<td style="border :1px solid black ;text-align: center;">1</td><br />
<td style="border :1px solid black ;text-align: center;">2</td><br />
<td style="border :1px solid black ;text-align: center;">4</td><br />
<td style="border :1px solid black ;text-align: center;">8</td><br />
</tr><br />
<br />
<br />
<tr style=" hover:bgcolor #ffffff;"><br />
<td style="border :1px solid black ;text-align: center;">B</td><br />
<td style="border :1px solid black ;text-align: center;">3</td><br />
<td style="border :1px solid black ;text-align: center;">4</td><br />
<td style="border :1px solid black ;text-align: center;">10</td><br />
<td style="border :1px solid black ;text-align: center;">40</td><br />
</tr><br />
<br />
<tr style=" hover:bgcolor #ffffff;"><br />
<td style="border :1px solid black ;text-align: center;">C</td><br />
<td style="border :1px solid black ;text-align: center;">7</td><br />
<td style="border :1px solid black ;text-align: center;">12</td><br />
<td style="border :1px solid black ;text-align: center;">2</td><br />
<td style="border :1px solid black ;text-align: center;">240</td><br />
</tr><br />
<br />
<tr style=" hover:bgcolor #ffffff;"><br />
<td style="border :1px solid black ;text-align: center;">TOTAL</td><br />
<td colspan="3"></td><br />
<td style="border :1px solid black ;text-align: center;">72</td><br />
</tr><br />
<br />
</table><br />
<br />
Test test test test test Test test test test test Test test test test test Test test test test testTest test test test test Test test test test test Test test test test test Test test test test test<br />
   </p>

	</div>
Modérateur
Bonjour,

Arf ! C'est quoi toutes ces balises <br> ???

1) Déjà, en html5 c'est <br> et non pas <br />
2) Ensuite, on ne met pas de <br> derrière les balises d'un tableau (éventuellement on peut en mettre à l'intérieur d'un <td>)
3) Dans le cas général, on emploie le moins possible la balise <br>

Bref, tu supprimes tous les <br> entre <table> et </table> et ça devrait aller mieux !

Amicalement,
Bonsoir,

En fait ce n'est pas moi qui génère ces balises mais le nl2br qui permet les paragraphes automatiques.

<?php echo $contenu=bbcode (nl2br($billet['contenu1']));?>


En enlevant il est vrai que mon tableau est bien positionné sous ma phrase MAIS cette fois-ci sans le nl2b tout mon texte est compacte.

<?php echo $contenu=bbcode($billet['contenu1']);?>


Y-a-t-il un autre moyen de faire apparaitre mes paragraphe sans nl2br?

Merci pour votre aide. C'est vraiment très sympathique.
Modérateur
Bonjour,

Clairement, tu ne peux pas faire un nl2br à l'ensemble de ton $billet['contenu1']. Il faudrait ne le faire que pour les parties qui en ont besoin (des paragraphes <p> ?). Ou bien éventuellement, tu peux continuer à faire un nl2br() sur l'ensemble mais retirer les <br /> inutiles si je comprends bien ton besoin.

C'est un peu difficile de donner une solution toute faite sans savoir ce que contient exactement $billet['contenu1'].

Ça peut se faire avec des preg_replace() sur le contenu comme tu l'as fait pour rajouter tes styles.

Par exemple (à adapter en fonction de la situation réelle, car je me suis basé sur le code html que tu as donné, mais il y a peut-être des cas différents en réalité), tu peux ajouter juste après tes preg_replace qui ajoutent tes styles un truc du genre :

$contenu = preg_replace("#</(td|tr|th|caption|table)>([^<]*<br ?/?>[^<]*)+#i", "</$1>\n", $contenu);
$contenu = preg_replace("#<br />\s<(td|tr|th|caption|table)#i", ">\n<$1", $contenu);

Mais bon, c'est du bricolage ! Le mieux serait de ne faire des nl2br() "maisons" que sur les parties du contenu qui en ont besoin (sans doute avec des preg_replace remplaçant les \s par des <br> seulement où c'est nécessaire). Le code peut être assez complexe selon ce qu'est ton contenu.

Amicalement,
Modifié par parsimonhi (21 Sep 2020 - 07:59)
parsimonhi a écrit :
Bonjour,

Clairement, tu ne peux pas faire un nl2br à l'ensemble de ton $billet['contenu1']. Il faudrait ne le faire que pour les parties qui en ont besoin (des paragraphes &lt;p&gt; ?). Ou bien éventuellement, tu peux continuer à faire un nl2br() sur l'ensemble mais retirer les &lt;br /&gt; inutiles si je comprends bien ton besoin.

C'est un peu difficile de donner une solution toute faite sans savoir ce que contient exactement $billet['contenu1'].

Ça peut se faire avec des preg_replace() sur le contenu comme tu l'as fait pour rajouter tes styles.

Par exemple (à adapter en fonction de la situation réelle, car je me suis basé sur le code html que tu as donné, mais il y a peut-être des cas différents en réalité), tu peux ajouter juste après tes preg_replace qui ajoutent tes styles un truc du genre :

$contenu = preg_replace("#&lt;/(td|tr|th|caption|table)&gt;([^&lt;]*&lt;br ?/?&gt;[^&lt;]*)+#i", "&lt;/$1&gt;\n", $contenu);
$contenu = preg_replace("#&lt;br /&gt;\s&lt;(td|tr|th|caption|table)#i", "&gt;\n&lt;$1", $contenu);

Mais bon, c'est du bricolage ! Le mieux serait de ne faire des nl2br() "maisons" que sur les parties du contenu qui en ont besoin (sans doute avec des preg_replace remplaçant les \s par des &lt;br&gt; seulement où c'est nécessaire). Le code peut être assez complexe selon ce qu'est ton contenu.

Amicalement,




Merci!