[RÉGLÉ] tableau responsif dans article

[yservant]

Bonjour à tous,

Voilà bien longtemps que je ne suis pas passé sur le forum....pas que je n’avais pas de problème mais j'étais en vacances

Voici mon souci du moment :

J'essaie de créer un tableau responsif dans un article ce qui, une fois fait va bien me simplifier la vie pour la rédaction de mes articles (mise en page plus propre, notamment). Par ailleurs, je souhaite pouvoir publier un article n'importe où sur mon site...mais chaque chose en son temps

Pour ce faire, j'ai trouvé, sur le net, ceci : http://zurb.com/playground/responsive-tables

J'ai copié responsive-tables.css dans le dossier css de mon template et responsive-tables.js dans le dossier js.

Je déclaré les 2 lignes ci-dessous, href/src adaptée à mon projet, dans le head de mon index.php :
<link type="text/css" media="screen" rel="stylesheet" href="templates/prothte/css/responsive-tables.css" />
<script type="text/javascript" src="templates/protohte/css/responsive-tables.js"></script>

J'ai créé un article 'art_data' dans lequel j'ai créé un tableau de 4 col et 1 seule ligne. Je suis passé modifie le code de l'article en rajoutant la classe 'responsive' à ma table.

Jusque là, je ne pense pas me planter par rapport aux explications du site et ben....si, faut croire car ça ne fonctionne pas

Avez-vous une idée ? Je suis allé voir le code généré, ma table responsive y est ; je suis allé voir les css via l’outil de debug, elles sont bien prises en compte mais rien

Serait-ce parce que j'utilise article_anywhere et que mon article paraît dans le footer ?

Je bosse avec joomla 3.2 sur firefox 29 et en local pour l'instant.

Si vous avez des idées, recommandations ou des astuces plus simples pour avoir un tableau responsif dans un article (ou un éditeur qui me permette d'utiliser la tabulation comme le fait word), ce serait cool.

Merci pour votre aide,
Yann

[lomart]

Re : tableau responsif dans article

Bonjour,

C'est peut-être une faute de frappe
1/ J'ai copié responsive-tables.js dans le dossier js.
2/ <script type="text/javascript" src="templates/protohte/css/responsive-tables.js"></script>

La table .responsive est bien incluse dans des div table-wrapper et scrollable ?

Correctif:
Les classes table-wrapper et scrollable sont insérées par le JS donc mes 2 suggestions tombent à l'eau

Donc il faut envisager un conflit avec les autres propriétés des tables. Essayer de désactiver tout ce qui touche aux tables dans votre template de base

[lomart]

Re : tableau responsif dans article

Perso, j'utilise no-more-tables (http://bootsnipp.com/snippets/featur...psonsive-table)
C'est uniquement un css qui affiche les cellules les unes au-dessous des autres en ajoutant le titre de colonne devant.
Je trouve cela plus clair qu'un scroll horizontal

Mais comme toutes les tables responsives, cela sert à présenter des données sous forme de tableaux et non à la mise en page

[yservant]

Re : tableau responsif dans article

Bonjour et merci lomart pour cette réponse rapide

Au final, non, il n'y a pas de fautes de frappes dans mon code...elles sont justes présentes dans mon message...mais cela m'aurais arrangé que ça soit cela

J'ai tout revérifié par rapport au site et dans mon code, j'ai suivi à la lettre ce qu'ils disent de faire (qui n'est pas très compliqué) et ma table est très simple (puisque toujours du test) :

<table class="responsive">
<tbody>
<tr>
<td><a href="http://www.facebook.com/TrekkingChili">www.facebook.com/TrekkingChili</a></td>
<td><a href="http://www.facebook.com/TrekkingChili">www.facebook.com/TrekkingChili</a></td>
<td><a href="http://www.facebook.com/TrekkingChili">www.facebook.com/TrekkingChili</a></td>
<td><a href="http://www.facebook.com/TrekkingChili">www.facebook.com/TrekkingChili</a></td>
</tr>
</tbody>
</table>

Le code généré de leur page démo (de zurb) est identique au mien donc vois pas ce qui coince

Mon but était de passer outre la création de zones pour mettre des liens bien ordonnés dans le footer, style :
A.com B.com C.com D.com
E.com F.com etc...

Et aussi d'avoir une bonne mise en page de mes articles. Par exemple :
Table : cell1, une photo ; cell2, x lignes de commentaires centrées
Le "read more"
Le détail de l'offre.

Je suis noob dans le monde Joomla, je suis noob dans le développement internet ... donc ce n'est pas gagné.

Existe-t-il un éditeur pour joomla (3.2) qui me permettrait de faire, au moins, une bonne mise en page ? Je pourrais toujours tenter comme ça le temps de me perfectionner.

Merci pour l'aide.

[PieceOfCake]

Re : tableau responsif dans article

Sinon il y a aussi : http://www.web-eau.net/developpement/responsive-tables (pas cher : 5€, en français et un support de qualité, ej peux le dire c'est pas moi qui l'assure )

[lomart]

Re : tableau responsif dans article

Et aussi d'avoir une bonne mise en page de mes articles. Par exemple :
Table : cell1, une photo ; cell2, x lignes de commentaires centrées
Le "read more"
Le détail de l'offre.

C'est bien ce que j'avais cru comprendre.
Si la mise en page par tableau est honnie depuis une bonne dizaine d'années, elle est à proscrire totalement maintenant car elle ne permet pas du tout une mise en page responsive. Jamais tes utilisateurs ne vont alterner les scrolls horizontaux et verticaux pour lire ton article, même en fournissant l'aspirine ;-)
Ce travail est du ressort du template et du CSS !
Si le template est basé sur bootstrap, il faut faire avec 4 colonnes égales sur grand écran et l'une au-dessous de l'autre sur smartphone :
<div class="row">
<div class="span3"><img src="maphoto"></div>
<div class="span3 text-center">x lignes de commentaires centrées</div>
<div class="span3">Le "read more"</div>
<div class="span3">Le détail de l'offre.</div>
</div>

[yservant]

Re : tableau responsif dans article

Hola,

Merci Lomart et PieceOfCake...j'ai mis le temps à répondre mais il me faudrait des journées de 30h

PieceOfCake, j'habite au Chili et je n'ai pas encore droit à la CB donc...ben pas d'achats sur le net pour l'instant...mais je conserve l'info précieusement

Lomart, j'ai utilisé ta méthode pour refaire un peu le footer de protostar à mon goût (sur une copie de protostar) et ça marche impeccable

Pour ce qui est des articles, j'ai trouvé une page internet concernant des éditeurs pour joomla :

• JCE
• JCK
• CK editor

D'après votre expérience, Lomart et PieceOfCake (et tous ceux qui passe par ici ), quel serait votre choix ?

Je passerais le topic en "réglé" dans qq jours.

Yann

[PieceOfCake]

Re : tableau responsif dans article

Pour ce qui est des articles, j'ai trouvé une page internet concernant des éditeurs pour joomla :

• JCE
• JCK
• CK editor

D'après votre expérience, Lomart et PieceOfCake (et tous ceux qui passe par ici ), quel serait votre choix ?

Je passerais le topic en "réglé" dans qq jours.

Yann

JCE est l'éditeur utilisé par la majorité de la communauté semble t il. J'avais essayé JCK il y a un an environ, il présente des avantages indéniables de facilité (drag and drop entre autre) et de configuration en environnement multi-administrateurs, mais m'avait semblé à l'époque bien trop instable (dommage)

Si tu te lances dans cet outil, je suis intéressé par un retour sur la dernière version sortie récemment

Cordialement