Qui est en ligne en deux colonnes

[Shawn Gryffondor]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour, j'ai lu plusieurs sujets et suivi des tutoriaux pour réaliser mon QEEL en deux colonnes.
J'ai pourtant des problèmes d'affichage avec le seconde colonne...

Code:

 <!-- BEGIN disable_viewonline -->
  <div class="QeelIMG"></div>
  <div class="QeelGIF"></div>
    <div class="Qeel">
<table class="groupes">
  <tr>
      <td valign="top">
  <div class="QeelGroupe">
  <center><a href="liendugroupe" class="gr1">Groupe 1</a>&nbsp;
  <a href="liendugroupe" class="gr2">Groupe 2</a>&nbsp;
        <a href="liendugroupe" class="gr3">Groupe 3</a>&nbsp;
  <a href="liendugroupe" class="gr4">Groupe 4</a>&nbsp;
  <a href="liendugroupe" class="gr5">Groupe 5</a>&nbsp;
        <a href="liendugroupe" class="gr6">Groupe 6</a></center>
  </div>
    </td></tr>
      </table>
   
<div class="Qeel">
   <table style="width: 100%; border-collapse:collapse;">
      <tr>
         <td width="50%">
                          <div style="float: left; padding-left: 50px; padding-right: 100px; font-size: 12px;">
            <div style="text-align: justify;">
               <span class="gensmall" id="totalusers"> {TOTAL_USERS}
         <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/Nous avons/,"Le monde magique comptabilise");</script>
         <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membre enregistré/,"sorcier");</script>
                <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membres enregistrés/,"sorciers");</script></span>
               <span class="gensmall" id="totalposts"> {TOTAL_POSTS}
         <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/Nos membres ont posté un total de/,"qui ont écrit");</script>
         <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/message/,"missive");</script>
              <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/messages/,"missives");</script></span>
          <br /> <br />
       
                    <span class="gensmall" id="newestuser"> {NEWEST_USER}
         <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier sorcier à avoir rejoint la communauté s'appelle");</script>
         <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(//,"");</script>
              <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(//,"");</script></span>
       
            <br /> <br />
              <span class="gensmall" id="totaluseronline"> {TOTAL_USERS_ONLINE}
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/Il y a en tout/,"Il y a actuellement");</script>
           <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateur en ligne/,"sorcier en ligne");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateurs en ligne/,"sorciers en ligne");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistré/,"recensé par le ministère");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistrés/,"recensés par le ministère");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisible/,"utilise une cape d'invisibilité");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisibles/,"utilisent une cape d'invisibilité");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invité/,"est placé sous le sortilège de la trace");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invités/,"sont placés sous le sortilège de la trace");</script></span> 
                <br /> <br />
       
         <span class="gensmall" id="loggedinuserlist"> {LOGGED_IN_USER_LIST}
         <script type="text/javascript">document.getElementById('loggedinuserlist').innerHTML=document.getElementById ('loggedinuserlist').innerHTML.replace(/Utilisateurs enregistrés/,"Sorciers en quête");</script></span>
            </div>
                          </div>
         </td> 
                 
  <td valign="top">
                         <table id="QeelTable2">      
                        <tr>
                                   <td>
                                              <td style="vertical-align:top; text-align: justify;">
                                                    <div style="float: right; padding-right: 50px; padding-left: 100px; font-size: 12px;">
                     <span class="gensmall" id="anniv">{L_WHOSBIRTHDAY_TODAY}</span>
                     <script type="text/javascript">document.getElementById('anniv').parentNode.innerHTML=document.getElementById('anniv').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Harry Potter Univers souhaite un bon anniversaire à").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun sorcier ne célèbre son anniversaire aujourd'hui");</script>
                                <br/>
                              <span class="gensmall">{L_CONNECTED_MEMBERS}</span>
                       <script type="text/javascript">document.getElementById('test').innerHTML=document.getElementById('test').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/,"Sorciers connectés depuis la dernière lune :");</script>
                                              </div>
                                                    </td>

                                     </td>
                   </tr>
                     </table>

  </td>
      </tr>
   </table>
</div>
<!-- END disable_viewonline -->

Je voudrais pouvoir justifier le contenu de mes deux colonnes d'une part et pouvoir leur mettre une marge à gauche comme à droite. Cela fonctionne parfaitement sur la colonne de gauche mais pas sur l'autre.

Enfin, je ne comprends pas le léger écart d'un pixel entre le début du texte dans la première colonne et le début du texte dans le deuxième. Quand je mets un fond couleur, je remarque que sur la première colonne le texte est en bord à bord.

D'autre part impossible de gérer la taille de la police, même en CSS. Les effets ne sont jamais pris en compte. J'ai supprimé une partie de mon CSS le temps de régler l'HTML.

Code:

 /*Titre QEEL*/
.QeelIMG
{
  background: url('https://img4.hostingpics.net/pics/848573QEELsmall.png') top center;
  width: 950px;
  height: 214px;
  margin: auto;
}

.QeelGIF
{
  background: url('https://img4.hostingpics.net/pics/722998tracesdepas.gif') top center;
  width: 950px;
  height: 36px;
  margin: auto;
}

  /*QEEL tableau*/
.Qeel
{
 padding-bottom: 300px;
}

    /*Colonne*/

  /*Stats Messages/Membres*/

  /*Groupes*/
 .gr1, .gr2, .gr3, .gr4, .gr5, .gr6
{
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
}

 /*Groupe 1*/
.gr1
{
  color: #494949 !important;
}
/*Groupe 2*/
.gr2
{
  color: #787878 !important;
}
/*Groupe 3*/
.gr3
{
  color: #b2b2b2 !important;
}
/*Groupe 4*/
.gr4
{
  color: #e12727 !important;
}
/*Groupe 5*/
.gr5
{
  color: #e3bb41 !important;
}
/*Groupe 6*/
.gr6
{
  color: #426ae3 !important;
}

              /*Fin QEEL*/

Je vous remercie pour votre aide

[Shawn Gryffondor]

Je me permets de relancer ma demande.

Merci

[Faline]

Bonsoir,

• Pour le problème de décalage :
  Dans la cellule de droite tu as imbriqué un deuxième tableau alors que la colonne de gauche est une simple cellule :
  
  
  
  Comme tes lignes ne sont pas numérotées, je te mets juste le code où le problème commence (à la ligne 3) :

  Code:

  </td><!-- fin de la première colonne/cellule -->
<td valign="top"><!-- début de la 2e colonne/cellule -->
<table id="QeelTable2"><!-- tableau imbriqué, qui prend de la place en hauteur -->
<tr>
<td><!-- doublon avec la ligne suivante ? -->
<td style="vertical-align:top; text-align: justify;">

  
  Et il faut remplir les styles de façon bien symétrique (cellpadding, justification...) sur les deux côtés du tableau.
  
  
• Je crains que pour la taille des caractères il faudra définir la priorité !important comme pour les couleurs.

Edit :
En arrivant sur ton forum je constate qu'entre temps il y a une 3e colonne et, à voir le résultat, encore un tableau de plus d'imbriqué dedans.

[Shawn Gryffondor]

Bonsoir Faline et merci pour ta réponse.
Effectivement je faisais d'autres essais en attendant une réponse ici mais j'ai repris le code posté ici.

Le deuxième tableau imbriqué dans la colonne de droite est donc le problème. Pourtant sans lui, les balises anniversaire et membres connectés au cours des dernières 24h sont hors de contrôle et s'affichent en dehors du tableau... (Comme tu peux le voir à présent sur le forum)

D'ailleurs j'ai cru comprendre que ces balises devaient toujours être entourées d'un table. Donc que faire ? Imbriquer un deuxième tableau également à gauche ?


J'ai essayé de nettoyer mon code en supprimant les doublons. D'ailleurs aucune idée de pourquoi je n'avais qu'un seul tr sachant qu'il en faut un par colonne. J'ai supprimé aussi le valign top avec le texte align puisqu'il est présent avant et que le justify ne fonctionne de toute façon pas.

Bref et maintenant c'est encore pire :-)

Code:

 <!-- BEGIN disable_viewonline -->
  <div class="QeelIMG"></div>
  <div class="QeelGIF"></div>
    <div class="Qeel">
<table class="groupes">
  <tr>
      <td valign="top">
  <div class="QeelGroupe">
  <center><a href="liendugroupe" class="gr1">Groupe 1</a>&nbsp;
  <a href="liendugroupe" class="gr2">Groupe 2</a>&nbsp;
        <a href="liendugroupe" class="gr3">Groupe 3</a>&nbsp;
  <a href="liendugroupe" class="gr4">Groupe 4</a>&nbsp;
  <a href="liendugroupe" class="gr5">Groupe 5</a>&nbsp;
        <a href="liendugroupe" class="gr6">Groupe 6</a></center>
  </div>
    </td></tr>
      </table>
      <br/>
