Liens QEEL et Chatbox excessivement larges

[Sapphire-Melody]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
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 (connectés)
Lien du forum : http://sapph-tests.forumactif.org/

Description du problème

Bonjour / Bonsoir

Je me permets de poster ici car comme vous pouvez le constater sur le capture d'écran, le bas de mon forum (QEEL + CB + Liens) est beaucoup plus large que la partie catégories. Je n'ai pas modifié mon template index_body et je ne vois pas d'où cela peut venir... :c

Je vous mets mon CSS (peut-être que le problème vient de là...)

Code:

/*---------------GENERALITES DU FORUM------------------*/

/*fond + bannière*/
body {
  background: url("http://i.imgur.com/5DbhTAR.png") no-repeat center top,
          url("http://i.imgur.com/g8S5eCi.png") repeat 0 0;
}

/*espace pour la bannière*/
#i_logo
{
height: 461px;
}

/*fond de l'espace catégorie*/
#page-body
{
background: url("http://i.imgur.com/xMnVfCZ.jpg");
  width: 800px;
}

/*largeur de l'espace catégorie*/
.bodylinewidth
{
width: 800px;
}

/*suppression du soulignement des liens*/
a:link, a:link hover
{
 text-decoration: none !important;
}


/*---------------FIN GENERALITES DU FORUM------------------*/

/*---------------NAVIGATION-----------------*/

/*mise en place de la barre*/
#navig
{
 width: 800px;
 text-align: center;
 background: url("http://i.imgur.com/xMnVfCZ.jpg");
  height: 30px;
}

/*personnalisation des liens*/
#navig a
{
 font-family: 'Pompiere';
  font-size: 18px;
  color: #1C2240 !important;
  transition: 1s; /* realise une transition lente avec l effet au survol */
  -moz-transition: 1s;
  -htm-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}

/*personnalisation des liens au survol*/
#navig a:hover
{
 color: #BFCBD9 !important;
  transition: 1s; /* realise une transition lente avec l effet au survol */
  -moz-transition: 1s;
  -htm-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
}

/*--------------FIN NAVIGATION----------------*/

/*---------------CATEGORIES------------------*/

/*titre de la catégorie*/
.cate_titre h2
{
  width: 800px;
  color: #205BA8;
  font-family: 'Permanent Marker', cursive;
  font-size: 28px;
  letter-spacing: 2px;
  text-align: right;
  padding: 3px 0;
  height: 50px;
  margin-top: 50px;
    margin-bottom: -50px;
  margin-left: -10px;
 
}

/*bloc de la catégorie*/
.cate_bloc
{
  height: 230px;
  margin-right: 5px;
  margin-top: 60px;
}

/*lien du forum*/
a.forumlink
{
  position : absolute;
  z-index: 10;
  display: block;
  width: 380px;
  margin: 10px 0 0 195px;
  padding: 2px 0 2px 100px;
  background: #1B2242;
  font-family: 'Pompiere', sans-serif;
  color: #F0F0F3 !important;
  font-size: 16px;
  transition: 500ms;
}

/*lien du forum au survol*/
a.forumlink:hover
{
  background: #4A4B74;
}

/*bloc du dernier sujet*/
.last_post
{
  position: absolute;
  z-index: 11;
  width: 150px;
  height: 100px;
  padding-top: 50px;
  right: 0;
  margin-right: 30px;
  background: #d0cdc8;
  border: 5px solid #F0F0F3;
  box-shadow: 0px 0px 5px #39322c;
  border-radius: 150px;
  overflow: hidden;
  text-align: center;
  font-size: 11px;
}

/*nombre de sujets et messages*/
.stats1, .stats2
{
  position: absolute;
  z-index: 12;
  width: 60px;
  text-align: center;
  right: 0;
  font-size: 26px;
  line-height: 14px;
  font-family: 'Pompiere', cursive;
  color: #999999;
}
.stats1
{
  margin-right: 80px;
  margin-top: 12px;
}
.stats2
{
  margin-right: 80px;
  margin-top: 120px;
}
.stats1 .gensmall, .stats2 .gensmall
{
  display: block;
  font-family: 'Pompiere', serif;
  color: #999999;
  font-size: 12px;
}

