Probleme panneau a gauche qui passe sous le forum

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

Résolu Probleme panneau a gauche qui passe sous le forum

Message par akito73 le Lun 15 Mai 2017 - 6:15

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : 14/05
Lien du forum : http://theother-side.forumactif.com

Description du problème

Bonjour à tous!

J'ai un petit problème avec mon forum, mais rien ne vaut mieux que des images pour expliquer!



Voici mon forum, et mon problème vient des zones encadré en rouge! La barre marron que j'ai faite sur la gauche donc. Chez moi, aucun problème! Tout fonctionne parfaitement.

Sauf que, chez mon amie, voici comment le forum apparaît:


Et on utilise tous les deux Chrome donc ça ne vient pas de ça. La seule explication que j'ai trouvée est que mon écran est beaucoup plus large que le sien, ce qui fait que je n'ai pas le problème de la barre marron de gauche qui passe sous le forum! Et du coup, elle ne peux pas cliquer sur le lien "accéder au profil".

Comment puis-je régler ce problème? Sad

Aussi du coup, je voulais savoir comment faire pour que la barre devienne comme un slide, on appuie sur un bouton et ça la fait sortir du coté, et quand on re appui ça la range de nouveau, ça pourrait aussi régler le problème (sauf si elle passe toujours sous le forum chez les autres...)

Je vous remercie d'avance!

Je mets le CSS et le Template (overall header) en code ci-dessous:

CSS
Code:
/************* COLONNE DE GAUCHE AVEC AVATAR ET BARRE DE NAVIGATION *********/

#colonne {
    background: #2a0b05;
    box-shadow: 0 0 3px #2a262c;
    color: #a08e93;
    display: table;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 400px;
}

#colonne h1 {
    font-family: Montserrat,sans-serif;
    font-size: 35px;
    font-style: italic;
    font-variant: normal;
    font-weight: normal;
    margin-bottom: 10px;
    text-align: center;
  text-shadow: 3px 3px 3px #000000;
  color: #e3e3e3;
}

#colonne h2 {
    font-family: Montserrat,sans-serif;
    font-size: 22px;
    font-style: italic;
    font-variant: normal;
    font-weight: normal;
    margin-bottom: 10px;
    text-align: center;
  text-shadow: 3px 3px 3px #000000;
  color: #e3e3e3;
}

#colonne h3 {
    font-family: Montserrat,sans-serif;
    font-size: 22px;
    font-style: italic;
    font-variant: normal;
    font-weight: normal;
    margin-bottom: 10px;
    text-align: center;
  text-shadow: 3px 3px 3px #000000;
  color: #ad6e51;
}

/** gif en haut de la colonne à gauche */
#bordure_gif article {
    background: linear-gradient(transparent,transparent,#2a0b05);
    height: 224px;
    position: absolute;
    width: 400px;
    z-index: 9;
}


.js-useravatar {
    width: 150px;
    height: 150px;
    margin: 10px auto 0 auto;
    border-radius: 100px;
    border: 3px solid #e3e3e3;
  overflow: hidden;}

.USERNAME {
font-family: Montserrat,sans-serif;
    font-size: 22px;
    font-style: italic;
    font-variant: normal;
    font-weight: normal;
    margin-bottom: 10px;
    text-align: center;
  text-shadow: 3px 3px 3px #000000;
  color: #ad6e51;}

/*enlever le calendrier de la navigation*/
.mainmenu[href="/calendar"]{display:none;}

Template:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
  <link href='http://fonts.googleapis.com/css?family=Wire+One|Alegreya+Sans+SC|Cuprum|Mr+Dafoe|Dancing+Script|Suranna|Pacifico|UnifrakturMaguntia|Titillium+Web|Indie+Flower|Covered+By+Your+Grace|Parisienne|Dancing+Script|Mate+SC|Graduate|Amatic+SC|Slabo+27px|Jacques+Francois' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->
 
 
  <link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic|Alegreya+Sans+SC|Mr+Dafoe' rel='stylesheet' type='text/css'>
   
   

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
 
  <div id="fond_sombre"></div>
 
 <div id="banniere"></div>
 
  <div id="colonne"><div id="bordure_gif">
    <article></article><img src="http://image.noelshack.com/fichiers/2017/19/1494634226-sense8-opening-intro.gif"  height="224" width="400"></div>
    <br /><br /> <h1>The Other Side</h1> <br /> <center><div class="js-useravatar"></div><br /><span class="USERNAME"></span><br /> <font color="#664C40">Accéder au</font> <i><a href="http://theother-side.forumactif.com/profile?mode=editprofile">PROFIL</a></i></center>
    <br /><br /><h2>Actualités</h2>
    <center><font color="#664C40">15/05. Ouverture du forum!!</font></center>
   
   
   
   
    </div>
  <div id="logo"></div><div id="titre"></div>
   
 
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">{GENERATED_NAV_BAR}
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->


Dernière édition par akito73 le Mar 16 Mai 2017 - 0:00, édité 1 fois
avatar

akito73
**

Masculin
Messages : 83
Inscrit(e) le : 25/12/2008

http://puissance-naruto.fr-bb.com/
akito73 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme panneau a gauche qui passe sous le forum

Message par ◦Jay◦ le Lun 15 Mai 2017 - 7:25

Bonjour akito73, il faudrait supprimer le .gif du template pour le mettre en css, vous n'aurez que deux éléments à revoir, comme ceci, en mettant une taille en % et en ajoutant le .gif :

Code:
#colonne {
    background: #2a0b05;
    box-shadow: 0 0 3px #2a262c;
    color: #a08e93;
    display: table;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 15% !important;
}
 
#bordure_gif article {
    background: linear-gradient(transparent,transparent,#2a0b05);
    -height: 224px;
    position: absolute;
    width: 100% !important;
    z-index: 9;
  background-image:url(http://image.noelshack.com/fichiers/2017/19/1494634226-sense8-opening-intro.gif);
  background-repeat:no-repeat;
}

Bien à vous.


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3602
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme panneau a gauche qui passe sous le forum

Message par Milouze14 le Lun 15 Mai 2017 - 7:35

Hello akito73,

je vois que tu as modifié la largeur en pourcentage et c'est bien ce qu'il fallait faire.
Code:
 width: 15% !important;

Il suffit de décaler le reste après en mettant un peu de marge Wink :
Code:
.bodylinewidth {margin-left:17%;}

Désolé ◦Jay◦ Wink
a++
avatar

Milouze14
Membre actif

Masculin
Messages : 4806
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme panneau a gauche qui passe sous le forum

Message par ◦Jay◦ le Lun 15 Mai 2017 - 7:37

Je ne pense pas que le décalage passe sur tous les navigateurs.


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3602
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme panneau a gauche qui passe sous le forum

Message par akito73 le Lun 15 Mai 2017 - 23:59

Bonsoir!

Merci pour l'aide!

Pour l'instant en tout cas ca passe chez mon amie avec la solution de Jay, donc je pense que ca devrait aller!

Merci beaucoup encore!!
avatar

akito73
**

Masculin
Messages : 83
Inscrit(e) le : 25/12/2008

http://puissance-naruto.fr-bb.com/
akito73 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