<div class="Qeel">
  <table style="width: 100%; border-collapse:collapse;">
      <tr>
        <td width: 150px>
                          <div style="float: left; padding-left: 50px; padding-right: 100px;">
              <span class="gensmall" id="totalusers"> {TOTAL_USERS}
        <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/Nous avons/,"Le monde magique comptabilise");</script>
        <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membre enregistré/,"sorcier");</script>
                <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membres enregistrés/,"sorciers");</script></span>
              <span class="gensmall" id="totalposts"> {TOTAL_POSTS}
        <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/Nos membres ont posté un total de/,"qui ont écrit");</script>
        <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/message/,"missive");</script>
              <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/messages/,"missives");</script></span>
          <br /> <br />
       
                    <span class="gensmall" id="newestuser"> {NEWEST_USER}
        <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier sorcier à avoir rejoint la communauté s'appelle");</script>
        <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(//,"");</script>
              <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(//,"");</script></span>
       
            <br /> <br />
              <span class="gensmall" id="totaluseronline"> {TOTAL_USERS_ONLINE}
        <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/Il y a en tout/,"Il y a actuellement");</script>
          <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateur en ligne/,"sorcier en ligne");</script>
        <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateurs en ligne/,"sorciers en ligne");</script>
        <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistré/,"recensé par le ministère");</script>
        <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistrés/,"recensés par le ministère");</script>
        <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisible/,"utilise une cape d'invisibilité");</script>
        <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisibles/,"utilisent une cape d'invisibilité");</script>
        <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invité/,"est placé sous le sortilège de la trace");</script>
        <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invités/,"sont placés sous le sortilège de la trace");</script></span> 
                <br /> <br />
       
        <span class="gensmall" id="loggedinuserlist"> {LOGGED_IN_USER_LIST}
        <script type="text/javascript">document.getElementById('loggedinuserlist').innerHTML=document.getElementById ('loggedinuserlist').innerHTML.replace(/Utilisateurs enregistrés/,"Sorciers en quête");</script></span>
            </div>
        </td> 
    </tr>

    <tr>
        <td width: 150px>
                        <div style="float: right; padding-right: 50px; padding-left: 100px;">
        <span class="gensmall" id="anniv">{L_WHOSBIRTHDAY_TODAY}</span>
        <script type="text/javascript">document.getElementById('anniv').parentNode.innerHTML=document.getElementById('anniv').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Harry Potter Univers souhaite un bon anniversaire à").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun sorcier ne célèbre son anniversaire aujourd'hui");</script>
                                <br/>
        <span class="gensmall" id="connectedmembers">{L_CONNECTED_MEMBERS}</span>
        <script type="text/javascript">document.getElementById('connectedmembers').innerHTML=document.getElementById('connectedmembers').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/,"Sorciers connectés depuis la dernière lune :");</script>
                        </div>
     </td>
    </tr>
       
  </table>
</div>
<!-- END disable_viewonline -->

J'ai mis la balise Qeel en CSS avec la taille de police et le justify en important. Ça lui fait ni chaud ni froid...

[Faline]

Le deuxième tableau imbriqué dans la colonne de droite est donc le problème. Pourtant sans lui, les balises anniversaire et membres connectés au cours des dernières 24h sont hors de contrôle et s'affichent en dehors du tableau... (Comme tu peux le voir à présent sur le forum)

A l'heure qu'il est, il y a deux colonnes et qui se portent pas mal bien.

D'ailleurs j'ai cru comprendre que ces balises devaient toujours être entourées d'un table. Donc que faire ? Imbriquer un deuxième tableau également à gauche ?

