Passer un tableau en responsive [Réglé]
MickaelFR Membre non connecté
-
Booster Fusée
- Voir le profil du membre MickaelFR
- Inscrit le : 20/01/2014
- Site internet
- Groupes :
J'ai travaillé pas mal mon footer avec un simple tabeau et CSS pour un petit box-shadow ect ... Seulement, celui-ci n'est forcément, pas responsive .. Moche sous mobile donc ..
Ne connaissant pas du tout le langage, je me permet un sujet afin de passer le footer en responsive (Via css je présume).
Voici mon body.tpl.
<a href="/upload/body.zip">body.zip</a>
Merci par avance <img src="/images/smileys/top.png" alt=":top" class="smiley" />
benflovideo Membre non connecté
-
Modérateur
- Voir le profil du membre benflovideo
- Inscrit le : 13/03/2010
- Groupes :
-
Equipe Modération
-
Equipe Communication
Sur internet je pense que tu peux facilement trouver des exemples de tableau responsive. En t'en inspirant il ne te reste plus qu'à adapté ton code
Benji
Édit : Sujet déplacé
Édité par benflovideo Le 02/05/2016 à 18h54
MickaelFR Membre non connecté
-
Booster Fusée
- Voir le profil du membre MickaelFR
- Inscrit le : 20/01/2014
- Site internet
- Groupes :
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
les tableaux sont responsive sur pbt
Il suffit de rajouter une id sur la balise table, il y a 5 id de prévues table1, table2, ... table5
il faudra juste que ton tableaux ne se retrouve pas sur la même page qu'un autre tableau ayant la meme id
essaye avec <table id="table5">
sinon, pour être tranquille, tu peux créer une id table6, en copiant une de celle existante à la fin du fichier /templates/default/js_bottom.tpl
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
PaperToss Membre non connecté
-
Booster Bazooka
- Voir le profil du membre PaperToss
- Inscrit le : 25/03/2016
Au lieu d'utiliser des ID avec un nombre arbitrairement choisi (si je fais un module et que j'ai besoin de 15 tableaux, que se passe t-il ? ), pourquoi ne pas utiliser les classes pour le JS ?
Cordialement.
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
Code JAVASCRIPT :
jQuery('.MaClasseTable').basictable();
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
MickaelFR Membre non connecté
-
Booster Fusée
- Voir le profil du membre MickaelFR
- Inscrit le : 20/01/2014
- Site internet
- Groupes :
plop
les tableaux sont responsive sur pbt
Il suffit de rajouter une id sur la balise table, il y a 5 id de prévues table1, table2, ... table5
il faudra juste que ton tableaux ne se retrouve pas sur la même page qu'un autre tableau ayant la meme id
essaye avec <table id="table5">
sinon, pour être tranquille, tu peux créer une id table6, en copiant une de celle existante à la fin du fichier /templates/default/js_bottom.tpl
les tableaux sont responsive sur pbt
Il suffit de rajouter une id sur la balise table, il y a 5 id de prévues table1, table2, ... table5
il faudra juste que ton tableaux ne se retrouve pas sur la même page qu'un autre tableau ayant la meme id
essaye avec <table id="table5">
sinon, pour être tranquille, tu peux créer une id table6, en copiant une de celle existante à la fin du fichier /templates/default/js_bottom.tpl
Salut, superbe info !
J'y suis arrivé en rajoutant un simple ID
.. Faut pas chercher bien loin parfois, et je t'en remercie.Bon en revanche, j'ai du texte en double en responsive, et non sur PC, c'est bizarre .. Voici mon tableau (N'ayez pas peur hein?)
Code HTML :
<table id="table6" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="25%" align="center" valign="middle" style="background-color:#2f2f2f;" ><h2 class="Style2">ACCES RAPIDE</h2> </span></td> <td width="25%" align="center" valign="middle" style="background-color:#2f2f2f;" ><h2 class="Style2">NOS PARTENAIRES</h2></span></td> <td width="25%" align="center" valign="middle" style="background-color:#2f2f2f;" ><h2 class="Style2">RESEAUX SOCIAUX</h2></td> <td width="25%" align="center" valign="middle" style="background-color:#2f2f2f;" ><h2 class="Style2">NOUS CONTACTER</h2></td> </tr> <tr> <td width="25%" valign="top" style="background-color:#2f2f2f; text-align:left; color:#fff; padding:20px; box-shadow: 0px 2px 2px black;"> <a class="fa-footer-autres" href="{PATH_TO_ROOT}"><i class="fa fa-home" aria-hidden="true"></i> Accueil du site</a> <a class="fa-footer-autres" href="{PATH_TO_ROOT}/forum"><i class="fa fa-users" aria-hidden="true"></i> Le forum</a> </td> <td width="25%" valign="top" style="background-color:#2f2f2f; text-align:left; color:#fff; padding:20px; box-shadow: 0px 2px 2px black;"> <a class="fa-footer-autres" href="{PATH_TO_ROOT}/web/2-partenaires/11-g-rom-technic"><i class="fa fa-briefcase" aria-hidden="true"></i> G-rom technic</a> <a class="fa-footer-autres" href="{PATH_TO_ROOT}/web/2-partenaires/14-jobtransport"><i class="fa fa-briefcase" aria-hidden="true"></i> Job Transport</a> <a class="fa-footer-autres" href="{PATH_TO_ROOT}/web/2-partenaires/6-lctn-le-carburant-de-votre-passion"><i class="fa fa-briefcase" aria-hidden="true"></i> Lctn</a> <a class="fa-footer-autres" href="{PATH_TO_ROOT}/web/2-partenaires/13-le-p-tit-bolide"><i class="fa fa-briefcase" aria-hidden="true"></i> le p'tit bolide</a> <a class="fa-footer-edn" target="_blank" href="http://easy-design.net"><i class="fa fa-briefcase" aria-hidden="true"></i> EDN</a> </td> <td width="25%" valign="top" style="background-color:#2f2f2f; text-align:center; color:#fff; padding:20px; box-shadow: 0px 2px 2px black;"> <a class="fa-footer-fb" target="_blank" href="https://www.facebook.com/PlanetTruck/"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a> <a class="fa-footer-google-plus" target="_blank" href="#"><i class="fa fa-google-plus fa-2x" aria-hidden="true"></i></a> <a class="fa-footer-twitter" target="_blank" href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a> <a class="fa-footer-youtube" target="_blank" href="#"><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i></a> </td> <td width="25%" valign="top" style="background-color:#2f2f2f; text-align:left; color:#fff; padding:20px; box-shadow: 0px 2px 2px black;"> <a class="fa-footer-autres" href="mailto:mickael@planet-truck.fr"><i class="fa fa-envelope" aria-hidden="true"></i> Contactez le webmasteur</a> </td> </tr> </table>
babsolune Membre non connecté
-
Administrateur
- Voir le profil du membre babsolune
- Inscrit le : 16/05/2008
- Site internet
- Groupes :
-
Equipe Développement
Code HTML :
<table id="table6"> <thead> <tr> <th align="center" valign="middle" style="background-color:#2f2f2f;" ><h2 class="Style2">ACCES RAPIDE</h2> </span></td> <th align="center" valign="middle" style="background-color:#2f2f2f;" ><h2 class="Style2">NOS PARTENAIRES</h2></span></td> <th align="center" valign="middle" style="background-color:#2f2f2f;" ><h2 class="Style2">RESEAUX SOCIAUX</h2></td> <th align="center" valign="middle" style="background-color:#2f2f2f;" ><h2 class="Style2">NOUS CONTACTER</h2></td> </tr> </thead> <tbody> <tr> <td width="25%" valign="top" style="background-color:#2f2f2f; text-align:left; color:#fff; padding:20px; box-shadow: 0px 2px 2px black;"> <a class="fa-footer-autres" href="/forum/{PATH_TO_ROOT}"><i class="fa fa-home" aria-hidden="true"></i> Accueil du site</a> <a class="fa-footer-autres" href="/forum/{PATH_TO_ROOT}/forum"><i class="fa fa-users" aria-hidden="true"></i> Le forum</a> </td> <td width="25%" valign="top" style="background-color:#2f2f2f; text-align:left; color:#fff; padding:20px; box-shadow: 0px 2px 2px black;"> <a class="fa-footer-autres" href="/forum/{PATH_TO_ROOT}/web/2-partenaires/11-g-rom-technic"><i class="fa fa-briefcase" aria-hidden="true"></i> G-rom technic</a> <a class="fa-footer-autres" href="/forum/{PATH_TO_ROOT}/web/2-partenaires/14-jobtransport"><i class="fa fa-briefcase" aria-hidden="true"></i> Job Transport</a> <a class="fa-footer-autres" href="/forum/{PATH_TO_ROOT}/web/2-partenaires/6-lctn-le-carburant-de-votre-passion"><i class="fa fa-briefcase" aria-hidden="true"></i> Lctn</a> <a class="fa-footer-autres" href="/forum/{PATH_TO_ROOT}/web/2-partenaires/13-le-p-tit-bolide"><i class="fa fa-briefcase" aria-hidden="true"></i> le p'tit bolide</a> <a class="fa-footer-edn" target="_blank" href="http://easy-design.net"><i class="fa fa-briefcase" aria-hidden="true"></i> EDN</a> </td> <td width="25%" valign="top" style="background-color:#2f2f2f; text-align:center; color:#fff; padding:20px; box-shadow: 0px 2px 2px black;"> <a class="fa-footer-fb" target="_blank" href="https://www.facebook.com/PlanetTruck/"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a> <a class="fa-footer-google-plus" target="_blank" href="#"><i class="fa fa-google-plus fa-2x" aria-hidden="true"></i></a> <a class="fa-footer-twitter" target="_blank" href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a> <a class="fa-footer-youtube" target="_blank" href="#"><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i></a> </td> <td width="25%" valign="top" style="background-color:#2f2f2f; text-align:left; color:#fff; padding:20px; box-shadow: 0px 2px 2px black;"> <a class="fa-footer-autres" href="mailto:mickael@planet-truck.fr"><i class="fa fa-envelope" aria-hidden="true"></i> Contactez le webmasteur</a> </td> </tr> </tbody> </table>
le fait de mettre le css dans le html, tu ne pourras pas ajuster la mise en page en mobile
Édité par babsolune Le 03/05/2016 à 07h40
Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site
MickaelFR Membre non connecté
-
Booster Fusée
- Voir le profil du membre MickaelFR
- Inscrit le : 20/01/2014
- Site internet
- Groupes :
Pour le CSS je sais bien, mais je ne sais pas le mettre en CSS sans faire d'erreur (il existe des CSS TD TR ect ... donc tout se mélange et j'avoue ne pas m'en sortir. Donc, je fais comme ça marche et surtout comme je connais au mieux
Merci encore pour le temps pris pour moi
Répondre
Sujet verrouillé, vous ne pouvez pas poster de message