CSS habillage des tableaux modifié entre la 1.5 et 1.6

[Mackens]

Bonjour,

 

Je cherche désespérément la solution pour que la mise en page de tout mon site puisse retrouver son état qui était celui avant mon passage en version 1.6.

 

J'utilise de nombreux tableaux dans mes fiches produits qui ont toutes été créées avec la version par défaut du template de la version 1.5 de prestashop sans modification de CSS. lorsque je suis passé sur la version 1.6, mes tableaux avaient perdu leurs cadres mais surtout, leurs propriétés d'habillage qui fait que maintenant, tous mes textes situés avant sous les tableaux se retrouvent placés à droite des tableaux de manière tres inesthétique.

Voir l'image jointe.

J'ai réussi à corriger le probleme de bordure en la rajoutant dans le css global du nouveau thème mais je n'arrive pas à faire en sorte que tous les textes see placent automatiquement sous les tableaux.

 

L'un d'entre vous pourrait il m'aider ?

Merci d'avance

[FMR]

Bonjour,

Malheureusement, sans avoir accès à votre site, ni même votre CSS, comment voulez-vous qu'on vous aide ??
Comprenez qu'il est difficile d'aider quelqu'un, surtout quand il s'agit de code, si on ne sait pas ce qui ne va pas...
Quoiqu'il en soit, avec le peu que vous nous avez donné, voici quelques pistes :

- le thème était pour 1.5, êtes vous sûr qu'il est compatible 1.6 ?
- si oui, alors il suffit de retrouver le code CSS qui était appliqué sur vos tableau, et l'utiliser à la place du nouveau CSS.

Bonn continuation.

[Mackens]

Merci FMR pour votre réponse.

Je comprends bien que le manque d'accès au code ne doit pas aider. Mais comme je n'ai rien modifié et que j'utilisais le theme par défaut en 1.5 et que le probleme se pose avec le thème par défaut de la 1.6, je me suis dit que le "probleme" était peut etre connu.

 

Pour répondre à votre question, le thème 1.5 était celui par défaut donc je pense qu'il est compatible 1.6.

 

Vous me suggérez donc de regarder le code CSS qui est appliqué par défaut aux tableaux dans le global css des deux thèmes et de comparer c'est bien cela ?

 

Pour info voici le code HTML de la fiche produit depuis le début jusqu'aux textes encadrés situés après le tableau et donc des textes qui se retrouvent mal habillés autour du tableau.

 

---------------------------------

 

<p><strong><span style="font-size: 11px; line-height: 14px;">Ce combo équipé du moteur Typhoon HET 700-68-1200kv produit une poussée de 3,9kg / 73A en 10S et 5,1kg / 94A en 12S. </span></strong></p>
<table style="width: 500px;" border="1" align="left">
<tbody>
<tr>
<td><strong> Caractéristiques / Tension</strong></td>
<td style="text-align: center;"><strong>10S</strong></td>
<td style="text-align: center;"><strong>12S</strong></td>
</tr>
<tr>
<td><strong> Tension</strong></td>
<td style="text-align: center;">37v</td>
<td style="text-align: center;">44.4v</td>
</tr>
<tr>
<td><strong> Courant</strong></td>
<td style="text-align: center;"> 73.34A</td>
<td style="text-align: center;"> 93.97A</td>
</tr>
<tr>
<td style="text-align: left;"><strong> Puissance</strong></td>
<td style="text-align: center;">2821W</td>
<td style="text-align: center;">4223W</td>
</tr>
<tr>
<td><strong> Poussée</strong></td>
<td style="text-align: center;">3.9kg </td>
<td style="text-align: center;"> 5,1kg</td>
</tr>
<tr>
<td style="text-align: left;"><strong><strong> Contrôleur</strong></strong></td>
<td style="text-align: center;"> >=90A / HV</td>
<td style="text-align: center;"> >=120A / HV</td>
</tr>
<tr>
<td><strong> Batterie (mesuré avec)</strong></td>
<td style="text-align: center;">5500mAh 35C</td>
<td style="text-align: center;"> <span>4200mAh 35C</span></td>
</tr>
</tbody>
</table>
<h3 style="text-align: center;"><span style="font-size: 11px; font-weight: normal;"> </span></h3>
<h3><span style="font-size: 11px; font-weight: normal;"> </span></h3>
<h3><span style="font-size: 11px; font-weight: normal;"> </span></h3>
<h3> <br /> </h3>
<p class="warning"><span style="font-size: 8pt;">Note : Il est fortement recommandé de choisir un contrôleur d'une capacité au minimum 20% supérieure à celle de la consommation de courant annoncée. Assurez-vous de la capacité de votre contrôleur : LV= Low Voltage (désigne les contrôleurs fonctionnant jusqu'en 6s) - HV= High Voltage (désigne les contrôleurs fonctionnant au delà de 6s).</span></p>
<h3 class="warning"><strong><span style="background-color: #ffffe0; font-size: 13px;">Note : Ce combo composé d'une turbine et d'un moteur est livré monté et équilibré. Il peut être directement installé dans votre modèle. Vous pouvez aussi vous procurer </span></strong><strong><span>séparément l</span></strong><strong><span>es éléments de ce combo dans la boutique.</span></strong></h3>