Il n'y a pas besoin d'imbrication. Un seul tableau avec une ligne et 2 cellules suffit (ou 3 cellules si tu veux faire comme tout à l'heure).

D'ailleurs aucune idée de pourquoi je n'avais qu'un seul tr sachant qu'il en faut un par colonne.

On a besoin d'un <tr></tr> par ligne, donc une seule fois pour ton tableau Qeel.

Voir http://www.startyourdev.com/html/tag-html-balise-table

Je suis déjà bien fatiguée ce soir, mais voici une version qui pourrait être mieux alignée j'espère (un seul tableau avec une seule ligne et deux cellules), encore sans tenir compte de la taille de police, qui pourra peut-être se régler au niveau de la feuille de styles. Il manque encore le cellspacing/cellpadding, à mettre dans la balise <table>.

Code:

<!-- BEGIN disable_viewonline -->
<div class="Qeel">
<table class="groupes">
<tr>
<td valign="top">
<div class="QeelGroupe">
<center><a href="liendugroupe" class="gr1">Groupe 1</a>&nbsp;
<a href="liendugroupe" class="gr2">Groupe 2</a>&nbsp;
<a href="liendugroupe" class="gr3">Groupe 3</a>&nbsp;
<a href="liendugroupe" class="gr4">Groupe 4</a>&nbsp;
<a href="liendugroupe" class="gr5">Groupe 5</a>&nbsp;
<a href="liendugroupe" class="gr6">Groupe 6</a></center>
</div>
</td></tr>
</table>

<div class="Qeel">
<table style="width: 100%; border-collapse:collapse;">
<tr>
<td style="valign:top;" width="50%">
<div style="text-align: justify;">
<span class="gensmall" id="totalusers"> {TOTAL_USERS}
<script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/Nous avons/,"Le monde magique comptabilise");</script>
<script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membre enregistré/,"sorcier");</script>
<script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membres enregistrés/,"sorciers");</script></span>
<span class="gensmall" id="totalposts"> {TOTAL_POSTS}
<script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/Nos membres ont posté un total de/,"qui ont écrit");</script>
<script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/message/,"missive");</script>
<script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/messages/,"missives");</script></span>
<br> <br>
<span class="gensmall" id="newestuser"> {NEWEST_USER}
<script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier sorcier à avoir rejoint la communauté s'appelle");</script>
<script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(//,"");</script>
<script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(//,"");</script></span><br> <br>
<span class="gensmall" id="totaluseronline"> {TOTAL_USERS_ONLINE}
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/Il y a en tout/,"Il y a actuellement");</script>
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateur en ligne/,"sorcier en ligne");</script>
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateurs en ligne/,"sorciers en ligne");</script>
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistré/,"recensé par le ministère");</script>
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistrés/,"recensés par le ministère");</script>
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisible/,"utilise une cape d'invisibilité");</script>
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisibles/,"utilisent une cape d'invisibilité");</script>
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invité/,"est placé sous le sortilège de la trace");</script>
<script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invités/,"sont placés sous le sortilège de la trace");</script></span><br> <br>
<span class="gensmall" id="loggedinuserlist"> {LOGGED_IN_USER_LIST}
        <script type="text/javascript">document.getElementById('loggedinuserlist').innerHTML=document.getElementById ('loggedinuserlist').innerHTML.replace(/Utilisateurs enregistrés/,"Sorciers en quête");</script></span></div>
</td>

<td style="vertical-align:top; text-align: justify;>
<div><span class="gensmall" id="anniv">{L_WHOSBIRTHDAY_TODAY}</span>
                    <script type="text/javascript">document.getElementById('anniv').parentNode.innerHTML=document.getElementById('anniv').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Harry Potter Univers souhaite un bon anniversaire à").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun sorcier ne célèbre son anniversaire aujourd'hui");</script>
<br>
<span class="gensmall">{L_CONNECTED_MEMBERS}</span>
<script type="text/javascript">document.getElementById('test').innerHTML=document.getElementById('test').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/,"Sorciers connectés depuis la dernière lune :");</script>
</div>
</td>
</tr>
</table>
</div>
<!-- END disable_viewonline -->


Sur mon programme de courriel ça fait :

sur deux forums test ça ne m'a fait aucun effet.

Edit : je viens de me rendre compte qu'il manque les deux sauts de ligne < /br>< /br> entre total_users et total_posts . A ajouter :

Code:

replace(/membres enregistrés/,"sorciers");</script></span>< /br>< /br>
<span class="gensmall" id="totalposts"> {TOTAL_POSTS}

[Shawn Gryffondor]

Hello !

Je suis désolé ton code ne fonctionne pas. Tu ouvres une balise div class qeel dans la première table puis ré ouvre la même dans la deuxième table sans fermer la première ?

J'ai la fin de mon code qui est tout rouge, j'ai essayé de réparer mais rien n'y fait.
L'absence de saut de ligne est voulu, c'est une phrase personnalisée.

En tout cas, les balises anniversaire et membres connectés au cours des dernières 24h sont en dehors du tableau et la reformulation n'est pas prise en compte :/

Pour le reste cellpadding et taille de police je pense qu'on peut voir ça après.

Code:

