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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Offrande le Jeu 18 Juil 2013 - 22:33

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.

Offrande
*****

Féminin
Messages : 548
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par MasDan le Ven 19 Juil 2013 - 2:20

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

MasDan
*****

Masculin
Messages : 852
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par Offrande le Ven 19 Juil 2013 - 16:17

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.

Offrande
*****

Féminin
Messages : 548
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par MasDan le Dim 21 Juil 2013 - 7:53

Bonjour,

@Offrande a écrit:... 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.


MasDan
*****

Masculin
Messages : 852
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par Anzu le Sam 27 Juil 2013 - 13:15

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

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par Offrande le Lun 29 Juil 2013 - 0:43

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 Sad si tu pouvais m'aider a arranger ceci je t'en serais vraiment très reconnaissante.

Tendrement, 
Offrande

Offrande
*****

Féminin
Messages : 548
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par MlleAlys le Lun 29 Juil 2013 - 1:35

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

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par MasDan le Lun 29 Juil 2013 - 4:51

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

MasDan
*****

Masculin
Messages : 852
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par Offrande le Mer 31 Juil 2013 - 10:40

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

Offrande
*****

Féminin
Messages : 548
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par MlleAlys le Mer 31 Juil 2013 - 14:25

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

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par Offrande le Ven 9 Aoû 2013 - 19:19

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

Féminin
Messages : 548
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par Offrande le Ven 9 Aoû 2013 - 19:25

(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

Offrande
*****

Féminin
Messages : 548
Inscrit(e) le : 05/01/2013

http://le-grand-havre.forumactif.org/
Offrande a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Coller les éléments dans le cadre du forum au bords du cadre

Message par MasDan le Dim 11 Aoû 2013 - 18:51

@Offrande a écrit:
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.

MasDan
*****

Masculin
Messages : 852
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum