[PHPBB2] Forum décallé sur la droite

Coucou Pizi,

hum, je veux te filer un cop de main mais je ne vois aucune marge sur ton fofo chère amie.
Il faudrait qu'elle te donne une capture d'écran, c'est bien plus explicite

Grâce à la vue adaptive sur firefox je reproduis sa difficulté.
Ce qui est étrange c'est que ça semble être le contraire qui se produise sur le forum officiel (mais beaucoup moins prononcé pour le coup).

Vi Pizi, mais je ne sais toujours pas ce qui t'ennuie !!!
Peux tu m'aiguiller stp car même en me servant de la console du navigateur, rien ne me choque!!!!

Ou alors peut être une piste ici sur le sujet de Franck:
https://www.milouze14.com/t32801-resoluphpbb2-balise-td-qui-persiste#625431

Et mettre le style dans la feuille de style et non dans le template:

Code:

#M14_right{display: none!important;}

Bonjour Phil,

Pardon pour le retard de ma réponse mais je ne me connecte que très rarement le week-end :)
Voici une capture écran pour que tu vois ce qu'il se passe :



C'est ce que je vois de mon écran de portable, mon amie voit également un décalage (moins prononcé toutefois) sur son écran d'ordinateur. Je lui ai demandé une capture d'écran, je te l'enverrai dès que possible.

J'ai tenté la manipulation que tu m'as indiquée mais ça ne change rien :/

Coucou Pizi,

ben ce n'est pas le forum de ton profil ????
En regardant pas déduction sur le lien de ton iframe, j'ai trouvé le lien du fofo.
Le décalage serait dû à ce style:

Code:


.top-droite
{
    left: 35%;
    margin-top: -147px;
    position: relative;
}


Avec un margin-left:35% au lieu d'un left:35%;
, cela résout l'ascenseur en bas de page.
De toutes façon il est toujours recommandé de travailler en pourcentage au lieu des pixels et dans ton cas, c'est assez compliqué car on trouve partout body, page-body etc..

Merci de changer le lien du fofo dans ton profil Pizi afin que je ne me casse pas la tête a chercher....

Bonjour Phil,

Il y a confusion :) Le lien sur mon profil est bien le lien de mon forum.

Le code que je t'ai passé et le problème évoqué sont sur mon forum test : https://pizitest.forumactif.com/

Pour éviter de gêner les membres dans leur expérience sur le forum, on m'a conseillé de travailler mes codes sur forum test d'abord. Cela permet aussi d'anticiper les difficultés et bugs divers une fois le code mis en ligne sur le forum original.

Mais en effet, j'aurais dû te le préciser et te mettre le lien, toutes mes excuses pour cet oubli, je suis confuse.

Après avoir essayé la modification proposée, j'ai toujours le même souci de marge à droite mais il est moins prononcé.
Dois-je modifier sur mes position relative tous les top, left, etc... en margin-top, margin-left, etc... ? Cela viendrait de ça ?

Merci beaucoup :)

Re coucou Pizi,

Mais en effet, j'aurais dû te le préciser et te mettre le lien, toutes mes excuses pour cet oubli, je suis confuse.

Ah ben vi effectivement car a force de chercher sur ton fofo du profil puis ensuite sur le forum tests (IFRAME) , je déteste perdre mon temps surtout quand il n'y a pas le lien du forum concerné.

Comment veux tu que je puisse voir Pizi   .
Bref, à part cette partie qui dépasse très légèrement sur la droite:




Sinon, oui il est toujours préférable de travailler en position relative avec des: top,right,bottom,left
mais aussi avec des positions absolute avec des:
margin-top etc etc.

Il y a peut être une apparence différente en étant connecté sinon?
Peux tu me fournir en M.P un compte sur le forum décrit ?

Encore une fois, toutes mes excuses Phil, je n'y ai pas pensé et je comprends tout à fait ton énervement ^^

Tu es sûr que ça viendrait de là car on dirait que pourtant cette zone est bien alignée avec l'image de fond de la partie "membres connectés" ?