<!-- BEGIN disable_viewonline -->
<div class="Qeel">
<table class="groupes">
   <tr>
      <td valign="top">
         <div class="QeelGroupe">
            <center><a href="liendugroupe" class="gr1">Groupe 1</a>&nbsp;
            <a href="liendugroupe" class="gr2">Groupe 2</a>&nbsp;
            <a href="liendugroupe" class="gr3">Groupe 3</a>&nbsp;
            <a href="liendugroupe" class="gr4">Groupe 4</a>&nbsp;
            <a href="liendugroupe" class="gr5">Groupe 5</a>&nbsp;
            <a href="liendugroupe" class="gr6">Groupe 6</a></center>
         </div>
      </td></tr>
</table>

   <table style="width: 100%; border-collapse:collapse;">
      <tr>
         <td style="valign:top;" width="50%">
            <div style="text-align: justify;">
               <span class="gensmall" id="totalusers"> {TOTAL_USERS}
               <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/Nous avons/,"Le monde magique comptabilise");</script>
               <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membre enregistré/,"sorcier");</script>
               <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membres enregistrés/,"sorciers");</script></span>
               <span class="gensmall" id="totalposts"> {TOTAL_POSTS}
               <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/Nos membres ont posté un total de/,"qui ont écrit");</script>
               <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/message/,"missive");</script>
               <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/messages/,"missives");</script></span>
<br> <br>
               <span class="gensmall" id="newestuser"> {NEWEST_USER}
               <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier sorcier à avoir rejoint la communauté s'appelle");</script>
               <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(//,"");</script>
               <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(//,"");</script></span>
<br> <br>

               <span class="gensmall" id="totaluseronline"> {TOTAL_USERS_ONLINE}
               <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/Il y a en tout/,"Il y a actuellement");</script>
               <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateur en ligne/,"sorcier en ligne");</script>
               <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateurs en ligne/,"sorciers en ligne");</script>
               <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistré/,"recensé par le ministère");</script>
               <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistrés/,"recensés par le ministère");</script>
               <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisible/,"utilise une cape d'invisibilité");</script>
               <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisibles/,"utilisent une cape d'invisibilité");</script>
               <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invité/,"est placé sous le sortilège de la trace");</script>
               <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invités/,"sont placés sous le sortilège de la trace");</script></span>
<br> <br>
               
                 <span class="gensmall" id="loggedinuserlist"> {LOGGED_IN_USER_LIST}
                    <script type="text/javascript">document.getElementById('loggedinuserlist').innerHTML=document.getElementById ('loggedinuserlist').innerHTML.replace(/Utilisateurs enregistrés/,"Sorciers en quête");</script></span>
              </div>
         </td>

<td style="vertical-align:top; text-align: justify;>
   <div>
               <span class="gensmall" id="anniv">{L_WHOSBIRTHDAY_TODAY}</span>
                             <script type="text/javascript">document.getElementById('anniv').parentNode.innerHTML=document.getElementById('anniv').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Harry Potter Univers souhaite un bon anniversaire à").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun sorcier ne célèbre son anniversaire aujourd'hui");</script>
<br>
               <span class="gensmall" id="connectedmembers">{L_CONNECTED_MEMBERS}</span>
               <script type="text/javascript">document.getElementById('connectedmembers').innerHTML=document.getElementById('connectedmembers').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/,"Sorciers connectés depuis la dernière lune :");</script>
   </div>
</td>
      </tr>
   </table>
</div>

<!-- END disable_viewonline -->

[Faline]

Tu es parti de quel tutoriel ?

Là il y en a un qui a l'air pas mal (mais certainement pas le seul) : https://forum.forumactif.com/t316484-qeel-en-deux-colonnes . Là aussi il est question de tableaux de trop à effacer d'abord, comme il me semblait aussi...

Chez toi, les groupes semblent être déjà en ordre.

Edit : je viens de faire le tuto ci-dessus chez moi. Il fonctionne, mais donne exactement le petit décalage qui est l'objet de ce sujet .

Pour la taille de police, j'ai trouvé un code intéressant (taille relative) : https://forum.forumactif.com/t284169-qeel-en-2-colonnes#2513985

J'espère que quelqu'un d'autre trouvera ce qui ne va pas.

[Shawn Gryffondor]

J'étais parti d'un tutoriel officiel du site Never-Utopia si tu connais.

J'ai tout refait avec le lien que tu m'as donné. Le problème persiste. Le léger décalage de début entre la première et la deuxième colonne et l'absence de mes balises membres fêtant leur anniversaire les 7 prochains jours et les membres connectés les dernières 24 heures.

Code:

