Barre de navigation en haut et fixe : quelques soucis...

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

Résolu Barre de navigation en haut et fixe : quelques soucis...

Message par Invité Mar 24 Jan 2012 - 17:43

Bonjour,

Je viens de changer ma barre de navigation d'emplacement en suivant ce tutoriel : https://forum.forumactif.com/t301744-mettre-sa-barre-de-navigation-en-haut-du-forum

Elle se trouve désormais en haut de page et est fixe (le résultat souhaité donc). Toutefois, j'aurai quand même des questions dans le but de l'améliorer et de rectifier certains bugs :

Dysfonctionnement :

- Comment se fait-il que mes pages "Portail", "Charte" et "Messagerie" apparaissent complètement vide lorsque je clique dessus ? Elle marchaient pourtant très bien avant la modification...

- Lorsque l'on descend et que la barre survole la publicité qui se trouve sous la bannière, la publicité masque la bannière (elle passe devant ma barre de nav, au lieu de passer en dessous). Un code peut-il arranger ça ?

- Je n'arrive pas à enlever les choix "Accueil' et "Groupes". Comment procéder ?

Rendu :

- Comment faire pour obtenir un rendu comme sur cette barre : http://les12royaumes.forumactif.org/ (fond dégradé, illumination du texte et flèche qui apparaît dessous) ?

- Comment procéder pour enlever le soulignement lorsque l'on survole un lien, et dans le même ordre d'idée, comment faire pour que la couleur du lien change quand on le survole ?

Merci par avance.


Dernière édition par Bobers le Jeu 26 Jan 2012 - 18:08, édité 1 fois
Anonymous

Invité
Invité


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

Résolu Re: Barre de navigation en haut et fixe : quelques soucis...

Message par Gorgorbey Mar 24 Jan 2012 - 18:07

Bonjour,

Bobers a écrit:- Comment se fait-il que mes pages "Portail", "Charte" et "Messagerie" apparaissent complètement vide lorsque je clique dessus ? Elle marchaient pourtant très bien avant la modification...

Pour le portail vous êtes sur qu'il est activé ?
PA > Modules > Portail et Widgets > Gestion du portail > Afficher le portail : Oui

Pour la charte ce doit être une page HTML que vous avez créée et vous avez ajouté un bouton dans la navigation.
PA > Affichage > Page d'accueil > En-tête et navigation > Barre de navigation
Au niveau de la charte cliquez sur edit et vérifiez que le lien est bon.
- Pour trouver ce lien (si vous avez fait une page HTML) c'est dans PA > Modules > HTML et JAVASCIPT > Gestion des pages HTML
- Si ce n'est pas une page HTML, retrouvez l'adresse

Bobers a écrit:- Lorsque l'on descend et que la barre survole la publicité qui se trouve sous la bannière, la publicité masque la bannière (elle passe devant ma barre de nav, au lieu de passer en dessous). Un code peut-il arranger ça ?

Il me faudrait le code CSS lié à la barre de navigation.

Bobers a écrit:- Je n'arrive pas à enlever les choix "Accueil' et "Groupes". Comment procéder ?

Allez dans PA > Utilisateurs et groupes > Utilisateurs > Permissions spéciales > Permissions spéciales > Permissions
Dans la liste déroulante sélectionnez "Administrateur" pour tous les boutons que vous voulez enlever. Seuls les administrateur le verront.

Bobers a écrit:- Comment faire pour obtenir un rendu comme sur cette barre : http://les12royaumes.forumactif.org/ (fond dégradé, illumination du texte et flèche qui apparaît dessous) ?

Je vous ferais des effets avec le CSS que vous me donnerez (demandé ci-dessus) mais pas exactement pareil, la copie partielle ou totale de site n'est pas autorisée.

Bobers a écrit:- Comment procéder pour enlever le soulignement lorsque l'on survole un lien, et dans le même ordre d'idée, comment faire pour que la couleur du lien change quand on le survole ?

C'est bien toujours pour la barre de navigation ? Si oui je ferais avec le code que vous me fournirez.

Cordialement.
Gorgorbey

Gorgorbey
Membre actif

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

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

Résolu Re: Barre de navigation en haut et fixe : quelques soucis...

Message par Invité Mar 24 Jan 2012 - 19:20

Merci beaucoup pour vos réponses.

Pour le portail vous êtes sur qu'il est activé ?
PA > Modules > Portail et Widgets > Gestion du portail > Afficher le portail : Oui