/*bloc avatar du dernier posteur*/
.forum_avatar
{
  position: absolute;
  z-index: 13;
  width: 60px;
  height: 60px;
  right: 0;
  margin-right: 10px;
  margin-top: -10px;
  overflow: hidden;
  border-radius: 60px;
  border: 3px solid #F0F0F3;
  box-shadow: 0px 0px 5px #39322c;
  background: #3a332d;
}

/*avatar du dernier posteur*/
.forum_avatar img
{
  width: 65px;
  margin-top: -20px;
}

/*icône "new" "no new" "old"*/
.forum_icone
{
  position: absolute;
  z-index: 12;
  right: 0;
  margin-right: 0px;
  margin-top: 70px;
}

/*Section du bas du forum (description + image)*/
.forum_bottom {
  position: relative;
  width: 800px;
  height: 137px;
  margin: auto;
  margin-top: 10px;
}

/*Bloc de la description du forum*/
.forum_desc {
  float: left;
  width: 800px;
}
/*Cadre de l'image de la description*/
.forum_desc_img_cadre {
  float: left;
  width: 200px;
  height: 150px;
  border: 5px solid #F0F0F3;
  box-shadow: 0px 0px 5px #39322c;
  margin-left: 5px;
}
/*Image de la description*/
.forum_desc img {
  width: 200px;
  height: 150px;
}
/*Description du forum*/
.forum_desc_desc {
  float: left;
  width: 380px;
  height: 105px;
  margin-top: 50px;
  padding-left: 20px;
  padding-right: 5px;
  font-family: 'Gudea', sans-serif;
  font-size: 13px;
  text-align: justify;
  overflow: auto;
}

/*Bloc sous les sous-forums*/
.forum_bloc_sous_forums {
  position: absolute;
  width: 180px;
  height: 130px;
  z-index: 1;
  margin-left: 5px;
}
/*Sous-forums*/
.forum_sous_forums {
  width: 190px;
  height: 140px;
  padding: 10px;
  text-align: center;
  font-family: 'Gudea';
  opacity: 0;
  background-color: rgba(0,0,0,0.8);
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

 /*Apparition des Sous-forums*/
.forum_bloc_sous_forums:hover .forum_sous_forums {
  opacity: 1;
}

/*couleur des liens des sous-forum*/
.forum_sous_forums a {
    color: #F0F0F3;
}
/*---------------FIN CATEGORIES------------------*/
#chatbox_header{
background: #4A4B74;
}

#chatbox_footer {
background: #4A4B74;
}

#chatbox{
background: #f3f3f3;
}

#chatbox_members{ 
background: #f3f3f3;
}

.chatbox_row_1{
background: #f3f3f3;}

.chatbox_row_2{
background: #f3f3f3;}

#chatbox_members .member-title{
background: #f3f3f3;
}

td.catBottom, th.thBottom {
    border-width: 0 0px 0px !important;
}

#chatbox_header .catBottom .cattitle {
    color: #ffffff;
}

#chatbox_header .chatbox-options .genmed,
#chatbox_header .chatbox-options,
#chatbox_header .chatbox-options a {
    color: #ffffff;
}


Si vous avez besoin de quoi que ce soit d'autre faites le moi savoir !
Merci d'avance ♪

[Tech]

Bonjour,

Votre problème est-il réglé ? Je ne vois pas de problème sur votre forum

Cordialement.

[Sapphire-Melody]

Bonjour,
Le problème n'est pas réglé mais je viens de remarquer que cela n'arrive que lorsque que je me connecte....

[Sapphire-Melody]

Le problème est toujours d'actualité, je me permets de UP...

[MlleAlys]

Bonjour,
Vous devez avoir un élément qui apparait seulement aux membres connectés qui déforme votre page. Vérifiez par exemple la barre de navigation, essayez de désactiver votre feuille de style personnalisée, vos javascripts ou vos templates personnalisés pour voir si ça pourrait venir d'un code qui y est présent, etc. (la feuille de style ne semble en tout cas pas avoir cet effet sur mon forum test)
Si vous ne trouvez pas l'origine du problème, m'est-il possible de créer temporairement un compte sur votre forum pour que je puisse voir la déformation en question ?