<!-- BEGIN disable_viewonline -->
  <div class="QeelIMG"></div>
  <div class="QeelGIF"></div>
    <div class="Qeel">
     
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="padding-left: 40px;">
  <tr>
          <td width="50%" style="padding-right: 40px;">
                <span class="gensmall" id="totalusers"> {TOTAL_USERS}
         <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/Nous avons/,"Le monde magique comptabilise");</script>
         <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membre enregistré/,"sorcier");</script>
                <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membres enregistrés/,"sorciers");</script></span>
               <span class="gensmall" id="totalposts"> {TOTAL_POSTS}
         <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/Nos membres ont posté un total de/,"qui ont écrit");</script>
         <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/message/,"missive");</script>
              <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/messages/,"missives");</script></span>

      <br />
       
                    <span class="gensmall" id="newestuser"> {NEWEST_USER}
         <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier sorcier à avoir rejoint la communauté s'appelle");</script>
         <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(//,"");</script>
              <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(//,"");</script></span>
       
            <br /> <br />
              <span class="gensmall" id="totaluseronline"> {TOTAL_USERS_ONLINE}
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/Il y a en tout/,"Il y a actuellement");</script>
           <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateur en ligne/,"sorcier en ligne");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateurs en ligne/,"sorciers en ligne");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistré/,"recensé par le ministère");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistrés/,"recensés par le ministère");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisible/,"utilise une cape d'invisibilité");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisibles/,"utilisent une cape d'invisibilité");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invité/,"est placé sous le sortilège de la trace");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invités/,"sont placés sous le sortilège de la trace");</script></span> 
                <br /> <br />
       
         <span class="gensmall" id="loggedinuserlist"> {LOGGED_IN_USER_LIST}
         <script type="text/javascript">document.getElementById('loggedinuserlist').innerHTML=document.getElementById ('loggedinuserlist').innerHTML.replace(/Utilisateurs enregistrés/,"Sorciers en quête");</script></span>
       </td>
   
  <td valign="top" style="padding-left: 40px;">
  <table>
             <span class="gensmall" id="anniv">{L_WHOSBIRTHDAY_TODAY}</span>
         <script type="text/javascript">document.getElementById('anniv').parentNode.innerHTML=document.getElementById('anniv').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Harry Potter Univers souhaite un bon anniversaire à").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun sorcier ne célèbre son anniversaire aujourd'hui");</script>
          <br/>
                        <span class="gensmall" id="annivweek">{L_WHOSBIRTHDAY_WEEK}</span>
             <script type="text/javascript">document.getElementById('annivweek').parentNode.innerHTML=document.getElementById('annivweek').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire dans les 7 prochains jours/,"Sorciers fêtant leur anniversaire dans les 7 prochains jours").replace(/Aucun membre ne célèbre son anniversaire dans les 7 prochains jours/,"Aucun sorcier ne célèbre son anniversaire dansles 7 prochains jours");</script>
          <br/>
                  <span class="gensmall" id="connectedmembers">{L_CONNECTED_MEMBERS}</span>
           <script type="text/javascript">document.getElementById('connectedmembers').innerHTML=document.getElementById('connectedmembers').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/,"Sorciers connectés depuis la dernière lune :");</script>
  </table>
  </td></tr>
 
</table>

      <br/>
<table class="groupes">
  <tr>
      <td valign="top">
  <div class="QeelGroupe">
  <center><a href="liendugroupe" class="gr1">Groupe 1</a>&nbsp;
  <a href="liendugroupe" class="gr2">Groupe 2</a>&nbsp;
        <a href="liendugroupe" class="gr3">Groupe 3</a>&nbsp;
  <a href="liendugroupe" class="gr4">Groupe 4</a>&nbsp;
  <a href="liendugroupe" class="gr5">Groupe 5</a>&nbsp;
        <a href="liendugroupe" class="gr6">Groupe 6</a></center>
  </div>
    </td></tr>
      </table>
<!-- END disable_viewonline -->

Quand je rajoute un TD entre toutes mes balises de la deuxième colonne, celles-ci apparaissent enfin sur le forum mais avec un gros espace en sur le haut et la personnalisation du texte n'est pas prise en compte.

Si quelqu'un a déjà eu le problème...
Merci tout de même Faline de t'être penchée sur mon cas

[Faline]

J'étais parti d'un tutoriel officiel du site Never-Utopia si tu connais.

J' en ai déjà entendu parler et je suis allée voir comme invitée (pas de liens pour les invités, donc pas de code). J'y ai vu un tuto que j'ai déjà croisé sur le forum ici (la personne demandait à éloigner le trait au milieu des groupes) et qui a le même défaut :

Est-ce celui-là, ton tuto ?

[Shawn Gryffondor]