Ah oui en effet, lorsque l'on n'est pas connecté, la marge est très légèrement sur la gauche mais j'ai l'impression que c'est à cause du footer.
Il semble que la différence se fasse à la connexion.
Mais j'ai déjà remarqué que parfois j'ai des affichages différents sur certains éléments (comme la zone partenaire du footer) selon que l'on est connectés ou non et ça rend le codage assez compliqué...

C'est pas grave, as-tu un compte que je puisse voir ce qui cloche...

Tu es sûr que ça viendrait de là car on dirait que pourtant cette zone est bien alignée avec l'image de fond de la partie "membres connectés" ?

Ce n 'est pas les membres connectés Pizi mais bel et bien le staff.

Par contre il faut travailler en pourcentage et adapter ensuite.
Pour commencer:

Code:

#page-body {
    width: 60%;
    margin: auto;
}

.un_forum {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 45%;
    height: 200px;
    margin-top: 20px;
    margin-left: 1%;
    overflow: hidden;
    box-shadow: 0 1px 4px grey;
}
.un_forum:nth-child(2n+1) {
    margin-left: 1%;
}

Puis peut être ajouter les styles suivant sur les class:

Code:

.titreco
{
height: 40px;
}

.titrelist
{
height: 40px;
margin-top: -8px;
}

Bonjour Phil,

Je t'ai envoyé les coordonnées du compte par mp.
Dans l'attente je vais intégrer les codes proposés et voir si ça fonctionne ^^

Coucou Pizi,

penses a accepter le règlement chère amie:
https://www.milouze14.com/t32096-reglement-de-l-entraide-forumactif#610159

Je viens d'ajouter un champs et il n'est pas présent sur ton profil   .



alors je reviens de ton fofo de tests (merci pour le compte)  et je constate une légère marge vers la gauche et ceci est du au page-body:

Code:

#page-body {
    margin: auto;
    width: 920px;
}

Il faut mettre un 100% à la place de 920 px .

Le bloc des partenaires trop collé, mettre le bottom en négatif comme ceci

Code:


.blockpart
{
bottom: -2%;
}


Et ajouter margin-bottom au bloc des groupes car c'est collé avec la pub

Code:



.groupes
{
margin-bottom: 40px;
}

Ensuite il serait judicieux d'englober les divs du Qeel, tu as une table mais tu ne l'utilises pas pour y déposer ces fameuses divs.
Tu peux me donner le dit template et la css associée stp, que je teste sur mon fofo.

Coucou Pizi,
si on pouvait avancer un peu plus rapidement sur ton sujet,
ce serait sympa .

Bonjour Phil,

Pardon mais en ce moment j'ai de gros soucis personnels et je n'ai pas pu m'occuper du forum ces derniers jours.
J'ai ajouté les éléments de codes que tu m'as communiqués.
Par contre ça a complètement explosé mon QEEL du coup :/

Voici ci-dessous le code de l'index_body où se trouve le QEEL.

Code:

