Footer avec HTMLBOX rendre responsive

[Lyn&Or Bijoux]

Bonjour, 

 

j'ai un souci et j'espère que quelqu'un pourra m'aider...

 

J'ai crée un footer de 6 colonnes grâce au super module HTMLBOX, et je trouve le résultat très bien, avec toutes les données que je voulais y mettre.

 

Par contre, je ne sais pas comment le rendre responsive, car sur un support mobile, il reste sur 6 colonnes de large ce qui pose des problèmes. (vous pouvez tester)

 

Savez-vous comment le rendre responsive, c'est à dire que les 6 colonnes se mettent les unes au-dessus des autres,, ne laissant apparaître que le titre en bouton à déplier?

 

Voici le code

<table style="text-align: left; background-color: transparent; width: 100%;" border="0" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td style="width: 15%;" valign="top">
<ul class="tree dynamized" style="border: 0px none; margin: 0px 0px 9px; padding: 0px; font-style: normal; font-weight: normal; line-height: inherit; font-family: Arial, Helvetica, sans-serif; font-size: 13px; vertical-align: baseline; list-style-type: none; list-style-image: none; list-style-position: outside; color: #777777; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;">
<h4 style="border: 0px none; margin: 0px 0px 13px; padding: 0px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 22px; font-family: 'Open Sans', sans-serif; font-size: 18px; vertical-align: baseline; color: #ffffff; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"><a href="../">Catégories</a></h4>
</li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../5-collection-femme" title="" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Collection Femme</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../6-collection-homme" title="Offrez aux hommes de votre vie des bijoux de grande qualité. Tendance ou indémodables, vous trouverez dans notre boutique les incontournables chaînes en mailles cheval, ou les anneaux d'acier so chic!" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Collection Homme</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../7-collection-enfant" title="Or, argent, plaqué or...découvrez notre très jolie collection de bijoux spécialement pour les enfants: des bijoux de princesses, des bijoux personnalisés à garder pour la vie, d'adorables collections de la meilleure qualité." style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Collection Enfant</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../31-collections-bijouterie" title="" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Nos Collections</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../promotions" title="Promotions" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Promotions</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../nouveaux-produits" title="Nouveaux produits" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Nouveaux produits</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../meilleures-ventes" title="Meilleures ventes" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Meilleures ventes</a></li>
</ul>
</td>
<td style="width: 15%;" valign="top">
<ul class="tree dynamized" style="border: 0px none; margin: 0px 0px 9px; padding: 0px; font-style: normal; font-weight: normal; line-height: inherit; font-family: Arial, Helvetica, sans-serif; font-size: 13px; vertical-align: baseline; list-style-type: none; list-style-image: none; list-style-position: outside; color: #777777; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;">
<h4 style="border: 0px none; margin: 0px 0px 13px; padding: 0px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 22px; font-family: 'Open Sans', sans-serif; font-size: 18px; vertical-align: baseline; color: #ffffff; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"><a href="../mon-compte">Mon compte</a></h4>
</li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../historique-commandes" title="Mes commandes" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Mes commandes</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../avoirs" title="Mes avoirs" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Mes avoirs</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../adresses" title="Mes adresses" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Mes adresses</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../identite" title="Gérer mes informations personnelles" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Mes informations personnelles</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../reduction" title="Mes bons de réduction" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Mes bons de réduction</a></li>
</ul>
</td>
<td style="width: 15%;" valign="top">
<ul class="tree dynamized" style="border: 0px none; margin: 0px 0px 9px; padding: 0px; font-style: normal; font-weight: normal; line-height: inherit; font-family: Arial, Helvetica, sans-serif; font-size: 13px; vertical-align: baseline; list-style-type: none; list-style-image: none; list-style-position: outside; color: #777777; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;">
<h4 style="border: 0px none; margin: 0px 0px 13px; padding: 0px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 22px; font-family: 'Open Sans', sans-serif; font-size: 18px; vertical-align: baseline; color: #ffffff; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;"><a href="../plan-site">Naviguer</a></h4>
</li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../nous-contacter" title="Contactez-nous" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Contactez-nous</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../content/2-conditions-generales-de-ventes" title="C.G.V" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">C.G.V</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../content/3-nous-connaitre" title="Nous connaître" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Nous connaître</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../content/4-paiement-securise" title="Paiement sécurisé" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Paiement sécurisé</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../content/5-charte-de-confidentialite" title="Confidentialité" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Confidentialité</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../content/10-livraison" title="Livraison" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Livraison</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../content/25-recrutement" title="Recrutement" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Recrutement</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../content/27-nos-sites-amis" title="Nos sites amis" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Nos sites amis</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"></span><a href="../plan-site" title="sitemap" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline; color: #777777; text-decoration: none;">Plan du site</a></li>
</ul>
</td>
<td style="width: 15%;" valign="top">
<ul class="tree dynamized" style="border: 0px none; margin: 0px 0px 9px; padding: 0px; font-style: normal; font-weight: normal; line-height: inherit; font-family: Arial, Helvetica, sans-serif; font-size: 13px; vertical-align: baseline; list-style-type: none; list-style-image: none; list-style-position: outside; color: #777777; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;">
<h4 style="border: 0px none; margin: 0px 0px 13px; padding: 0px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 22px; font-family: 'Open Sans', sans-serif; font-size: 18px; vertical-align: baseline; color: #ffffff; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">Fiches pratiques</h4>
</li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: baseline;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../blog.html" title="Le Blog" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Le Blog</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/8-faq" title="FAQ" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">FAQ</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/6-baguier" title="Guide Baguier" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Guide Baguier</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/11-entretien-bijoux" title="Guide Entretien" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Guide Entretien</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/13-gravure" title="Guide Gravure" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Guide Gravure</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/24-guide-des-tailles" title="Guide Tailles" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Guide Tailles</a></li>
</ul>
</td>
<td style="width: 15%;" valign="top">
<ul class="tree dynamized" style="border: 0px none; margin: 0px 0px 9px; padding: 0px; font-style: normal; font-weight: normal; line-height: inherit; font-family: Arial, Helvetica, sans-serif; font-size: 13px; vertical-align: top; list-style-type: none; list-style-image: none; list-style-position: outside; color: #777777; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;">
<h4 style="border: 0px none; margin: 0px 0px 13px; padding: 0px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 22px; font-family: 'Open Sans', sans-serif; font-size: 18px; vertical-align: top; color: #ffffff; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;">Tout savoir sur...</h4>
</li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/14-le-diamant" title="Le Diamant" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Le Diamant</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/15-l-emeraude" title="L'émeraude" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">L'émeraude</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/16-le-rubis" title="Le rubis" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Le rubis</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/17-le-saphir" title="Le saphir" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Le saphir</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/18-les-pierres-fines" title="Les pierres fines" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Les pierres fines</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/19-la-perle" title="La perle" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">La perle</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/20-histoire-de-la-bijouterie" title="L'histoire" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">L'histoire des bijoux</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/21-les-bijoux-celebres" title="Les bijoux célèbres" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Les bijoux célèbres</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/22-la-symbolique-des-bijoux" title="Le symbolisme" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Le symbolisme</a></li>
<li style="border: 0px none; margin: 0px; padding: 0px 0px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"><span class="grower CLOSE" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top;"></span><a href="../content/23-les-metaux-precieux" title="Les métaux précieux" style="border: 0px none; margin: 0px; padding: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; font-family: inherit; font-size: 13px; vertical-align: top; color: #777777; text-decoration: none;">Les métaux précieux</a></li>
</ul>
</td>
<td style="width: 25%;" valign="middle"><a href="https://www.facebook.com/coffreabijoux/"><img style="border: 0px solid; width: 281px; height: 132px;" src="../img/cms/facebook_fans.jpg" alt="page facebook devenez fan" /></a></td>
</tr>
</tbody>
</table>