J'avais fait mon codage à partir de ce tutoriel : Lien tutoriel
Qui présente d'ailleurs le même décalage également.

[Faline]

Merci pour le tuto.
As-tu essayé de commencer la première cellule avec un paragraphe/div d'une seule ligne, en lui appliquant un line-height de quelques px de plus que sur le reste du tableau ?

http://www.startyourdev.com/css/style-css-line-height

ou insérer sur la première ligne de la première cellule une image transparente de la hauteur adéquate (1 px de large). Ou une première colonne avec juste une image centrée en hauteur pour qu'on ne voie pas le défaut.

Le défaut n'est en tout cas inhérent ni au forum ni au navigateur...
Ce que j'ai fait : au-dessus du qeel j'ai aménagé un tableau tout simple de 3 colonnes (en laissant les styles par défaut) pas de problème d'alignement horizontal :

Maintenant il faudrait petite étape par petite étape transborder/introduire le contenu...

[Shawn Gryffondor]

J'ai essayé mais ça ne fonctionne pas. Ce n'est pas grave, la différence n'est presque pas visible, je vais m'en accommoder.

Par contre ce que je ne comprends pas, c'est mes balises Anniversaire et Membres connectés qui ne prennent pas en compte mes modifications de phrase. Une idée Faline ?

Merci

Code:

<!-- BEGIN disable_viewonline -->
  <div class="QeelIMG"></div>
    <div class="Qeel">
     
<table class="forumlineqeel" width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-left: 40px;" style="padding-right: 40px;">
  <tr>
          <td id="stats" width="50%" style="padding-right: 60px;">
            <br />
                <span class="gensmall" id="totalusers"> {TOTAL_USERS}
         <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/Nous avons/,"Le monde magique comptabilise");</script>
         <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membre enregistré/,"sorcier");</script>
                <script type="text/javascript">document.getElementById('totalusers').innerHTML=document.getElementById ('totalusers').innerHTML.replace(/membres enregistrés/,"sorciers");</script></span>
               <span class="gensmall" id="totalposts"> {TOTAL_POSTS}
         <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/Nos membres ont posté un total de/,"qui ont écrit");</script>
         <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/message/,"missive");</script>
              <script type="text/javascript">document.getElementById('totalposts').innerHTML=document.getElementById ('totalposts').innerHTML.replace(/messages/,"missives");</script></span>

      <br />
       
                    <span class="gensmall" id="newestuser"> {NEWEST_USER}
         <script type="text/javascript">document.getElementById('newestuser').innerHTML=document.getElementById ('newestuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier sorcier à avoir rejoint la communauté s'appelle");</script></span>
               <br />
                        <span class="gensmall" id="recordusers"> {RECORD_USERS}
         <script type="text/javascript">document.getElementById('recordusers').innerHTML=document.getElementById ('recordusers').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le record du nombre de sorciers en ligne est de");</script></span>

            <br /> <br />
              <span class="gensmall" id="totaluseronline"> {TOTAL_USERS_ONLINE}
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/Il y a en tout/,"Il y a actuellement");</script>
           <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateur en ligne/,"sorcier en ligne");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById ('totaluseronline').innerHTML.replace(/utilisateurs en ligne/,"sorciers en ligne");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistré/,"recensé par le ministère");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Enregistrés/,"recensés par le ministère");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisible/,"utilise une cape d'invisibilité");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invisibles/,"utilisent une cape d'invisibilité");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invité/,"est placé sous le sortilège de la trace");</script>
         <script type="text/javascript">document.getElementById('totaluseronline').innerHTML=document.getElementById('totaluseronline').innerHTML.replace(/Invités/,"sont placés sous le sortilège de la trace");</script></span> 
                <br /> <br />
       
         <span class="gensmall" id="loggedinuserlist"> {LOGGED_IN_USER_LIST}
         <script type="text/javascript">document.getElementById('loggedinuserlist').innerHTML=document.getElementById ('loggedinuserlist').innerHTML.replace(/Utilisateurs enregistrés/,"Sorciers en quête");</script></span>