{JAVASCRIPT}
    <!-- BEGIN message_admin_index -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
    <!-- BEGIN message_admin_titre -->
    <tr>
    <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
    </tr>
    <!-- END message_admin_titre -->
    <!-- BEGIN message_admin_txt -->
    <tr>
    <td class="row1" rowspan="3" align="center" valign="middle">
    <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
    </td>
    </tr>
    <!-- END message_admin_txt -->
    </table>
    <!-- END message_admin_index -->

    <!-- BEGIN switch_user_login_form_header -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <!-- BEGIN switch_fb_connect_no -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td class="row1" align="center">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><span class="genmed">{L_USERNAME}:</span> </td>
    <td><input class="post" type="text" size="10" name="username"/> </td>
    <td>
    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
    <span class="gensmall">{L_AUTO_LOGIN}</span>
    </td>
    </tr>

    <tr>
    <td><span class="genmed">{L_PASSWORD}:</span> </td>
    <td><input class="post" type="password" size="10" name="password"/> </td>
    <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- END switch_fb_connect_no -->

    <!-- BEGIN switch_fb_connect -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td valign="top" width="100%" class="row1" align="center">
    <table width="100%">
    <tr>
    <td width="55%" valign="middle" align="right">
    <table class="right">
    <tr>
    <td><span class="genmed">{L_USERNAME}:</span> </td>
    <td><input class="post" type="text" size="10" name="username"/> </td>
    <td>
    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
    <span class="gensmall">{L_AUTO_LOGIN}</span>
    </td>
    </tr>

    <tr>
    <td><span class="genmed">{L_PASSWORD}:</span> </td>
    <td><input class="post" type="password" size="10" name="password"/> </td>
    <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
    </tr>
    </table>
    </td>
    <td width="10%" align="center" valign="middle">
    <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
    </td>
    <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- END switch_fb_connect -->
    </form>
    <!-- END switch_user_login_form_header -->

    {CHATBOX_TOP}
    {BOARD_INDEX}
    <!-- BEGIN switch_on_index -->
    <!-- END switch_on_index -->
    <!-- BEGIN switch_user_login_form_footer -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <!-- BEGIN switch_fb_connect_no -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td class="row1" align="center">
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><span class="genmed">{L_USERNAME}:</span> </td>
    <td><input class="post" type="text" size="10" name="username"/> </td>
    <td>
    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
    <span class="gensmall">{L_AUTO_LOGIN}</span>
    </td>
    </tr>

    <tr>
    <td><span class="genmed">{L_PASSWORD}:</span> </td>
    <td><input class="post" type="password" size="10" name="password"/> </td>
    <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- END switch_fb_connect_no -->

    <!-- BEGIN switch_fb_connect -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
    <tr>
    <td valign="top" width="100%" class="row1" align="center">
    <table width="100%">
    <tr>
    <td width="55%" valign="middle">
    <table class="right">
    <tr>
    <td><span class="genmed">{L_USERNAME}:</span> </td>
    <td><input class="post" type="text" size="10" name="username"/> </td>
    <td>
    <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
    <span class="gensmall">{L_AUTO_LOGIN}</span>
    </td>
    </tr>

    <tr>
    <td><span class="genmed">{L_PASSWORD}:</span> </td>
    <td><input class="post" type="password" size="10" name="password"/> </td>
    <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
    </tr>
    </table>
    </td>
    <td width="10%" align="center" valign="middle">
    <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
    </td>
    <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <!-- END switch_fb_connect -->
    </form>
<!-- END switch_user_login_form_footer -->
  <!-- BEGIN disable_viewonline -->
    <table class="qeelest" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr><img src="https://i.imgur.com/JRgLbDc.png" width="50%;" style="margin-left: 25%; margin-top: 20px; margin-bottom: 10px;" /></tr>
      <tr>
    <div class="qeelestHead" width="100%" align="center">
    <!-- BEGIN switch_viewonline_link -->
      <span class="qeelesttitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><span id="viewonline">{L_WHO_IS_ONLINE}</span></a></span>
    <!-- END switch_viewonline_link -->
     
    <!-- BEGIN switch_viewonline_nolink -->
        <span class="qeelesttitle">{L_WHO_IS_ONLINE}</span> </div>
    <!-- END switch_viewonline_nolink -->
    </tr></table>
      <div><div class="top-gauche"><img src="https://i.imgur.com/UVD7Zmj.png" style="widht: 300px; height: 171px;" />
        <span class="arrivant"><span id="newuser">{NEWEST_USER}</span>
        </span></div>
      <div class="top-droite"><span class="titreco">Ils se baladent en ville</span>
        <div class="blockcoimg">
          <div class="blockco">
            <div class="blockcotxt"><span class="coest"><span id="connect">{LOGGED_IN_USER_LIST}</span></span><br />
        <span class="usersonline">{TOTAL_USERS_ONLINE}</span>
            </div>
          </div>
        </div>
</div>
<div class="blocklistimg">
  <div class="blocklist"><table id="kaboum">{L_CONNECTED_MEMBERS}</table>
  </div>
  <span class="titrelist">Hors Ligne</span>
        </div>
<div class="stats">
  <span class="postest"><span id="messages">{TOTAL_POSTS}</span>
  </span>
  <div class="illu"><img src="https://i.imgur.com/Ix1VCG4.png" alt="Sceau" />
          </div>
  <span class="userest"><span id="totalusers">{TOTAL_USERS}</span>
  </span>
  <div class="illu"><img src="https://i.imgur.com/Ix1VCG4.png" alt="Sceau" />
          </div>
        </div></div>
      <script type="text/javascript">
jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 24 dernières heures : ',''));
</script>
<script type="text/javascript">
  document.getElementById('viewonline').innerHTML= document.getElementById('viewonline').innerHTML.replace(/Qui est en ligne/,"Qui a survécu");
  document.getElementById('newuser').innerHTML= document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"<u>Dernier arrivant</u><br />");
  document.getElementById('messages').innerHTML= document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de (.+) message(s?)/,"$1 <br />message$2");
  document.getElementById('totalusers').innerHTML= document.getElementById('totalusers').innerHTML.replace(/Nous avons (.+) membre(s?) enregistrés?/,"$1 <br />membre$2");
  document.getElementById('connect').innerHTML= document.getElementById('connect').innerHTML.replace(/Utilisateurs enregistrés :/,"");
</script>
<div class="ongletimg"><div class="contenu-onglets">
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_seigneurs">Responsables d'un ou plusieurs groupes de survivants ou anciens seigneurs avant le Cataclysme. Ils ont tous été reconnus officiellement par la Reine. Leur but : reconstruire le royaume d'Estéria et lui rendre sa splendeur d'antan.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_religieux">Qu'ils croient en un seul ou plusieurs dieu(x), ces personnes ont choisi de consacrer leur vie à leur religion. Amenés à voyager pour certains ou dédiés à leurs fidèles dans un territoire fixe, ils cherchent à asseoir la domination de leur religion, la seule à prêcher la bonne parole.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_renegats">Ce ne sont pas de simples bandits ou pillards. Ces survivants croient pour des raisons qui sont les leurs que l'ancien système est mort et souhaitent profiter du Cataclysme pour instaurer un ordre nouveau où chacun aurait sa place.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_civils">Survivants qui ont repris pour la plupart leurs anciennes fonctions. Ils souhaitent que la vie reprenne son cours normal sans s'intéresser plus que cela aux jeux de pouvoirs. Cela ne les empêche pas pour autant d'avoir un avis sur la question.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_disparus">Cela fait un moment que l'on ne les voit plus sur nos terres, toutefois ils sont encore présents dans les coeurs de chacun. Ils sont susceptibles de pouvoir revenir à tout moment.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_legendes">Comme dans tout royaume, Estéria pleure ses morts. Sans aucun espoir de retour, leurs aventures leur auront prit bien plus que du temps et de l'énergie. Ils ont perdu la vie et sont pleurés des leurs.</div>
  <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_staff">Administrateurs du forum, n'hésitez pas à les contacter pour poser vos questions ou pour signaler toute difficulté ou bug rencontré sur le forum. On vous le promet, ils ne mordent pas.</div>     
  </div></div>
<div class="descripimg">
  <div class="image_groupe_onglet" id="image_groupe_onglet_seigneurs"><span class="descripseigneur">Seigneurs</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_religieux"><span class="descripreligieux">Religieux</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_renegats"><span class="descriprenegats">Renégats</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_civils"><span class="descripcivils">Civils</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_disparus"><span class="descripdisparus">Disparus</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_legendes"><span class="descriplegendes">Légendes</span></div>
  <div class="image_groupe_onglet" id="image_groupe_onglet_staff"><span class="descripstaff">Staff</span></div>     
</div>
<div class="groupes"><div class="block-onglets">
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_seigneurs" onmouseover="javascript:change_groupe_onglet('seigneurs');"><img src="https://i.imgur.com/9tOWx28.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_religieux" onmouseover="javascript:change_groupe_onglet('religieux');"><img src="https://i.imgur.com/H16xb9S.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_renegats" onmouseover="javascript:change_groupe_onglet('renegats');"><img src="https://i.imgur.com/HcK5UmS.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_civils" onmouseover="javascript:change_groupe_onglet('civils');"><img src="https://i.imgur.com/sGueo1I.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_disparus" onmouseover="javascript:change_groupe_onglet('disparus');"><img src="https://i.imgur.com/VuHXgf8.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_legendes" onmouseover="javascript:change_groupe_onglet('legendes');"><img src="https://i.imgur.com/TbOoeFl.png" /></span>
  <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_staff" onmouseover="javascript:change_groupe_onglet('staff');"><img src="https://i.imgur.com/eX8mjRq.png" /></span>
  </div></div>