[Sapphire-Melody]

Bonjour, merci d'avoir pris le temps de me lire.

J'ai vérifié mon CSS et mes templates et il semblerait que le problème venait de l'index_box
Je ne sais pas comment j'ai fait mais après l'avoir légèrement modifié mon forum a pris cette apparence :

Capture d'écran:

Le QEEL, les liens et la ChatBox sont passé dans le bloc gris des catégories (ce qui n'est pas gênant en soi même si je préférais qu'ils soient en dehors) et on peut observer un très léger décalage des liens sur la droite. Et ce décalage revient aussi lorsque l'on va sur d'autres pages du forum. Y aurait-il un moyen de l'enlever ?

Merci encore

[MlleAlys]

Ce doit être un problème de balise(s) mal fermée(s), pourriez-vous le fournir pour qu'on regarde ça ?

[Sapphire-Melody]

Voici mon template index_box :

index_box:

S'il y a besoin de quoi que ce soit d'autre, n'hésitez pas c:

[MlleAlys]

Alors il y avait en fait une balise en trop, voici le template corrigé :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>

<!-- BEGIN catrow -->

<!-- BEGIN tablehead -->
<div class="cate_titre">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->

<!-- BEGIN cathead -->
<!-- END cathead -->

<!-- BEGIN forumrow -->
<div class="cate_bloc">
 
   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
   <div class="forum_bottom">
      <div class="forum_desc">
         {catrow.forumrow.FORUM_DESC}
      </div>
      <div class="forum_bloc_sous_forums">
         <div class="forum_sous_forums">
            <span id="forum_sous_forums2">
               {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
         </div>
         <script type="text/javascript">
            jQuery('#forum_sous_forums2').html(jQuery('#forum_sous_forums2').html().replace(/, /g,'<br />')).removeAttr('id');
         </script>
      </div>
   </div>
   <div class="forum_icone">
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
   </div>
   <div class="forum_avatar">
      <!-- BEGIN avatar -->
      {catrow.forumrow.avatar.LAST_POST_AVATAR}
      <!-- END avatar -->
   </div>
   <div class="stats1">{catrow.forumrow.TOPICS}<span class="gensmall">sujets</span></div>
   <div class="stats2">{catrow.forumrow.POSTS}<span class="gensmall">messages</span></div>
   <div class="last_post">{catrow.forumrow.LAST_POST}</div>
 
</div>
<!-- END forumrow -->

<!-- BEGIN catfoot -->
<!-- END catfoot -->

<!-- BEGIN tablefoot -->
<!-- END tablefoot -->

<!-- END catrow -->

Par contre du coup j ne sais pas trop si ça risque de déformer vos catégories, il faudra peut être revoir le css associé pour corriger ça. Et si c'est le cas... à vrai dire je suis tentée de proposer un codage qui me parait plus intuitif de celles-ci ? Par exemple, j'ai beugué quelques instants pour comprendre que le bloc "cate_bloc" ne contenait pas la catégorie mais juste un forum... Et d'autres détails du même genre

Pour ce qui est des liens qui dépassent, c'est parce que vous avez limité la largeur de #page-body à 800px, tout comme les .cate_block, mais que ces dernière ont en plus 5px de marge, et donc ça élargit le contenu de l'élément.
Dans votre css, localisez le code suivant :

Code:

.cate_bloc {
    height: 180px;
    margin-right: 5px;
    margin-top: 60px;
}

et supprimez la ligne
margin-right: 5px;
ce qui donne :

Code:

.cate_bloc {
    height: 180px;
    margin-top: 60px;
}

[Sapphire-Melody]

Merci beaucoup pour votre aide, le problème est résolu ! c:

Et j'admets volontiers que mes intitulés ne sont pas forcément les meilleurs... ^^" Mais ils me parlent et comme je suis la seule codeuse sur le forum je sais ce qui correspond à quoi x)

En tout cas merci encore pour l'aide apportée !