<br />
       </td>

  <td id="stats" valign="top" style="padding-left: 20px;">
  <table style="padding-right: 40px;">
    <br />
    <div>
             <span class="gensmall" id="anniv">{L_WHOSBIRTHDAY_TODAY}</span>
         <script type="text/javascript">document.getElementById('anniv').parentNode.innerHTML=document.getElementById('anniv').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire aujourd'hui/,"Harry Potter Univers souhaite un bon anniversaire à").replace(/Aucun membre ne fête son anniversaire aujourd'hui/,"Aucun sorcier ne célèbre son anniversaire aujourd'hui");</script>
  </div>
  <div>
                        <span class="gensmall" id="annivweek">{L_WHOSBIRTHDAY_WEEK}</span>
             <script type="text/javascript">document.getElementById('annivweek').parentNode.innerHTML=document.getElementById('annivweek').parentNode.innerHTML.replace(/Membres fêtant leur anniversaire dans les 7 prochains jours/,"Sorciers fêtant leur anniversaire dans les 7 prochains jours").replace(/Aucun membre ne célèbre son anniversaire dans les 7 prochains jours/,"Aucun sorcier ne célèbre son anniversaire dansles 7 prochains jours");</script>
  </div>
  <div>
                  <span class="gensmall" id="connectedmembers">{L_CONNECTED_MEMBERS}</span>
           <script type="text/javascript">document.getElementById('connectedmembers').innerHTML=document.getElementById('connectedmembers').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/,"Sorciers connectés depuis la dernière lune :");</script>
  </div>
    </table>
  </td></tr>
 
</table>
<table class="groupes">
  <tr>
      <td valign="top">
  <div class="QeelGroupe">
  <center>
  <div width= "1000px";>
     <a href="liendugroupe" class="gr1">Staff</a>&nbsp;
     <a href="liendugroupe" class="gr2">Serdaigle</a>&nbsp;
        <a href="liendugroupe" class="gr3">Gryffondor</a>&nbsp;
     <a href="liendugroupe" class="gr4">Poufsouffle</a>&nbsp;
     <a href="liendugroupe" class="gr5">Serpentard</a>&nbsp;
       <a href="liendugroupe" class="gr6">Poudlard</a>&nbsp;
    </div>&nbsp;
    <div width= "1000px";>
         <a href="liendugroupe" class="gr7">Gringotts</a>&nbsp;
         <a href="liendugroupe" class="gr8">Commerçant</a>&nbsp;
         <a href="liendugroupe" class="gr9">Auror</a>&nbsp;
         <a href="liendugroupe" class="gr10">Ministère de la magie</a>&nbsp;
         <a href="liendugroupe" class="gr11">Hôpital Ste Mangouste</a>&nbsp;
        <a href="liendugroupe" class="gr12">Autre</a>&nbsp;
    </div>
    </center>
  </div>
    </td></tr>
      </table>
</div>
<!-- END disable_viewonline -->

[Faline]

J'ai essayé mais ça ne fonctionne pas. Ce n'est pas grave, la différence n'est presque pas visible, je vais m'en accommoder.

Un simple tableau d'une ligne et 2/3 cellules avec un peu de texte ne marche pas ? . A quoi est-ce que ça ressemble en copie d'écran ?

Chez moi, le début fait bien aligné :


... et en style="font-size:20px"; ça donne :


et en style="font-size:16px; color:#AEAEAE"; ça fait :

...

Remarques :

• Je m'en suis tenue aux styles par défaut et j'ai juste appliqué localement la taille de police (+ couleur).
• Il faut prévoir des rowspan, car certaines rubriques (anniversaires, légende...) provoquent un saut à la ligne (voir aussi edit du post https://forum.forumactif.com/t345156-qeel-anniversaire-probleme-pour-personnaliser#2948480).
• Pour m'assurer que tout fonctionne bien, j'ai mis en service le chat pendant les travaux sur le qeel, même si je n'ai pas forcément l'intention de le mettre plus tard à la disposition des membres du forum.
• Certains éléments du qeel semblent effectivement avoir besoin de balises <table></table> (voir https://forum.forumactif.com/t345156-qeel-anniversaire-probleme-pour-personnaliser#2948451 ).

---

Les annifs et connectés donnent du fil à retordre de façon générale, p. ex.

• http://css-actif.forumactif.org/t3028-changer-texte-du-qeel (assez en bas de la page ),
• https://forum.forumactif.com/t345156-qeel-anniversaire-probleme-pour-personnaliser
• https://forum.forumactif.com/t299326-changer-les-mot-de-mon-qeel#2626434
• https://forum.forumactif.com/t293686-modifier-le-texte-d-anniversaire-du-qeel
• ...

[Shawn Gryffondor]

Finalement j'ai opté pour l'image transparente pour réduire l'espace, c'était une très bonne idée!

J'ai réussi à reformuler toutes mes balises donc c'est parfait. Merci beaucoup pour ton aide et les liens Faline.
Si jamais je peux mettre ton logo sur mon forum quand il sera ouvert, c'est avec plaisir