<script type="text/javascript">
                        //<!--
                                function change_groupe_onglet(name)
                                {
                                        document.getElementById('groupe_onglet_'+anc_groupe_onglet).className = 'groupe_onglet_0 groupe_onglet';
                                        document.getElementById('groupe_onglet_'+name).className = 'groupe_onglet_1 groupe_onglet';
                                        document.getElementById('contenu_groupe_onglet_'+anc_groupe_onglet).style.display = 'none';
                                        document.getElementById('contenu_groupe_onglet_'+name).style.display = 'block';
                     document.getElementById('image_groupe_onglet_'+anc_groupe_onglet).style.display = 'none';
                                        document.getElementById('image_groupe_onglet_'+name).style.display = 'block';
                                        anc_groupe_onglet = name;
                                }
                        //-->
</script>
<script type="text/javascript">
                        //<!--
                                var anc_groupe_onglet = 'seigneurs';
                                change_groupe_onglet(anc_groupe_onglet);
                        //-->
          </script>
 
    <!-- BEGIN switch_chatbox_activate -->
   
    <!-- END switch_chatbox_activate -->
  
    <!-- END disable_viewonline -->
    <!-- BEGIN switch_legend -->
    <!-- END switch_legend -->

    {AUTO_DST}

    <!-- BEGIN switch_fb_index_login -->
    <div id="fb-root"></div>
    <script type="text/javascript">
    //<![CDATA[
    FB.init({
    appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
    oauth: true
    });
    //]]>
    </script>
    <!-- END switch_fb_index_login -->

Il est à noter que pour le codage du "connected members", on est obligés de passer par un table pour le modifier. Or sa présence dans un table plus grand empêcher le code de s'appliquer. D'où le fait que je ne sois pas passé par un table pour coder le QEEL.

J'ai bien sûr, signé le règlement comme demandé :)
En revanche, je ne vois pas du tout le champs de profil qui ne serait pas renseigné O.o

Merci beaucoup.

Coucou Pizi,
désolé pour tes soucis personnels, on va donc prendre le temps chère amie.
Bref, comme tu restes avec des pixels, il faut aussi dimensionner la table du qeel et les divs avec les mêmes dimensions Pizi:

