Sujets similaires

Bonjour,
Encore de nouveaux bugs à la clé o/
J'ai décidé de créer une barre de navigation "verticale" et positionnée sur le côté à l'aide de la commande "display:block". Sur un de mes forums, ca a très bien marché. J'ai copié exactement le même code sous un forum test et là impossible de bouger ma barre de navigation (collée en haut à gauche) ou d'en régler la taille (largeur et hauteur).

Le forum sur lequel ca a marché : http://reve-inverness.forumactif.com/

Mon forum test : http://cavenecadas.forums-actifs.net/

Le template complet (le sélecteur css est "maBarreDeNavigation") :

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>
<link href='http://fonts.googleapis.com/css?family=Euphoria+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>

<script language="javascript" src="http://shutdown.forums-actifs.com/h3-onglets-signa"></script>

<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" />

<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />


<link rel="canonical" href="{switch_canonical_url.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>


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



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



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


<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
   
      pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
      pm.focus();
   
   
      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}');
      report.focus();
   
   
      ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
   
});


   var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;



$(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
         });
   });
});

//]]>
</script>
{GREETING_POPUP}

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

{HOSTING_JS}

<script type="text/javascript">
//<![CDATA[
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
   _gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);


_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);


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


<script type="text/javascript">
$(document).ready(function() {
$(".cssactif_progressif").css("display", "none");
$(".cssactif_progressif").fadeIn(500);
});
</script>

</head>

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

<div class="maBarreDeNavigation">
{GENERATED_NAV_BAR}
</div>

<br />


<div id="hitskin_preview" style="display: block;">
   <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.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>



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


<a name="top"></a>
{JAVASCRIPT}

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
   <tr>
      <td class="bodyline">


         <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
               
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
               
               <td align="center" width="100%" valign="middle">
                  
                  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                  <br />
                  
                  <div class="maintitle">{MAIN_SITENAME}</div>
                  <br />
                  <span class="gen">{SITE_DESCRIPTION}<br /> </span>
               </td>
               
               <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
               
            </tr>
         </table>

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

         
         <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 {CLASS_TABLE_TYPE} align="left" class="row1">
                     <div id="fa_ticker_container">
                        <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                           
                           <li>{switch_ticker.ticker_row.ELEMENT}</li>
                           
                        </ul>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         

         
         <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 {CLASS_TABLE_TYPE} align="left" class="row1">
                     <div id="fa_ticker_container">
                        <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                           <div class="fa_ticker_content">
                              
                              <div>{switch_ticker.ticker_row.ELEMENT}</div>
                              
                           </div>
                        </div>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         

         <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}">
                              
                              {giefmod_index1.MODVAR}
                                 
                                 <div style="height:{SPACE_ROW}px"></div>
                                 
                              
                           </div>
                        </td>
                        <td valign="top" width="100%">

                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </td>
   </tr>
</table>
</body>
</html>


<div class="cssactif_progressif">

Le Css relatif à la navigation :

Code:: .mainmenu{
font-family: 'Marcellus SC', serif;
font-family: Marcellus SC;
text-decoration: none;
font-weight: bold;
font-size: 13px;
color: #1D1F1B;
}

.maBarreDeNavigation
{
position: fixed;
left:25px;
top:0px;
width:187px;
line-height: 1.0 em;
background-image:url("http://img11.hostingpics.net/pics/330031navfond.png");
background-repeat: no-repeat;
height:270px;
text-align:center;
z-index:500;
}

.maBarreDeNavigation a.mainmenu
{display: block;
color: #82916D;
font-family: 'Marcellus SC', serif;
font-size: 20px;
font-variant: small-caps;
text-shadow: #000000 0px 0px 5px;
text-decoration: none;
line-height: 1.0em;
opacity:0.7;
}

.maBarreDeNavigation a.mainmenu:hover
{color:#AFC294;
opacity:1;
-webkit-transition:all 0.5s;/* Laissez comme ceci */
-moz-transition:all 0.5s;/* Laissez comme ceci */
-o-transition:all 0.5s;/* Laissez comme ceci */
-ms-transition:all 0.5s;/* Laissez comme ceci */
transition:all 0.5s;/* Laissez comme ceci */
}

Merci d'avance !

Salut,
Effectivement, impossible de changer les valeurs sous Chrome ; par contre ça marche sur Firefox et IE. À mon avis, c'est un script JS qui en est responsable.

