Décalage des icônes du forum et de la zone de texte

[Etoile Noire]

Bonjour ou bonsoir à vous tous !

Admin' sur le forum dont vous allez voir les screens, je viens vous faire part d'un petit souci.
En fait, je suis en train de préparer notre prochain design. Je vais donc vous montrer un aperçu du rendu des images d'icônes du forum (sur la page principale donc), jusqu'à présent on a ceci :

Spoiler:

Comme vous pouvez le voir, elle sort du cadre bleu le plus pâle pour aller dans le contour blanc du forum. Pas tip top faut avouer.

En effet on aurait du avoir quelque chose qui devrait se situer comme ceci :

Spoiler:

J'ai d'abord pensé que c'était lié à la forme de l'image puisque elle est en largeur (mon petit côté naïf sans doute XD); par conséquent pour le prochain j'ai préparé des icônes de tailles 80*80. Bon forcément ça n'a pas marché, enfin ça déborde juste un peu moins mais maintenant que j'ai remarqué ce souci ça me dérange ._.

Et de plus j'ai aussi constaté que ce souci de décalage se retrouve dans la zone de texte, lorsqu'on écrit un nouveau message ou qu'on prévisualise une de nos réponses :

Spoiler:

Ce n'est pas énorme mais c'est suffisant pour que je veuille réparer cela. De ce fait je pense que le souci de la zone de texte provient de la même chose que pour les icônes du forum.
Et je pense que ça ne peut que provenir du css qui a été modifié. Sauf que comme je sais le modifier mais que je ne parviens pas à savoir précisément quelle ligne correspond à cela, j'aimerais que quelqu'un d'un peu plus connaisseur que moi puisse m'aider à trouver et corriger ._. Ce serait juste génial

Bien évidemment voici le CSS en question (sachant qu'il y a une partie concernant la page d'accueil et le QEEL, je ne le poste pas comme je ne pense pas que ça vienne de là... non ?)

Code:


/**IMAGE INTERIEUR**/
.bodyline {background-image: url("");}/* CATÉGORIES NU */
  .tabledesc {
    background: #7d9daa; /*fond derriere boutons*/
    padding: 10px;
    margin-bottom: 15px;
  }

  .descate {
    overflow: auto;
    width: 500px; height: 70px;
    text-align: justify;
    background: #426f99; /*fond description catégorie*/
    padding: 5px;
    border-radius: 0px 10px 0px 10px; -moz-border-radius: 0px 10px 0px 10px; -o-border-radius: 0px 10px 0px 10px; -htm-border-radius: 0px 10px 0px 10px; -webkit-border-radius: 0px 10px 0px 10px;
  }

  .picate {
    margin-left: -100px;
    float: left; position: relative;
  }

  a.forumlink {
    font-size: 18px; text-align: center;
    text-shadow: 1px 1px 8px black;
    float: right;
    margin-right: 40px; margin-bottom: -20px;
  }

/** FORUM **/
.bodyline{
border-left: solid 10px #ffffff ;
border-right: solid 10px #ffffff;
 
-moz-box-shadow: 0px 0px 10px #000000;
  box-shadow: 0px 0px 10px #000000;
-webkit-box-shadow: 0px 0px 10px #000000;
}

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

D'avance, un très grand merci à la personne qui pourra éclairer ma lanterne !

[Etoile Noire]

Petit upinou

[Anzu]

Bonjour,

Je n'ai rien trouvé de suspect dans la css, pourrais je avoir votre index box ?
Avez vous modifié d'autres templates ? (notamment ceux qui concernent les messages, etc)

Par contre si je peux me permettre une petite remarque , c'est préférable de mettre toutes les propriétés qui concernent le bodyline ensemble et non dans "plusieurs" .. même si vous voulez "trier" votre css, cela risque de créer des conflits à ce niveau.

Cordialement.

[Etoile Noire]

Bonjour !

Merci pour votre réponse

Concernant le CSS, merci pour l'information je vais essayer d'arranger ça (à la base je ne suis pas l'admin de notre forum qui l'a créé donc je ne savais pas cette info ^^).

Alors pour les templates il y a en effet index_box et index_body qui ont été modifiés, que voici :


Index_box :

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 --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
  </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
     
      <td colspan="2" valign="middle" width="100%">
        <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}>
                  <table cellspacing="0" margin="0" width="100%">
                  <tr>
                 
                    <td width="100%" height="auto" style=" width: 100%; height: auto;">
        <table class="tabledesc" width="100%" margin="0" cellspacing="0" valign="middle">
            <tr>
             
              <td>
        <div style="margin-right: 0px;" class="descate genmed">{catrow.forumrow.FORUM_DESC}</div>
              </td>

              <td style="width: 30%;" align="left">
                                          <div class="gensmall">ᵡ {catrow.forumrow.POSTS} Messages<br /> <br />
                                                    ᵡ {catrow.forumrow.TOPICS} Sujets<br /> <br />
                        {catrow.forumrow.LAST_POST}</div>
              </td>
            </tr>
           
            <tr>
              <td colspan="2">
                                          <span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}ᵡ {catrow.forumrow.LINKS}</span>
              <script type="text/javascript">
              jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'  ᵡ')).removeAttr('id');
                  </script>
              </td>
            </tr>
        </table>
                    </td>
                    <td>
  <img class="picate" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  </td>
                  </tr>
                  </table>

      </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Index_body

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}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td width="50%" valign="top">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
        <!-- END switch_user_logged_in -->
        <!-- BEGIN switch_delete_cookies -->
        <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
        <!-- END switch_delete_cookies -->
        </span>
      </td>
      <td width="50%" align="right">
        <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
              <!-- BEGIN switch_delete_cookies -->
              <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
              <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
        </span>
      </td>
  </tr>