[FMR]

Merci d'avoir détaillé. Le HTML aura finalement été fort utile.
Solution :

Le problème vient de <table style="width: 500px;" border="1" align="left">
Il suffit de supprimer la ligne et de mettre à la place <table style="border="1"; align="left";">

Et vu que vous m'avez dit que le problème est sur la page produit, il me semble, vous devraiez trouver ce code dans product.tpl de votre thème.

Si jamais le problème persiste, pensez à vider votre cache avant toute chose.
Je reste à votre disposition.

Bonne continuation.
Cordialement.

[Mackens]

Merci à nouveau pour cette réponse.

En effet, lorsque je remplace dans le code HTML la ligne

 

J'ai fait différentes essais et cela fonctionne lorsque je remplace :

<table style="width: 500px;" border="1" align="left">

par

<table style="width: adjust; clear: both; overflow: hidden;">

 

Avec

<table style="border="1"; align="left";">

Le texte était toujours aligné à droite du tableau et pas en dessous.

 

Mais cela fonctionne donc en remplacant directement dans le code HTML de la fiche produit. Comme j'ai des centaines de pages à modifier en plusieurs langues il me faudrait trouver comment appliquer cette modification en dehors du HTML de chaque page mais en le faisant à un niveau global.

 

Mon css global du theme est comme cela pour les tables :

 

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
  border: 1px #BCBCBC solid;
  background: #F4F4F6; }
  height: auto;

 

Lorsque je change par exemple la valeur border cela modifie tous les tableaux du site, idem pour la couleur background, mais je n'arrive pas du tout à modifier l'habillage du tableau à cet endroit.

Auriez vous une idée ?

J'ai regardé dans product.tpl du thème mais je ne vois pas trop ce que je peux y modifier pour que mes tableaux fonctionnent partout.

 

Avez vous une idée ?
 

[FMR]

Bonjour,

Désolé, mais tout cela me semble un peu confu...
J'avoue ne pas être sûr de tout comprendre, quand vous dites :

 Mais cela fonctionne donc en remplacant directement dans le code HTML de la fiche produit. Comme j'ai des centaines de pages à modifier en plusieurs langues il me faudrait trouver comment appliquer cette modification en dehors du HTML de chaque page mais en le faisant à un niveau global.

 

Vous avez créer manuellement, dans chaque fiche produit, un tableau, en y entrant à chaque fois des données différentes, grâce au code HTML que vous m'avez copié dans votre précédent message ?? Si oui, le problème est que ça fait comme sur l'image, pour chacun d'eux ?

Votre site, est-il en ligne ? En voyant, c'est beaucoup plus simple.
Vos tableaux, ne sont que sur les pages produits ?
Comme ça, je vois bien un truc comme solution en CSS, genre : #product .td { width:100%:important}
Mais sans voir, c'est dur à dire...

[Mackens]

Bonjour FMR, j'apprécie fortement vos réponses et votre aide

 

Je n'ai pas re créé de fiche produit depuis le passage en version 1.6. Toutes les fiches produits ont été crée sous la version 1.5 en utilisant le thème par défaut et sans qu'aucune modification n'ai été faite au CSS par défaut du site / du thème.

J'ai donc simplement changé de version de prestashop.

Toutes les fiches produits posant probleme ont été crées de la meme manière, se sont

 

Voici un exemple de page qui pose probleme (texte placé à droite du tableau et manque espace entre les blocs de couleur):

 

http://www.turbines-rc.com/en/90mm-edf-ducted-fan/410-ducted-fan-edf-jetfan-90-v2-ejets-het-700-60-2085-motor.html?search_query=2085&results=3

 

Est ce plus clair maintenant ?

Dois je tenter #product .td { width:100%:important} dans le css global du thème ?

 

1000 mercis

[FMR]

Bonjour,

Merci pour le lien, ça m'aura été utile.
Pour moi, le problème vient du thème.
Dans product.tpl, vous devez avoir cette ligne :

<table border="1" align="left" style="width: 500px;">

Qu'il faut remplacer  par :
<table border="1" float="left" style="width: 100%;">

De même que si je ne me trompe pas, vous avez ajouté des <h3> qu'il faudra supprimer.

Bonne continuation.