Déjà, quelque part, tu appelles "http://www.illusionimaginative.net/version/R%25e9h%25e9berger.png", qui renvoie une erreur 404 (en gros, le fichier n'existe pas), corrige ça en premier lieu.

Le JS qui plante, c'est "99871.js", précisément à cet endroit :

Code:: document.getElementById('i_logo').src=banner[Math.floor(Math.random()*banner.length)];

Le débugueur d'IE précise "impossible de définir la propriété "src" d'une référence null ou non définie." ; effectivement, ton bout de script sert à charger une image de manière aléatoire en fonction d'une taille bizarre, semble-t-il.

Vire ce bout de code si tu n'en as pas besoin. Remplace juste ton JS par celui-ci, j'ai enlevé le passage incriminé :

Code:: $(function(){$(".boutonSlide").click(function(){$(this).next().slideToggle("slow")})});$(document).ready(function(){var footer=$('#page-footer').remove();$('#page-body').after(footer)});function changeOnglet(_this){var getOnglets=document.getElementById('mes_onglets').getElementsByTagName('div');for(var i=0;i<getOnglets.length;i++){if(getOnglets[i].id){if(getOnglets[i].id==_this.id){getOnglets[i].className='mon_onglet_selected';document.getElementById('c'+_this.id).style.display='block'}else{getOnglets[i].className='mon_onglet';document.getElementById('c'+getOnglets[i].id).style.display='none'}}}}

Si tu en as besoin... Hé bien vire-le quand même, et voyons déjà si ça marche comme ça. Ensuite, on regardera comment faire un système qui marche, à la place.

Bonjour,
Alors pour le lien qui ne marchait plus, c'était le logo d'un partenaire qui n'était plus hébergé (problème rectifié donc). Par contre je ne trouve pas du tout le bout de Js dont tu parles. J'ai beau regarder dans tous les templates que j'ai modifié, je ne le retrouve pas.

Vu le nom, il doit être dans modules > javascript

Hum j'ai supprimé la page js dont tu parles ce matin en fait, elle ne me servait à rien (et elle bugait, c'était un tuto pour avoir un header aléatoire que j'ai trouvé sur Cssactif d'ailleurs).

Pourtant j'ai toujours ce souci avec la barre de navigation.

Pourtant quand je regarde sous Chrome, je peux désormais modifier les valeurs sans problème.

Hum pourtant je n'arrive pas à modifier la largeur de ma table (pour que le fond apparaisse entièrement) ni à coller la barre de navigation en haut de la page. J'utilise ce css :

Code:: .maBarreDeNavigation
{
position: fixed;
left:0px;
top:0px;
width:400px;
line-height: 1.0 em;
background-image:url('http://img11.hostingpics.net/pics/330031navfond.png');
background-repeat: no-repeat;
height:270px;
text-align:center;
z-index:500;
}

.maBarreDeNavigation a.mainmenu
{display: block;
color: #82916D;
font-family: 'Marcellus SC', serif;
font-size: 20px;
font-variant: small-caps;
text-shadow: #000000 0px 0px 5px;
text-decoration: none;
line-height: 1.0em;
opacity:0.7;
}

.maBarreDeNavigation a.mainmenu:hover
{color:#AFC294;
opacity:1;
transition:all 0.5s;/* Laissez comme ceci */
}

Peut-être qu'il s'agit d'un problème dans la structure du code dans le template dans ce cas, mais je ne vois pas où. Je n'arrive vraiment pas à personnaliser la barre de navigation sous Chrome via le panneau d'administration.

Ces propriétés ne sont pas celles qui sont appliquées sur l'élément en tout cas.

Voilà celles qui le sont :

Code:: .maBarreDeNavigation {
background-image: url(http://img11.hostingpics.net/pics/330031navfond.png);
background-repeat: no-repeat;
height: 270px;
left: 0;
line-height: .6em;
position: fixed;
text-align: center;
top: 70px;
width: 142px;
z-index: 500;
}

Si, lorsque tu modifies ce code, les modifications ne sont pas prises en compte, c'est qu'il y a un problème ailleurs, probablement en amont ( } pas refermé, par exemple).

Han mince alors, c'était tellement bête. Par un malheureux copier/coller j'ai laissé un vieux bout de code qui faisait interférence. Merci beaucoup Manumanu. Le problème est donc résolu What a Face

Parfait, je me permets donc de déplacer. Smile

Bonne journée. [Résolu] Bug Barre de Navigation 926145

[Résolu] Bug Barre de Navigation

[Résolu] Bug Barre de Navigation

Sujets similaires

Sujets similaires

Partenaires Or