Comment rendre mon forum Forumactif responsive ?

[AryaL]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : 22/10/2020
Lien du forum : https://hotelcortezrpg.forumactif.com/

Description du problème

Bien le bonjour à vous,

Je souhaiterai obtenir votre aide si possible car je dépane une personne pour un code, et je galère à avoir le même rendu sur téléphone et ordi, mais je n'y arrive pas, pourriez-vous me dire si vous savez comment faire ? les stats, derniers messages et l'îcône news ne ressort pas bien sur mobile et j'ignore d'où vient le problème :/
voici les codes :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie1">
 <div class="titrecategorie">{catrow.tablehead.L_FORUM}</div>
 
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
<span class="cattitle">
 <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
 </span>
          <br/>

 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 <!-- BEGIN inc -->
{catrow.forumrow.inc.INC_CLASS}<img src="{SPACER}" height="0" width="46" alt="." />
 <!-- END inc -->
  <div class="stats">{catrow.forumrow.TOPICS} Sujets | {catrow.forumrow.POSTS} Posts </div>

 <div class="titreforum"><h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
 </span>
  </h{catrow.forumrow.LEVEL}></div> <br/>
            
            <div class="avatarcate"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
  <div class="categoriedescription">{catrow.forumrow.FORUM_DESC}</div> <br/>
 
  <div class="listecategories">
 |{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </div>

<br>
 <div class="derniermessage">{catrow.forumrow.LAST_POST}
<span class="AD_LastInfos">
                    <b><a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a></b><br />
                    {catrow.forumrow.ads.DATE}<br />
                    {catrow.forumrow.ads.LOCATION}
  </span></div>
  <div class="imgcategorie">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- BEGIN inc -->
  {catrow.catfoot.inc.INC_CLASS}<img src="{SPACER}" height="0" width="46" />
 <!-- END inc -->
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
 </div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Code:

/*** ne pas toucher ***/

.categorie1{background-color: #f5f5f5;
width: 795px; margin: auto;}

.titrecategorie{background: url(https://i.servimg.com/u/f68/20/23/93/70/imagep10.jpg);
  background-position: center;
    background-repeat: no-repeat;
  width: 100%;
  height: 73px;}

.titrecategorie h2{color: #053E44;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: normal;
text-transform : uppercase;
line-height: 65px;}


.categoriedescription{background-color: #ffff;border: 1px solid #ececec;
width: 467px!important; height: 74px!important; overflow: auto; font-size: 11px;color: #4E555B; padding: 5px;font-family: Verdana;margin-left:75px;margin-top: -81px;}

.derniermessage{background-color: #ffff;border: 1px solid #ececec;
 height: 60px; display: inline-block;
    margin-left: 566px;
    margin-top: -100px;
    width: 229px; height: 44px; text-align: center;font-family: 'Lato', sans-serif!important; color: #8F8E8E!important; font-size: 10px!important; }

.derniermessage a{font-family: 'Gupter', serif!important; font-size:13px!important; color:#518B91!important;}

.derniermessage strong{font-family: 'Gupter', serif!important; color: #518B91!important; font-size: 12px!important; text-transform: uppercase!important;}


.listecategories{background-color: #ffff;border: 1px solid #ececec; width: 553px;margin-top: -10px; height: 23px; color : #00848a; font-weight: bold;}
.listecategories a{font-family: 'Gupter', serif; color: #00848a; font-size: 12px;    text-transform: uppercase;
    font-weight: bold;line-height: 25px; padding-left: 5px;}

.listecategories a:after {
   content:" | "; /* ou bien content:url('URL_IMG'); */
  
}

.titreforum{width: 400px; margin-left: 80px;margin-top: -1px;
    margin-bottom: -36px;}
.titreforum a{font-size: 16px!important; font-family: 'Amarante', cursive;text-decoration: none!important;}

.stats{background-color: #ffff;border: 1px solid #ececec; margin-top: 40px; margin-bottom: -45px;
    width: 229px; font-family: 'Amarante', cursive; text-align : center; color :#8F8E8E!important;font-size: 13px;line-height: 20px;margin-left: 566px;}
.imgcategorie{margin-top: -42px; width: 229px!important; height: 23px!important;margin-left: 566px;}

.avatarcate{float: none;
  display: block;height: 99px; width: 69px;}
.avatarcate img{height: 102px; width: 71px; border-radius: 0px; border: 1px solid #ececec;}

/*** ne pas toucher fin ***/



merci à vous c'est un peu urgent

[Bryx]

Bonjour,

Vous voulez dire que vous souhaitez avoir le même affichage sur ordinateur que sur mobile.
Nous sommes bien d'accord ? Et actuellement, vous avez la version mobile de Forumactif (ModernBB) ?

Bien cordialement,
Bryx

[AryaL]

bonjour,

oui c'est ça, car mon affichage ressort correctement sur ordi et lorsque je charge le forum sur téléphone (version web), mon écran déforme vraiment le code, et je voulais du coup savoir s'il y avait quelque chose de possible à faire pour que le rendu soit identique.
Je suis en php2 sur la version du forum, je pense être pareil sur mobile

encore merci d'avance pour votre aide

[Bryx]

Bonjour,

La version mobile de votre forum n'est pas la même que celle du codage que vous avez fait pour votre forum. Il est donc normal que la version web (donc non mobile sur mobile) ne soit pas adapté à l'écran de votre mobile. Cependant, ce n'est pas irréalisable, c'est même réalisable en réalité.

Si vous n'avez encore aucune notion en responsive :
- https://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html

Forumactif ne proposent pas un guide sur le responsive, Alsacréations est très complet et le tutoriel est parfait.
La version web (version Bureau) de votre forum à besoin d'une adaptation à tous les écrans pour éviter le problème que vous évoquez.

Votre forum était déjà très bien personnalisé, la version responsive devrait être un jeu d'enfant pour vous.
En réalité, j'ai déjà un aperçu du résultat de votre responsive, ça va être pas mal croyez-moi

Néanmoins, je vous propose de modifier le titre de " problème affichage non identique mobile/ordi " à " Comment rendre mon forum Forumactif responsive ? ". Qu'en pensez-vous et si vous avez besoin d'aide dans l'adaptation, je reste disponible, ainsi que le reste des membres du Forum des Forums Forumactif

Bien cordialement,
Bryx

[AryaL]

bonjour,

merci pour votre retour, je suis loin d'être une experte en codage, et je ne savais du coup pas comment appeler cela, je vais jeter un oeil sur le lien transmis, et je reviens si j'ai un soucis de compréhension ou autre

merci encore

[Bryx]

Bonjour,

Même si vous être loin d'être une experte, vous allez apprendre à être un véritable experte.
En complément du lien fournir, voici un cours sur le responsive qui vous sera également utile.
- https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries

Bien cordialement

[AryaL]

merci si c'est compris, la version de mon forum n'est pas adapté au responsive, du coup, il faut que je modifie certains endroits / pages du css, pour qu'il le devienne sans que je sois obligée de changer de version ?

J'ai trouvé à priori la balise que je dois utiliser, mais je ne comprends pas trop ce que je dois faire avec, placer, globalement chaque partie de mon css à l'intérieure, ou simplement insérer, des hauteurs, et des largeurs maximales ?
Je m'excuse par avance, ma question est peut-être pas très claire :/

[Bryx]

Oui, les forums ne sont pas adaptés par défaut.
Vous devez faire vous-même la version responsive et à votre goût.

Noter qu'il faut savoir :
- le HTML reste avec le HTML (JS inclus)
- le CSS reste avec le CSS (responsive inclus)

Puis-je connaître la balise en question.
Afin de ne pas vous envoyez vers une mauvaise piste.

Bien cordialement

[AryaL]

alors
de ce que je lis sur le lien que tu m'as envoyé, je dois me focaliser sur la partie relative aux "Media queries et navigateurs mobiles" (sur le lien que tu m'as transmis) et notamment !
"@media all and (max-device-width: 480px)
{
   /* Vos règles CSS pour les mobiles ici */
}"
Si  je ne me trompe pas jusque-là, une insertion de ce code, dans le css est-il suffisant ? en lisant ton post, je comprends que non (puis j'ai essayé xD)

du coup je me demande en fait, comment m'y prendre, pourriez-vous à titre d'exemple me guider sur un point particulier afin que je puisse comprendre et réussir à modifier éventuellement par exemple un autre code ensuite ?

merci

édit : je viens également de faire un petit test, en lisant le reste en insérant cette partie dans le template

Code:

<meta name="viewport" content="width=device-width" />

; à priori, cela me résoud partiellement le problème j'ai envie de dire c'est déjà pas mal, mais c'est pas encore ça. je réfléchis encore du coup

[Bryx]

Oui, il ne faut pas oublié la balise viewport, c'est ça dont je parlais précédemment.
Je suis navré de ne pas avoir été explicité à ce sujet, mais le reste ce faire en CSS (surtout le responsive).

Voici un exemple de CSS avec du responsive :

Code:

/* EST UNE CLASSE HTML EN CSS */
/* CELLE-CI PERMET L'AJOUT D'UN BOXING PAGE */
.forumactif {
    width: 500px; /* EQUIVAUT A LA LARGEUR DE LA PAGE */
    margin: 0 auto; /* CENTRE LE BODINX AU CENTRE DU NAVIGATEUR / PAGE */
    border: 50px solid #000; /* JE MET UNE BORDURE A 50PX POUR FAIRE MON CADRE */
    background: black; /* MET UNE COULEUR NOIR COMME ETANT UNE COULEUR DE FOND */
    padding: 15px /* EST UNE MARGE INTERNE */
}

/* JE VAIS FAIRE DE MON BOXING UNE PAGE RESPONSIVE */
/* ICI JE VAIS FAIRE EN SORTE QUE .FORUMACTIF SOIT EN PLAINE LARGEUR */
/* UNE LARGEUR MAXIMALE POUR LES ECRANS DE 480PX ET EN DESSOUS */
@media all and (max-device-width: 480px)
{
    /* JE VAIS FAIRE DE MA CLASSE HTML DANS MON CSS UN BOXING RESPONSIVE */
    /* JE VAIS PRENDRE EN COMPTE LA LARGEUR ET LA BORDURE TRES IMPORTANT */
   .forumactif {
       width: 100%; /* LA LARGEUR EST AUTOMATIQUE */
       border: 0px solid #000; /* JE SUPPRIME LA BORDURE AVEC OU SANS LA COULEUR */
   }
}

Bien sûr en HTML ça donne ceci :

Code:

<div class="forumactif">
    Forumactif c'est mieux que WordPress !!
</div>

Je suis heureux de voir que vous testez à comprendre.
Une fois cette compétence maîtrisée, ce serait très facile pour vous à l'avenir

Bien cordialement

EDIT : j'adore mettre des commentaires partout dans mon code, en plus c'est très important

[AryaL]

bonjour,


je suis donc sur la bonne voie

Si je prends en exemple ma barre de navigation, j'ai intégré du coup dans le template overall header ce bout de code :

Code:

<meta name="viewport" content="width=device-width" />

et j'ai rajouté du coup dans le css un bout, ce qui donne pour la partie navigation :

Code:

/* NAVIGATION */

.navig{background:rgb(78, 77, 74);
position: absolute;
top: 0px;
width: 100%;}

.navig a{font-family: 'Vidaloka', serif!important;
font-weight: bold;
color:rgb(116, 108, 108);
  font-size:13px!important;
text-transform:uppercase;
line-height: 30px;}

a:hover{text-decoration:none !important;}

@media all and (max-device-width: 480px)
  { .navig{width: 100%; /* LA LARGEUR EST AUTOMATIQUE */}
}
  
/* FIN NAVIGATION */

Je ne sais pas si j'ai juste ou faux, mais je préfère débuter par cette partie qui est la plus "simple" et "courte" pour commencer (ça n'a pas l'air de fonctionné) mais je persiste  

édit : jpense comprendre xD les valeurs template et css doivent correspondre si je ne m'abuse

[Bryx]

Bonjour,

Ce bout de code va prendre en compte le responsive, la balise par de largeur selon l'appareil.

Code:

<meta name="viewport" content="width=device-width" />

La navigation c'est plus compliquée que ça, mais oui c'est la bonne voie.
En réalité, le menu va être un menu déroulant en CSS ou bien couplé de CSS et de JQUERY.

Voici une page d'exemple (HTML, CSS, JQUERY) (en anglais, malheureusement) :
- https://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452

Recommandation : je recommande le JQUERY c'est très puissant.

Par contre, pour le reste de votre design (de votre thème), c'est ce qu'il faut faire.
Exemple : l'affichage des catégories + des forums

Bien cordialement

[AryaL]

Merci, j'ai réussi avec la navigation, mais c'est loin d'être le cas avec les catégories :

Code:

/*** ne pas toucher ***/

.categorie1{background-color: #f5f5f5;
width: 795px; margin: auto;}

@media all and (max-device-width: 1024px)
  { .categorie1{width: 100%; /* LA LARGEUR EST AUTOMATIQUE */ }
  .derniermessage{width: 30%; /* LA LARGEUR EST AUTOMATIQUE */ }
  .titreforum{width: 30%; /* LA LARGEUR EST AUTOMATIQUE */ }
  .stats{width: 30%; /* LA LARGEUR EST AUTOMATIQUE */ }
  .imgcategorie{width: 30%; /* LA LARGEUR EST AUTOMATIQUE */ }
 
}

.titrecategorie{background: url(https://i.servimg.com/u/f68/20/23/93/70/imagep10.jpg);
  background-position: center;
    background-repeat: no-repeat;
  width: 100%;
  height: 73px;margin-bottom: -10px;}

.titrecategorie h2{color: #053E44;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: normal;
text-transform : uppercase;
line-height: 65px;}

.categoriedescription{background-color: #ffff;border: 1px solid #ececec;
width: 460px!important; height: 74px!important; overflow: auto; font-size: 11px;color: #4E555B; padding: 5px;font-family: Verdana;margin-left:85px;margin-top: -80px;}

.derniermessage{background-color: #ffff;border: 1px solid #ececec;
 height: 60px; display: inline-block;
    margin-left: 575px;
    margin-top: -95px;
    width: 220px; height: 44px; text-align: center;font-family: 'Lato', sans-serif!important; color: #8F8E8E!important; font-size: 10px!important; }

.derniermessage a{font-family: 'Gupter', serif!important; font-size:13px!important; color:#518B91!important;}

.derniermessage strong{font-family: 'Gupter', serif!important; font-size: 12px!important; text-transform: uppercase!important;}

.listecategories{background-color: #ffff;border: 1px solid #ececec; width: 555px;margin-top: -15px; height: 23px; color : #00848a; Font-weight: normal;  }
.listecategories a{font-family: 'Gupter', sans serif;color: #00848a; font-size: 12px;    text-transform: uppercase;
    font-weight: normal;line-height: 25px; padding-left: 5px;}

.listecategories a:after {
  content:" | "; /* ou bien content:url('URL_IMG'); */ 
}
.titreforum{width: 400px; margin-left: 85px;margin-top: -1px;
    margin-bottom: -36px;}
.titreforum a{font-size: 16px!important; font-family: 'Amarante';Font-weight: normal;  cursive;text-decoration: none!important;}

.stats{background-color: #ffff;border: 1px solid #ececec; margin-top: 40px; margin-bottom: -45px;
    width: 220px; font-family: 'Amarante', cursive; text-align : center; color :#8F8E8E!important;font-size: 13px;line-height: 20px;margin-left: 575px;}
.imgcategorie{margin-top: -42px; width: 220px!important; height: 23px!important;margin-left: 575px;}

.avatarcate{float: none;
  display: block;height: 99px; width: 69px;}
.avatarcate img{height: 102px; width: 71px; border-radius: 0px; border: 3px solid #ffff;}

/*** ne pas toucher fin ***/

j'avoue que je serais pas contre un peu d'aide car je vois vraiment pas ce que je peux insérer d'autre, mis à part des largeurs j'ai pas de soucis avec des couleurs, etc... donc ça je touche pas mais je stagne un peu :/

[Bryx]

Malheureusement, je ne peux pas faire le codage pour vous.
Sinon, qu'elle serait l'intérêt de faire de la pratique pour apprendre.

Néanmoins, voici ce que vous devez adapter (largeur, affichage, etc) :
- Le logo
- Le message de bienvenue
- Les catégories et les forums
- Le qui est en ligne
- le corps de la base
=> balise body en html pas adapter pour mobile / tablette

Vous avez de nombreuses choses à finaliser.
Cependant, ça va vous prendre du temps et le mieux relire les liens fournis précédemment.
Et je ne vais pas vous mentir que je n’ai pas le temps de faire le codage responsive de votre forum.

Pour tester le responsive, soit vous installez " User-Agent Switcher " pour Google Chrome
Soit vous réduisez la fenêtre Google Chrome pour tester la version responsive.

Il faut savoir que le responsive s'active que si vous mettez vos balises CSS dans :

Code:

@media all and (max-device-width: 1024px)
{
// votre code CSS ici pour faire du responsive
}

C'est obligatoire, sinon vous risquez de faire tout dysfonctionner.

Au plaisir de vous aidez,
Bien cordialement

[AryaL]

Je sais bien
J'ai réussi partiellement en ayant un rendu correct sur mon propre mobile, mais ça reste sur une version potable à compter d'un S10 plus (ce qui risque de bouger, si la taille est plus petite ou encore plus grande de l'écran) (version droit et non couché) :
voici le CSS concerné pour mes catégories :

Code:

@media all and (max-device-width: 1024px)
  { .navig{width: 100%; /* LA LARGEUR EST AUTOMATIQUE */ }

.titrecategorie{margin-bottom: -10px;}
.categoriedescription{margin-left:85px;margin-top: -97px;}
  .avatarcate img{margin-top:-20px!important;}
  .listecategories{margin-top: -30px; }

.derniermessage{
    margin-left: 575px;
    margin-top: -115px;}

.imgcategorie{margin-top: -60px; margin-left: 575px;}
   
}
 

J'ignore si c'est bon, pas bon :/ mais c'est pas encore de l'automatique pour que ça s'adapte sur n'importe quel téléphone ;

J'aurais tenté quelque chose, si vous pensez qu'il y a mieux ; je suis preneuse

merci à vous et bonne soirée

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.