Coller les éléments dans le cadre du forum au bords du cadre

[Offrande]

Bonjour, 
Je vous écrit via un nouveaux sujet car j'ai malheureusement mis trop de temps à répondre à l'autre : / . Mon soucis : Je possède un PA avec des cadres qui se situe dans le message (cadre) de l'administration, placer en haut du forum sous le logo avec un modules de nouveautés, de partenaires, des raccourcis etc.. j'ai aussi comme tout le monde les catégories et le QEEL et j'ai placer une image en "début de bas de page" pour faire un  genre de "footer image" de la même taille que le logo de mon forum.

J'ai mis du temps mais avec l'aide de Matriochka j'ai enfin réussie a positionner correctement le Logo principal de mon forum, c'est a dire le placer de façons a ce qu'il touche et soit coller au bords du bodyline. 

Maintenant je souhaiterais coller a ces bords: 
1. mon QEEL
2. mon image de footer 
3. ainsi que mon PA qui lui ne touche vraiment pas les bords.

Voila les codes que vous m'avez conseiller de mettre mais qui ne marche malheureusement pas.

Code:

.bodyline {
position: center;
box-shadow: 3px 3px 43px  #000000;
border: 1px solid #000000;
padding: 0px!important;
margin-left: 0px!important;
margin-right: 0px!importat;

Code de mon logo principal qui as bien fonctionner 

Code:

/* logo */
td.bodyline {
padding: 0px!important;
background-image: url(http://i34.servimg.com/u/f34/17/99/16/25/te410.jpg);
}

Voila le code du QEEL qui est décalé sur la bordure comme vous pouvez le voir Sur mon forum

Code:

.table_qeel {
position: relative;
width: 100%;
height: auto;
border-top: 10px solid #000000;
border-bottom: 10px solid #000000;
background-image: url(http://i34.servimg.com/u/f34/17/99/16/25/fondb10.jpg);
margin-top: 0!important;
margin-bottom: 0!important;
padding: 4px;
}

td.plus_connecter {
background-image: url(http://i34.servimg.com/u/f34/17/99/16/25/fonda10.jpg);
position: relative;
width: 26%;
height: auto;
border-radius: 0px 20px 0px 20px;
border: 2px solid #000000;
padding: 10px;
font-size: 12px!important;
text-align: justify!important;
}

td.en_ligne {
background-image: url(http://i34.servimg.com/u/f34/17/99/16/25/fonda10.jpg);
position: relative;
width: 26%;
height: auto;
border-radius: 20px 20px 20px 20px;
border: 2px solid #000000;
padding: 10px;
font-size: 12px!important;
text-align: justify!important;
}

td.statistique {
background-image: url(http://i34.servimg.com/u/f34/17/99/16/25/fonda10.jpg);
position: relative;
width: 26%;
height: auto;
border-radius: 20px 0px 20px 0px;
border: 2px solid #000000;
padding: 10px;
font-size: 12px!important;
text-align: justify!important;
}

Mon Image de que j'ai utiliser comme footer qui n'est pas coller à droite : 

Code:

#logo_footer {
position: relative;
height: auto;
width: 100%!important;
margin-top: -10px;
border-bottom: 15px solid #000000;
border-top: 15px solid #000000;
}

Et pour finir comme vous pouvez le voir aussi Ici mon PA ne touche vraiment pas les bords du forum (il est placer juste en dessous de la barre de navigation ) 

Je ne vous met que le début du code, c'est le tableaux principal qui contient les autres cadres, comme le code était beaucoup trop long.

Code:

#tfa_table{
  width: 100%;
  color: black;
 font: 11px Time;
  background-image: url(http://i34.servimg.com/u/f34/17/99/16/25/fondb10.jpg);
  background-repeat: repeat-y repeat-x;
  margin: 0px auto;
 border-top: 10px solid #000000;
  border-bottom: 10px solid #000000;
  border-right: 0;
  border-left: 0;

Je vous remercie d'avance de votre aide, et vous souhaite une excellente fin de semaine.

Tendrement, Offrande.

[MasDan]

Bonjour,

Pour le QEEL, c'est la padding qui cause problème.

Voir une capture d'écran avec le padding (débordement à droite).


Voici maintenant une autre capture d'écran cette fois sans le padding (le débordement a disparu).


Avec Firefox (option Examiner l'Élement), j'ai décoché le padding et cela a corrigé l'alignement.

Vous n'avez qu'à retirer le padding pour le css   .table_qeel

[Offrande]

Bonjour,
Merci beaucoup MasDan ! Le qeel ne déborde plus effectivement mais il ne ce colle pas au bords du cadre du forum seriez-vous m'aidez a y remédier?



Merci beaucoup et bonne journée.

[MasDan]

Bonjour,

... Le qeel ne déborde plus effectivement mais il ne ce colle pas au bords du cadre du forum ...

De votre message initial, le premier bloc de code fourni  (pour le classe bodyline)
modifier la référence à border (ligne 4) par   border : none;
aussi à la ligne 7 il manque le «n» à important.

En examinant votre site, Firefox a signalé une erreur javascript (Voir image suivante). Javacript m'aime pas les & # 36 ;    Est-ce le signe $ du Jquery?


Et finalement la présentation est différente selon les navigateurs. Voici une capture d'écran à partir de Firefox. Chrome et IE ne pose pas problème pour cette section.


Bon, je vais tenter de voir comment corriger ce problème d'affichage pour Firefox.

[Anzu]

Edit Anzu: Sujet déplacé à la demande de l'auteur

[Offrande]

Bonjour, 

Merci Anzu pour le déplacement du sujet et merci MasDan pour les informations.. j'ai donc modifier mon code qui se présente maintenant ainsi : 

Code:

.bodyline {
position: center;
box-shadow: 3px 3px 43px  #000000;
border: none;
padding: 0px!important;
margin-left: 0px!important;
margin-right: 0px!important;
}

Mais cela n'as rien changer :/ mon qeel et mon image en bas de page ne sont toujours pas coller au bords du forum.

Quand à l'affichage sous Firefox c'est vraiment catastrophique  si tu pouvais m'aider a arranger ceci je t'en serais vraiment très reconnaissante.

Tendrement, 
Offrande

[MlleAlys]

bonjour,
pour la page d'accueil pour plus de facilité dans les modifications j'aurais ajouté un id via les templates, pour pouvoir modifier les padding gênant en étant sûr de ne pas toucher au reste...

Concernant l'image de bas de page et le qeel, je vois un écart de 1px à droite pour le qeel, et 1px d'écart à gauche pour le qeel et pour l'image footer.

Le premier écart de 1px, à droite, est causé par une cellule vide de la table.forumline du qeel, cellule vide de largeur zéro mais dont il reste cette trace.

Le deuxième écart, à gauche, c'est le même principe : il s'agit d'une cellule vide de la table.three-col (qui contient en gros toute la page dès la fin des annonces)

Je suppose qu'il faudrait les supprimer...


Ces écarts n'apparaissent pas quand je regarde avec Firefox ^^
Pour le problème d'affichage de la page d'accueil, le souci vient de l'image du coin en haut à gauche, mais remplacer float:left; par position:relative; left:-400px; semble régler le problème =) (avec -400px ou une autre valeur d'ailleurs, à voir en fonction, pour la positionner verticalement, utiliser top:XXpx )

Et, au passage, très joli forum ^^

[MasDan]

Bonjour,

Pour le problème de la présentation visuelle avec Firefox.





Il s'agit de voir la différence entre la première liane (en haut à gauche) et la deuxième (en bas à droite). On remarque que la deuxième image (#3 dans le code) qui s'affiche correctement est insérée dans la dernière cellule de la table alors que la première(#1) est hors de la table. Je propose de la déplacée à l'intérieur de la table dans le première cellule (#2) mais hors de la balise <p>.  J'espère que cela règle le problème de Firefox sans affecter la présentation sur IE et Chrome.

La deuxième image a été réalisé avec l'option «Examiner l'élement» de Firefox.

Je viens de remarquer que sur IE, chez moi, les «.gif» ne s'affichent pas. Étrange...

[Offrande]

Bonjour,

Merci MasDan pour t'as réponse, vos deux solutions on parfaitement fonctionner! Merci! 
Pour le moment j'ai supprimer les images des lierres pour en mettre d'autre car je ne trouver pas cela terrible, elle n'était pas très transparentes et il rester les traces de la transformations en png.

Pour ce qui est de l'écart du QEEL et de la page entière, j'ai pus remarquer que l'écart apparaisser seulement sur la page d'acceuil, sur les autre pages il n'y as aucun soucis.

j'aimerais donc savoir comme supprimer ces deux cellules vide que MlleAlys m'as indiquez.


Merci beaucoup de votre aide, bonne journée.
Tendrement,
Offrande

[MlleAlys]

aurais-tu les templates concernés s'il te plait ? ^^

[Offrande]

Bonjour, 

Effectivement, ce n'est que sur l'accueil que l'image du bas à un décalage.
Mon qeel n'apparaissent pas sur les autre pages, peut importe.

Voila mon index_body:

Code:

{JAVASCRIPT}
<br/>
  <!-- barre de navigation -->
  <center><div id="navig">{GENERATED_NAV_BAR}</div></center>
<!--fin barre de navigation --> 

 
<!-- 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 -->





<!-- BOITE DE RECHERCHE -->
<br/>
<center>
  <div id="search"><form ide="search_form" method="get" action="/search.forum">
     <input class="search_bginput" type="text" value="Rechercher sur le Havre"
    style="width: 120" size="24" name="search_keywords"><input class="search_button" type="submit"
      title="Lancer la recherche" value="Recherche">
      </center>
      <br/><br/><br/><br/>
<!-- fIN BOITE DE RECHERCHE -->
 
 
 
 
 

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
</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 -->

        <!-- END switch_delete_cookies -->
        </span>
      </td>
      <td width="50%" align="right">
        <span class="gensmall">

            <!-- BEGIN switch_on_index -->
              <!-- BEGIN switch_delete_cookies -->

              <!-- 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">
 
</form>
<!-- END switch_user_login_form_footer -->
     
         
     
     
     
     
     
     
     

     
      <!-- BEGIN disable_viewonline -->

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <td class="catHead" colspan="2">

    <!-- DEBUT TITRE QEEL -->
<div class="top_cat">
          <div class="tfa_cat_gauche"></div>
          <div class="tfa_cat_droite"></div>
          <div class="tfa_cat_center">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
        </div>
</div>
      <!-- FIN TITRE QEEL -->
     
     
         <!-- QEEL THEME FA -->
     
     
     
     
     
     
     
     
     
     
     
<div class="table_qeel">     
<table cellpadding="2" cellspacing="2">
<tr>
   
<td valign="top" class="plus_connecter">   
        <h1>Les Derniers connecter</h1><br/>
   <span class="gensmall">{TOTAL_USERS_ONLINE}<br/>
   {RECORD_USERS}<br/>
   <br/>
   {LOGGED_IN_USER_LIST}</span>
   </td>
     
<td valign="top" class="en_ligne"> 
        <h1>Ils nous sont proche</h1>
   <p>
        {LOGGED_IN_USER_LIST}
        </p>
        </td>
       
<td valign="top" class="statistique">
        <h1>Statistique</h1>
        <p>
          {TOTAL_POSTS}<br/>
          {TOTAL_USERS}<br/>
          {NEWEST_USER}<br/>et nous lui souhaitons <strong>un agréable sèjour</strong>.<br/>
          {RECORD_USERS}</p></td></tr> </table>

 
 <!-- FIN QEEL THEME FA -->
                          <!-- END disable_viewonline -->
               
 
{CHATBOX_BOTTOM}
<br clear="all" />

{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 -->

[Offrande]

(suite du message car code trop long)

Voila donc mon index_box:

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">

   
<!-- BEGIN catrow -->



<!-- BEGIN tablehead -->
 
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>


        <th nowrap="nowrap"  colspan="3" width="100%" class="secondarytitle" style="background: transparent; vertical-align: middle;">

    <!-- DEBUT TITRE CATEGORIE -->
<div class="top_cat">
      <div class="tfa_cat_gauche"></div>
    <div class="tfa_cat_droite"></div>
    <div class="tfa_cat_center">
          <div class="firstletter" {catrow.tablehead.L_FORUM} </div>
    </div>
</div>
      <!-- FIN TITRE CATEGORIE -->
</tr>

  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap">Le Grand Havre</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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 class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         
                 
            <table width="100%"><tbody><tr><td>
             
             
             
 <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 
            </span>
        </h{catrow.forumrow.LEVEL}></td>
 
 
 
 
  </tr></tbody></table>
             
             
             
              </td><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></tbody></table>
                 
                 
                 
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
   
         
         
         
          <td class="row3 over" align="center" valign="middle" height="50">
<div class="cadredm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
         
         
         
         
   
   <!-- 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 -->

et voila mon overall_footer_begin ou as été placer mon image du bas:

Code:

<!-- BEGIN html_validation -->
<div>
   <div>
      <table>
         <tbody>
            <tr>
               <td>
<!-- END html_validation -->
               </td>
               <td valign="top" width="{C3SIZE}">
               <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->

               <!-- GRAND LOGO BAS -->
 
  <img src="http://i34.servimg.com/u/f34/17/99/16/25/ttt10.jpg" id="logo_footer">
 
               <!-- FIN GRAND LOGO BAS -->


<div id="page-footer">
   <div align="center">
      <div class="gen">
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->

Merci beaucoup pour vôtre aide ! 
Ps : J'ai retiré les image (lierre) flottante sur mon PA, est t'il correctement placer sur Firefox à présent?

énormes bisous, encore mille fois merci, Offrande

[MasDan]

Ps : J'ai retiré les image (lierre) flottante sur mon PA, est t'il correctement placer sur Firefox à présent?

Tout est OK pour Firefox.