Pour la charte ce doit être une page HTML que vous avez créée et vous avez ajouté un bouton dans la navigation.
PA > Affichage > Page d'accueil > En-tête et navigation > Barre de navigation
Au niveau de la charte cliquez sur edit et vérifiez que le lien est bon.
- Pour trouver ce lien (si vous avez fait une page HTML) c'est dans PA > Modules > HTML et JAVASCIPT > Gestion des pages HTML
- Si ce n'est pas une page HTML, retrouvez l'adresse
- Oui, mon portail est activé, mais la page apparaît vide quand je clique sur le lien dans ma barre de nav.

- Concernant ma page "Charte", je l'ai crée dans Module / Portail / Créer une nouvelle page. J'ai donc deux pages portail dans la liste, une nomée "Portail" et la seconde "Charte". Après vérification, l'adresse de ma page charte (que j'indique dans "En-tête et navigation"), est correcte.

- Le lien "Messagerie" renvoi à une page vide aussi, pourtant je n'ai rien touché à ce niveau-là.

À noter que pour ces trois liens, cela marchait parfaitement ce matin, lorsque j'avais encore ma barre de nav normale.

Il me faudrait le code CSS lié à la barre de navigation.
Code:
.navig {
position: fixed;
top: 0px;
width: 100%;
background-color: #00283F;
border-bottom: 4px solid #00283F;
left: 0px;
}

a.mainmenu img{
display: none;
}

a.mainmenu {
margin: 15px;
font-family: Verdana;
color: #FFFF00;
font-size: 11px;
font-variant: small-caps;
}
Si cela peut vous servir, voici également mon template "Overall_header" :

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}>
<head>
  <!-- BEGIN meta_emulate_ie7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <!-- END meta_emulate_ie7 -->
  <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_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 �l�ments */
        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 contenur en fonction des �l�ments et de la hauteur personnalis�e dans l'admin */
        $('ul#fa_ticker_content li').each( function () {
            if ($(this).height() > height_max)
            {
              height_max = $(this).height();
            }
        } );

        /* Redimensionnement des �l�ments 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 -->

  <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');
        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}');
        report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
        ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {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 -->

  <!-- BEGIN google_analytics_code -->
  <script type="text/javascript">
  //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_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>
  <!-- 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}"><div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div>
  <!-- BEGIN hitskin_preview -->
  <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>
  <!-- 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}
  <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>
                  <!-- 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 /><br /></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><br /></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 {CLASS_TABLE_TYPE} 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 {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">
                                <!-- 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 -->
C'est bien toujours pour la barre de navigation ?
En effet.
Anonymous

Invité
Invité


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

Résolu Re: Barre de navigation en haut et fixe : quelques soucis...

Message par Gorgorbey Mar 24 Jan 2012 - 19:45

Pour le portail je pense que rien ne s'affiche car vous n'avez pas mis de widgets à l'intérieur.
Arrow Création d'un Portail

Pour la charte je vous conseille d'en faire une dans une page HTML.
Allez dans PA > Modules > HTML et JAVASCRIPT > Gestion des pages HTML > Créer une nouvelle page HTML
- Remplissez le titre
- Voulez-vous utiliser le haut et le bas de page de votre forum ? Oui
- Utiliser cette page en tant que page d'accueil ? Non
- Code HTML * : Mettez le texte de votre charte puis enregistrez
Recopiez ensuite le lien de votre page au niveau de la gestion des boutons de la barre de navigation (notamment celui appelé "Charte").

Pour la messagerie je ne vois pas d'où cela pourrait venir...

Je viens de faire le test avec votre template et CSS, la messagerie fonctionne parfaitement.



Pour les modifications, rien de mieux que de le faire par soi-même Wink
- le fond en dégradé, vous pouvez regarder ce site il est très bien fait.
- le changement de couleur au passage de la souris, le trait en dessous et enlever le soulignement c'est :
Code:
a.mainmenu:hover
{
text-decoration: none;
color: white;
border-bottom: 5px solid white;
}
Changez les couleurs comme vous voulez Wink
Gorgorbey

Gorgorbey
Membre actif

Masculin
Messages : 3321
Inscrit(e) le : 09/09/2010

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

Résolu Re: Barre de navigation en haut et fixe : quelques soucis...

Message par Invité Jeu 26 Jan 2012 - 18:07

Concernant mes trois pages qui apparaissaient vides (portail, messagerie et aperçu des messages), j'ai remis les templates par défaut en les publiant, puis ensuite remis les miens modifiés en les publiant à nouveau. Et finalement tout remarche comme avant, ouf...

Je vous remercie pour votre code.
Anonymous

Invité
Invité


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

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

- Sujets similaires

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