Merci d'avance pour votre aide, et bonne journée!

 

Marilyne

Edited August 7, 2017 by Lyn&Or Bijoux (see edit history)

[Lyn&Or Bijoux]

Bonjour, 

 

un petit up

 

Merci d'avance de vos suggestions,

 

Bonne journée

[BeComWeb]

Bonjour,

 

Alors pour le dire clairement : le code est dé-gueu-lasse.

 

L'utilisation des tableaux (<table>) est totalement obsolète et (dans le cas présent) incompatible avec la notion de responsive.

Et en plus y a du style inline partout 

 

Je ne connais pas ce module HtmlBox mais dans votre cas je ne vois pas l'intérêt de l'utiliser puisque les modules natifs de PS font la même chose ("blockcategories", "blockcms",...).

[Lyn&Or Bijoux]

Bonjour, 

 

merci pour ces superbes remarques qui me vont droit au coeur!

tout d'abord, je n'ai pas utiliser les bloc cms et category car le nombre de colonnes est limité à 3 et vu le nombre de CMS que je souhaite mettre dans le footer, j'ai besoin que cela soit réparti sur 6 colonnes. 

En ce qui concerne les <table>, je suis preneuse d'une autre solution pour mettre les donnés en colonnes, façon tableau sans faire de tableau...pourquoi pas 

En ce qui concerne le style, pour être sûre de ne pas faire d'erreur, j'ai copié le code du module block category du footer pour le créer.

 

Les suggestions constructives sont les bienvenues... 

[BeComWeb]

Bonjour,

 

Je ne remettais pas en cause vos compétences.

Si je comprends bien vous êtes commerçante / gestionnaire de boutique, avec quelques notions de CSS.

 

Le problème ici c'est le code généré automatiquement par le module, qui est à la fois assez sale et pas adapté à un design responsive.

A une époque on utilisait les tableaux pour faire de la mise en forme... mais ça remonte à longtemps.

Pour résumer un tableau devrait toujours servir à structurer des données (comme on peut le faire avec Excel où il y a des colonnes à en-tête, des lignes et des données dans les cellules).

Le problème du <table> c'est qu'une fois que l'écran n'est plus assez large pour afficher son contenu, il ne va pas s'adapter, il va juste "déborder" sur le côté.

Un intégrateur-web chevronné saura trouver des solutions pour modifier le comportement naturel du tableau.

Donc si vous avez de bonnes notions de CSS et que vous savez vous servir d'un debugger, je vous propose de jeter un oeil aux solutions utilisées pour le tableau du panier qui se trouve sur la page de récapitulatif de commande