Voici le template modifié(tu pourras toujours récupérer le tien sur ton message en cas ou cela
n'irait pas):

Code:

    {JAVASCRIPT}
        <!-- BEGIN message_admin_index -->
        <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
        <!-- BEGIN message_admin_titre -->
        <tr>
        <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
        </tr>
        <!-- END message_admin_titre -->
        <!-- BEGIN message_admin_txt -->
        <tr>
        <td class="row1" rowspan="3" align="center" valign="middle">
        <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
        </td>
        </tr>
        <!-- END message_admin_txt -->
        </table>
        <!-- END message_admin_index -->

        <!-- BEGIN switch_user_login_form_header -->
        <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
        <!-- BEGIN switch_fb_connect_no -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
        <td class="row1" align="center">
        <table border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td><span class="genmed">{L_USERNAME}:</span> </td>
        <td><input class="post" type="text" size="10" name="username"/> </td>
        <td>
        <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
        <span class="gensmall">{L_AUTO_LOGIN}</span>
        </td>
        </tr>

        <tr>
        <td><span class="genmed">{L_PASSWORD}:</span> </td>
        <td><input class="post" type="password" size="10" name="password"/> </td>
        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
        </tr>
        </table>
        </td>
        </tr>
        </table>
        <!-- END switch_fb_connect_no -->

        <!-- BEGIN switch_fb_connect -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
        <td valign="top" width="100%" class="row1" align="center">
        <table width="100%">
        <tr>
        <td width="55%" valign="middle" align="right">
        <table class="right">
        <tr>
        <td><span class="genmed">{L_USERNAME}:</span> </td>
        <td><input class="post" type="text" size="10" name="username"/> </td>
        <td>
        <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
        <span class="gensmall">{L_AUTO_LOGIN}</span>
        </td>
        </tr>

        <tr>
        <td><span class="genmed">{L_PASSWORD}:</span> </td>
        <td><input class="post" type="password" size="10" name="password"/> </td>
        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
        </tr>
        </table>
        </td>
        <td width="10%" align="center" valign="middle">
        <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
        </td>
        <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
        </tr>
        </table>
        </td>
        </tr>
        </table>
        <!-- END switch_fb_connect -->
        </form>
        <!-- END switch_user_login_form_header -->

        {CHATBOX_TOP}
        {BOARD_INDEX}
        <!-- BEGIN switch_on_index -->
        <!-- END switch_on_index -->
        <!-- BEGIN switch_user_login_form_footer -->
        <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
        <!-- BEGIN switch_fb_connect_no -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
        <td class="row1" align="center">
        <table border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td><span class="genmed">{L_USERNAME}:</span> </td>
        <td><input class="post" type="text" size="10" name="username"/> </td>
        <td>
        <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
        <span class="gensmall">{L_AUTO_LOGIN}</span>
        </td>
        </tr>

        <tr>
        <td><span class="genmed">{L_PASSWORD}:</span> </td>
        <td><input class="post" type="password" size="10" name="password"/> </td>
        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
        </tr>
        </table>
        </td>
        </tr>
        </table>
        <!-- END switch_fb_connect_no -->

        <!-- BEGIN switch_fb_connect -->
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
        <td valign="top" width="100%" class="row1" align="center">
        <table width="100%">
        <tr>
        <td width="55%" valign="middle">
        <table class="right">
        <tr>
        <td><span class="genmed">{L_USERNAME}:</span> </td>
        <td><input class="post" type="text" size="10" name="username"/> </td>
        <td>
        <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
        <span class="gensmall">{L_AUTO_LOGIN}</span>
        </td>
        </tr>

        <tr>
        <td><span class="genmed">{L_PASSWORD}:</span> </td>
        <td><input class="post" type="password" size="10" name="password"/> </td>
        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
        </tr>
        </table>
        </td>
        <td width="10%" align="center" valign="middle">
        <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
        </td>
        <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
        </tr>
        </table>
        </td>
        </tr>
        </table>
        <!-- END switch_fb_connect -->
        </form>
    <!-- END switch_user_login_form_footer -->
      <!-- BEGIN disable_viewonline -->
        <table class="qeelest" style="width:950px;margin: auto;">
          <tr><img src="https://i.imgur.com/JRgLbDc.png" width="50%;" style="margin-left: 25%; margin-top: 20px; margin-bottom: 10px;" /></tr>
          <tr>
        <div class="qeelestHead" style="width:950px;margin: auto;text-align:center">
        <!-- BEGIN switch_viewonline_link -->
          <span class="qeelesttitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><span id="viewonline">{L_WHO_IS_ONLINE}</span></a></span>
        <!-- END switch_viewonline_link -->
       
        <!-- BEGIN switch_viewonline_nolink -->
            <span class="qeelesttitle">{L_WHO_IS_ONLINE}</span> </div>
        <!-- END switch_viewonline_nolink -->
        </tr></table>
          <div style="width:950px;margin: auto;"><div class="top-gauche"><img src="https://i.imgur.com/UVD7Zmj.png" style="widht: 300px; height: 171px;" />
            <span class="arrivant"><span id="newuser">{NEWEST_USER}</span>
            </span></div>
          <div class="top-droite"><span class="titreco">Ils se baladent en ville</span>
            <div class="blockcoimg">
              <div class="blockco">
                <div class="blockcotxt"><span class="coest"><span id="connect">{LOGGED_IN_USER_LIST}</span></span><br />
            <span class="usersonline">{TOTAL_USERS_ONLINE}</span>
                </div>
              </div>
            </div>
    </div>
    <div class="blocklistimg">
      <div class="blocklist"><table id="kaboum">{L_CONNECTED_MEMBERS}</table>
      </div>
      <span class="titrelist">Hors Ligne</span>
            </div>
    <div class="stats">
      <span class="postest"><span id="messages">{TOTAL_POSTS}</span>
      </span>
      <div class="illu"><img src="https://i.imgur.com/Ix1VCG4.png" alt="Sceau" />
              </div>
      <span class="userest"><span id="totalusers">{TOTAL_USERS}</span>
      </span>
      <div class="illu"><img src="https://i.imgur.com/Ix1VCG4.png" alt="Sceau" />
              </div>
            </div></div>
          <script type="text/javascript">
    jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 24 dernières heures : ',''));
    </script>
    <script type="text/javascript">
      document.getElementById('viewonline').innerHTML= document.getElementById('viewonline').innerHTML.replace(/Qui est en ligne/,"Qui a survécu");
      document.getElementById('newuser').innerHTML= document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"<u>Dernier arrivant</u><br />");
      document.getElementById('messages').innerHTML= document.getElementById('messages').innerHTML.replace(/Nos membres ont posté un total de (.+) message(s?)/,"$1 <br />message$2");
      document.getElementById('totalusers').innerHTML= document.getElementById('totalusers').innerHTML.replace(/Nous avons (.+) membre(s?) enregistrés?/,"$1 <br />membre$2");
      document.getElementById('connect').innerHTML= document.getElementById('connect').innerHTML.replace(/Utilisateurs enregistrés :/,"");
    </script>
    <div class="ongletimg"><div class="contenu-onglets">
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_seigneurs">Responsables d'un ou plusieurs groupes de survivants ou anciens seigneurs avant le Cataclysme. Ils ont tous été reconnus officiellement par la Reine. Leur but : reconstruire le royaume d'Estéria et lui rendre sa splendeur d'antan.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_religieux">Qu'ils croient en un seul ou plusieurs dieu(x), ces personnes ont choisi de consacrer leur vie à leur religion. Amenés à voyager pour certains ou dédiés à leurs fidèles dans un territoire fixe, ils cherchent à asseoir la domination de leur religion, la seule à prêcher la bonne parole.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_renegats">Ce ne sont pas de simples bandits ou pillards. Ces survivants croient pour des raisons qui sont les leurs que l'ancien système est mort et souhaitent profiter du Cataclysme pour instaurer un ordre nouveau où chacun aurait sa place.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_civils">Survivants qui ont repris pour la plupart leurs anciennes fonctions. Ils souhaitent que la vie reprenne son cours normal sans s'intéresser plus que cela aux jeux de pouvoirs. Cela ne les empêche pas pour autant d'avoir un avis sur la question.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_disparus">Cela fait un moment que l'on ne les voit plus sur nos terres, toutefois ils sont encore présents dans les coeurs de chacun. Ils sont susceptibles de pouvoir revenir à tout moment.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_legendes">Comme dans tout royaume, Estéria pleure ses morts. Sans aucun espoir de retour, leurs aventures leur auront prit bien plus que du temps et de l'énergie. Ils ont perdu la vie et sont pleurés des leurs.</div>
      <div class="contenu_groupe_onglet" id="contenu_groupe_onglet_staff">Administrateurs du forum, n'hésitez pas à les contacter pour poser vos questions ou pour signaler toute difficulté ou bug rencontré sur le forum. On vous le promet, ils ne mordent pas.</div>   
      </div></div>
    <div class="descripimg">
      <div class="image_groupe_onglet" id="image_groupe_onglet_seigneurs"><span class="descripseigneur">Seigneurs</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_religieux"><span class="descripreligieux">Religieux</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_renegats"><span class="descriprenegats">Renégats</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_civils"><span class="descripcivils">Civils</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_disparus"><span class="descripdisparus">Disparus</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_legendes"><span class="descriplegendes">Légendes</span></div>
      <div class="image_groupe_onglet" id="image_groupe_onglet_staff"><span class="descripstaff">Staff</span></div>   
    </div>
    <div class="groupes"><div class="block-onglets">
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_seigneurs" onmouseover="javascript:change_groupe_onglet('seigneurs');"><img src="https://i.imgur.com/9tOWx28.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_religieux" onmouseover="javascript:change_groupe_onglet('religieux');"><img src="https://i.imgur.com/H16xb9S.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_renegats" onmouseover="javascript:change_groupe_onglet('renegats');"><img src="https://i.imgur.com/HcK5UmS.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_civils" onmouseover="javascript:change_groupe_onglet('civils');"><img src="https://i.imgur.com/sGueo1I.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_disparus" onmouseover="javascript:change_groupe_onglet('disparus');"><img src="https://i.imgur.com/VuHXgf8.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_legendes" onmouseover="javascript:change_groupe_onglet('legendes');"><img src="https://i.imgur.com/TbOoeFl.png" /></span>
      <span class="groupe_onglet_0 groupe_onglet" id="groupe_onglet_staff" onmouseover="javascript:change_groupe_onglet('staff');"><img src="https://i.imgur.com/eX8mjRq.png" /></span>
      </div></div>
    <script type="text/javascript">
                            //<!--
                                    function change_groupe_onglet(name)
                                    {
                                            document.getElementById('groupe_onglet_'+anc_groupe_onglet).className = 'groupe_onglet_0 groupe_onglet';
                                            document.getElementById('groupe_onglet_'+name).className = 'groupe_onglet_1 groupe_onglet';
                                            document.getElementById('contenu_groupe_onglet_'+anc_groupe_onglet).style.display = 'none';
                                            document.getElementById('contenu_groupe_onglet_'+name).style.display = 'block';
                        document.getElementById('image_groupe_onglet_'+anc_groupe_onglet).style.display = 'none';
                                            document.getElementById('image_groupe_onglet_'+name).style.display = 'block';
                                            anc_groupe_onglet = name;
                                    }
                            //-->
    </script>
    <script type="text/javascript">
                            //<!--
                                    var anc_groupe_onglet = 'seigneurs';
                                    change_groupe_onglet(anc_groupe_onglet);
                            //-->
              </script>
   
        <!-- BEGIN switch_chatbox_activate -->
     
        <!-- END switch_chatbox_activate -->
     
        <!-- END disable_viewonline -->
        <!-- BEGIN switch_legend -->
        <!-- END switch_legend -->

        {AUTO_DST}

        <!-- BEGIN switch_fb_index_login -->
        <div id="fb-root"></div>
        <script type="text/javascript">
        //<![CDATA[
        FB.init({
        appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
        status: true,
        cookie: true,
        xfbml: true,
        oauth: true
        });
        //]]>
        </script>
        <!-- END switch_fb_index_login -->