</table>

<!-- 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 align="center" valign="middle" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td align="left" colspan="2">
                  <img src="http://nsa31.casimages.com/img/2012/12/28/121228114239645912.png" />
      </td>
      <td align="left" colspan="2">
                  <span class="gensmall">
                    <span class="groupes"><a href="http://www.la-guerre-des-clans.com/g1-admins?tt=1"><span style="color: #FFFFFF;">Admins</span></a></span>
                    <span class="groupes"><a href="http://www.la-guerre-des-clans.com/g28-vip?tt=1"><span style="color: #C0EB7F;">V.I.P</span></a></span>
                    <span class="groupes"><a href="http://www.la-guerre-des-clans.com/g3-clan-du-tonnerre?tt=1"><span style="color: #FAE97D;">Tonnerre</span></a></span>
                    <span class="groupes"><a href="http://www.la-guerre-des-clans.com/g4-clan-de-la-riviere?tt=1"><span style="color: #B8D2FF;">Rivière</span></a></span>
                    <span class="groupes"><a href="http://www.la-guerre-des-clans.com/g5-clan-de-l-ombre?tt=1"><span style="color: #000000;">Ombre</span></a></span>
                    <span class="groupes"><a href="http://www.la-guerre-des-clans.com/g6-clan-du-vent?tt=1"><span style="color: #69B56C;">Vent</span></a></span>
                    <span class="groupes"><a href="http://www.la-guerre-des-clans.com/g7-solitaires?tt=1"><span style="color: #990000;">Solitaires</span></a></span>
                    <span class="groupes"><a href="http://www.la-guerre-des-clans.com/g20-chats-domestiques?tt=1"><span style="color: #FFB694;">Domestiques</span></a></span>
                  </span>
        <div class="boxqeel">
                  <div class="box gensmall">
              <span id="totalposts">{TOTAL_POSTS} !</span>
            <script type="text/javascript">
            document.getElementById('totalposts').innerHTML=document.getElementById('totalposts').innerHTML.replace(/Nos membres ont posté un total de /,"Nos chats ont miaulé un total de ");
            document.getElementById('totalposts').innerHTML=document.getElementById('totalposts').innerHTML.replace(/messages /,"fois ");
            </script><br />
                   
                  <span id="totalusers">{TOTAL_USERS} !</span>
            <script type="text/javascript">
            document.getElementById('totalusers').innerHTML=document.getElementById('totalusers').innerHTML.replace(/membre enregistré/,"chats dans la forêt");
            </script><br />
                   
                  <span id="newusers">{NEWEST_USER} !</span>
            <script type="text/javascript">
            document.getElementById('newusers').innerHTML=document.getElementById('newusers').innerHTML.replace(/L'utilisateur enregistré le plus récent est /,"Le chat le plus récent est ");
            </script><br />
                   
    <span id="totalonline">{TOTAL_USERS_ONLINE} !</span>
            <script type="text/javascript">
            document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne/,"chat ici");
            document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne/,"chats ici");
            </script><br />
                   
    <span id="recordonline">{RECORD_USERS} !</span>
            <script type="text/javascript">
            document.getElementById('recordonline').innerHTML=document.getElementById('recordonline').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le nombre de chats maximum dans la forêt est de");
            document.getElementById('recordonline').innerHTML=document.getElementById('recordonline').innerHTML.replace(/-/,"à");
            </script><br />
                   
    <span id="logonline">{LOGGED_IN_USER_LIST}</span>
            <script type="text/javascript">
            document.getElementById('logonline').innerHTML=document.getElementById('logonline').innerHTML.replace(/Utilisateurs enregistrés/,"Chats se baladant");
            </script><br />
                  </div>
                </div>
        <div class="boxqeel">
                  <div class="box gensmall">
                    <span id="totalconn"><table><tr><td><strong>{L_CONNECTED_MEMBERS}</strong></td></tr></table></span>
                <script type="text/javascript">
              document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés/,"Chats présents");
                    </script><br />
                   
                    <table><tr><td>{L_WHOSBIRTHDAY_TODAY}<br />
   
                      {L_WHOSBIRTHDAY_WEEK}<br /></td></tr></table>
                  </div>
                </div>
      </td>
  </tr>
</table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
  <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
  </tr>
</table>
<!-- 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 -->

Merci

[Anzu]

Le problème vient du template index box
Il y a des erreurs au niveau de la structure du tableau.
Si je schématise grossièrement on a:

table/tr/td/table/tr/td description/td sujets, messages, last post/td image/FIN du tr/Tr/td colspan 4 sous forum/FIN deuxième tr/Fin table/Fin td/fin tr/fin table.

En théorie du moins .. mais en pratique ce n'est pas le cas

En corrigeant votre tableau, cela devrait régler le problème. Si vous n'avez pas compris quelque chose n'hésitez pas.

Cordialement.

[Etoile Noire]

Donc si je comprends bien en fait, le souci vient des balises qui sont euh "mal refermées" ? ^^'
Je vais me pencher attentivement sur ce template alors et vous dire si cela fonctionne =)

[Anzu]

Non elles ne sont pas mal fermées, la structure du tableau est fausse.(du moins en partie)
Il y a des erreurs. Des td ou des tr ou mauvais endroit etc ..

Regardez ici:

Code:

<tr>
              <td colspan="2">
                                          <span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}ᵡ {catrow.forumrow.LINKS}</span>
              <script type="text/javascript">
              jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'  ᵡ')).removeAttr('id');
                  </script>
              </td>
            </tr>
        </table>
                    </td>
                    <td>
  <img class="picate" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  </td>

Rien ne vous choque ?
Si vous regardez ce que j'ai mis dans mon précédent message, vous devriez trouver ce qui cloche.