Bonsoir Phil,

Aucun souci, tu ne pouvais pas savoir :)
Je suis plutôt réactive en général ^^ (sauf le soir et le week-end ahah)

J'ai remplacé le template par celui que tu as modifié et les choses semblent globalement revenues à leur place sur le QEEL excepté l'affichage des groupes (description, image sur le côté et les petites roues).
Sur le téléphone, cela provoque une petite marge à droite mais qui semble s'expliquer par rapport à ce décalage.

Je ne sais pas ce que tu en penses ?

Merci Pizi .

Pour les groupes :

Il faut englober les divs suivantess ayant ces class:
ongletimg
descripimg
groupes

Dans une div identique aux deux autres:

Code:


<div style="width:950px;margin: auto;">
les trois divs
</div>


je ne fais jamais de tests sur les Cells Pizi,
il faut aussi mettre des styles spécifiques selon la résolution et rotation d'écran et encore ,
c'est un vrai casse tête...

Un peu de lecture pour comprendre et surtout encombrer ta feuille de style:

https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Bonjour Phil,

Comme prévu, il n'y a plus de décalage, merci infiniment.
Par contre au niveau du QEEL l'onglet du groupe est un peu décalé sur la droite par rapport à "Ils se baladent en ville".
Normalement les deux doivent avoir leur côté droit aligné.
Je dois modifier via le css pour arranger cela ? (je n'ose plus toucher ahahah !)

Coucou Pizi,

Comme prévu, il n'y a plus de décalage, merci infiniment.

De rien.


Il faut surement retoucher la css,
au moins a partir de maintenant tout est bien entouré.
En réduisant les valeurs du left ici:

Code:

.stats a 34%

Code:

.ongletimg a 57%

Code:

.descripimg a 88%

Ça devrait être bon Pizi

Phil,

J'ai pu modifier avec tes indications et corriger les éléments :)
Tout est parfait, merci beaucoup.
J'espère que j'aurais moins de mal la prochaine fois :)

De rien chère amie,

J'espère que j'aurais moins de mal la prochaine fois

Il faut toujours garder espoir .