Mettre sa barre de navigation en haut du forum

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

  • 0

Astuce Mettre sa barre de navigation en haut du forum

Message par Shadow le Mar 19 Avr 2011 - 15:27

Mettre sa barre de navigation en haut du forum


Ce tutorial vous explique comment déplacer votre barre de navigation tout en haut du forum.
Les modifications se font via le template overall header & CSS.

Attention: Uniquement valable pour les forums Phpbb2 & Punbb

Rendu Final

••• https://i23.servimg.com/u/f23/11/73/76/86/photo11.png


Par où commencer ?

• Allez dans Panneau d'administration > Affichage > Templates > Général > Overall header > edit

Qu'est ce qui permet l'affichage de la barre de navigation sur le forum ?

• Repérez ceci dans votre template:
Code:

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>


On se concentrera uniquement sur cette variable: {GENERATED_NAV_BAR}
Inutile de s'arrêter sur les autres.
Vous l'avez donc compris, c'est cette variable qui renvoie à la barre de navigation.

•• Dans le code par défaut, cette barre se trouve juste après la bannière et la description.

Déplacer la barre - Etape 1


• Vous prenez donc ceci
Code:
{GENERATED_NAV_BAR}
et vous la mettez un peu plus haut dans le template juste après cette ligne de code
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Attention: N'oubliez pas de retirer cette partie
Code:

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>


Déplacer la barre - Etape 2

• On ne va pas laisser notre variable toute nue, on va donc la mettre dans une div avec une class qu'on a appelé ici "navig".
Ce qui nous donne:
Code:
<center><div class="navig">{GENERATED_NAV_BAR}</div></center>
.

Petite astuce: Vous pouvez également mettre ceci
Code:
<div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div>
=> Pour ceux qui ne sont pas très à l'aise avec le css ou les templates, cela vous sera très utile si à l'avenir, vous décidez de mettre votre barre à droite plutôt que centrée. Vous le faites directement dans le pa, sans toucher au CSS ou au template.


Modification du template pour Punbb

• Repérez cette partie :
Code:
   <div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>

• Retirez la et mettez la entre le body et le begin:
Code:

<body>
   <!-- BEGIN hitskin_preview -->

• Vous obtenez ceci:

Code:

<body><div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>
   <!-- BEGIN hitskin_preview -->

• Remplacez par:

Code:
<div id="pun-navlinks"><ul class="clearfix">
                     <center><div class="navig">{GENERATED_NAV_BAR}</div></center></ul></div>






A présent, il ne vous reste plus que le code CSS !

CSS

• Allez dans Panneau d'administration > Affichage > Images et couleurs > Couleurs > Onglet Feuille CSS.

• Mettez ceci dans la css:

Code:
.navig {
position: absolute;
top: 0px;
width: 100%;
}

♣ Position: ici absolute. Pourquoi absolute ? Cette propriété permet à la barre de navigation de se positionner tout au dessus sans prendre en compte les autres éléments du forum. Elle sera donc bien positionnée.

♣ Top:0px => La barre se positionne donc à 0px du dessus.

♣ Width: 100% => La barre prend toute la largeur du forum

Le petit +: Esthétique de la barre de navigation.

• On va donc rajouter des éléments dans ce code:

Code:
.navig {
position: absolute;
top: 0px;
width: 100%;
}

Pour mettre un fond, on utilise ce code:

Code:
background-color: #000000;
♦ #000000 => code couleur que vous pouvez modifier à souhait.

Pour mettre une bordure:

Code:
border: 3px solid #dedede;
♦ 3px => l'épaisseur, plus la valeur sera grande, plus le bord sera épais.
♦ solid => solid ou dotted ou dashed
♦ #dedede => code couleur que vous pouvez modifier à souhait.

Astuces: Vous pouvez mettre une bordure uniquement en dessous, ou uniquement en haut, ou encore les deux.
Pour cela, utilisez ce code:

Pour le dessous:
Code:
border-bottom: 3px solid #a17a55;

Pour le dessus:
Code:
border-top: 3px solid #a17a55;


Pour retirer "l'image vide" générée par la barre.

Code:
a.mainmenu img{
display: none;
}

Pour tout ce qui concerne la police

Code:
a.mainmenu {
margin: 5px;
font-family: Arial;
font-size: 11px;
}

♦ Margin => permet de séparer les boutons
♦ font family => propriété pour la famille de police utilisée
♦ font size => taille de la police
Ce tutoriel a été rédigé par le Staff du Forum des Forums,
Et en particulier par Anzu.

Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.





Dernière édition par Zen le Mar 31 Mai 2011 - 15:36, édité 2 fois


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

Féminin
Messages : 23946
Inscrit(e) le : 30/03/2007

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

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Western Spaghetti le Mar 19 Avr 2011 - 15:39

Merci pour cette astuce Zen - elle sera très utile ^^ - Smile

Western Spaghetti
# Tropactif #

Masculin
Messages : 1800
Inscrit(e) le : 15/04/2006

http://www.black-hole-rpg.com
Western Spaghetti a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par balqis le Mar 19 Avr 2011 - 16:11

Merci c'est très sympa de faire partager justement je cherchais des infos sur cela. cheers

balqis
*****

Féminin
Messages : 536
Inscrit(e) le : 11/10/2004

http://www.vertlaminceur.net
balqis a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par bihabib le Mer 20 Avr 2011 - 13:20

merci c'est sympa

bihabib
****

Masculin
Messages : 422
Inscrit(e) le : 04/04/2008

http://WWW.leformateur.net
bihabib a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par taraderus le Ven 22 Avr 2011 - 10:10

Bonjour tout ça c'est bien mais ne sert pas à grand chose pour ma part, pourquoi ne pas essayer d'améliorer la gestion des membres des forums, sélection plusieurs membres, copier/coller, création plus facile de groupe et de copier une partie des membres par sélection, séparer ceux qui post souvent et bien sur les autres, après un certain nombre de messages un passage automatique dans une autre catégorie, ou sujet, etc etc...

je sais aussi que cela n'intéresse peut être pas grand monde mais quand vous dépassé un certain nombre de membres cela parait très utile 1050 membre bientôt pour notre forum.

je laisse aux modos la pertinente de supprimer ou d'ouvrir un nouveau sujet.

merci

taraderus
Nouveau membre

Masculin
Messages : 6
Inscrit(e) le : 03/09/2006

http://aquarium-59.forumactif.com/portal.htm
taraderus a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Anzu le Ven 22 Avr 2011 - 14:25

taraderus => Bonjour, Quel est le rapport avec ce sujet qui est une astuce ?

Si vous avez une suggestion à faire, vous la faites dans la section appropriée. Il ne faut pas mélanger améliorations graphiques (modification de templates, css, etc) et améliorations techniques.

Cordialement.

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.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Pokéyugimestre le Sam 23 Avr 2011 - 13:22

Bien le bonjour, très bonne idée, je cherchais justement comment faire, je l'installerai peut-être sur mon Forum à l'avenir. alien

Cordialement.

Pokéyugimestre
*****

Masculin
Messages : 593
Inscrit(e) le : 22/11/2009

http://geekandhistory.tonempire.com/
Pokéyugimestre a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par le ch'ti le Lun 25 Avr 2011 - 8:19

excellent, merci

le ch'ti
***

Masculin
Messages : 111
Inscrit(e) le : 07/11/2009

http://www.sporting-toulon.com
le ch'ti a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Pepper Potts le Dim 15 Mai 2011 - 15:03

Merci beaucoup pour ce tuto, cela allège grandement la zone sous le logo <3

Pepper Potts
Nouveau membre

Féminin
Messages : 16
Inscrit(e) le : 24/01/2010

http://www.otacute.net/
Pepper Potts a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Xélore le Dim 15 Mai 2011 - 15:09

Merci Zen pour toutes c'est explications =)

Xélore
****

Masculin
Messages : 402
Inscrit(e) le : 22/02/2011

http://xena-and-gabrielle.forumgratuit.org/
Xélore a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Hemma le Mar 17 Mai 2011 - 23:00

Merci mais je connais un tuto beaucoup plus court avec le même résultat

Hemma
**

Féminin
Messages : 61
Inscrit(e) le : 25/11/2010

http://Fashion-Graph-World.forumgratuit.org
Hemma a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par N0ah le Mer 18 Mai 2011 - 20:18

Merci beaucoup pour ce tuto ! ^0^

N0ah
Nouveau membre

Messages : 1
Inscrit(e) le : 17/05/2011

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

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par island le Mer 25 Mai 2011 - 17:26

Merci c'est quelque chose d'utile .

island
*****

Masculin
Messages : 516
Inscrit(e) le : 06/10/2008

http://none.france
island a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Etoile Nocturne le Lun 30 Mai 2011 - 22:29

Bonsoir,
Merci pour le tuto , j'en avais trouver un sur un forum , un peaux [beaucoup] plus cours donc bon :/ celui ci , n'est pas mal , merci♥

Etoile Nocturne
***

Féminin
Messages : 102
Inscrit(e) le : 07/01/2011

http://edelweiss--war.forumgratuit.org/forum
Etoile Nocturne a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Invité le Mar 31 Mai 2011 - 11:16

Bonjour,

Cela fait deux fois que la remarque est faite à propos d'un tuto plus court. Pourriez-vous nous faire partager ce tutoriel? En effet le staff est ouvert à toutes suggestions concernant l'amélioration des tutoriels proposés.

Cordialement.

Invité
Invité


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

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par ricafolgosa le Jeu 2 Juin 2011 - 10:59

merci c'est sympa

ricafolgosa
Nouveau membre

Masculin
Messages : 9
Inscrit(e) le : 01/06/2011

http://www.extravaganzalive.com/
ricafolgosa a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par nicolas.gateau le Sam 11 Juin 2011 - 14:09

bon tuto merci.
Cependant j'ai une question si je veut mettre dans la arrière plan une image plutôt qu'une couleur?
Es-ce possible?
Si oui comment?

nicolas.gateau
Nouveau membre

Messages : 3
Inscrit(e) le : 30/10/2010

http://formula1-ligue.hightoxic.com/index.htm
nicolas.gateau a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par ltouzet le Mer 15 Juin 2011 - 13:32

Quelle barre de Naviguation ?

ltouzet
*

Messages : 34
Inscrit(e) le : 23/04/2011

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

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Scipion le Mer 15 Juin 2011 - 15:18

@ltouzet a écrit:Quelle barre de Naviguation ?
Bonjour

Il s'agit de la barre des liens, composée avec les boutons Accueil, Faq, Rechercher, Connexion...

Cordialement

Scipion
+ Hyperactif +

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

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

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par ltouzet le Mer 15 Juin 2011 - 15:23

Dac mais moi ils disent:
Dans cet espace vous pouvez modifier un template existant et modifier ainsi l'apparence du forum. Les templates modifiés sont marqués en rouge.
Pour revenir au template par défaut, cliquez sur supprimer : attention, votre template sera effacé !

Seuls les templates des versions phpBB2 ou PunBB sont affectés par ces modifications.

ltouzet
*

Messages : 34
Inscrit(e) le : 23/04/2011

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

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Milouze14 le Mer 15 Juin 2011 - 16:26

Salut,
regarde l'entête du topic,
Attention: Uniquement valable pour les forums Phpbb2 & Punbb

Tu es en invision il me semble Wink
a++

Milouze14
+ Hyperactif +

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

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

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Stankiller le Dim 19 Juin 2011 - 12:28

Merci pour ce toto je préfère le mettre sous la bannière mais merci quand meme. Smile

Stankiller
**

Messages : 64
Inscrit(e) le : 14/06/2011

http://royal-universe.forum-gratuit.net/
Stankiller a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par » Golden Mind. le Ven 24 Juin 2011 - 13:33

Bonjour,
Lors de la construction de mon forum, j'avais mis des petits boutons provisoires par défaut disponible sur forumactif. Je comptais mettre ma barre de navigation au dessus du header, exactement comme le propose ce tutoriel.
Seulement, après l'avoir appliqué, je constate que ma barre de navigation se situe bien au dessus du header, mais ce sont toujours mes images provisoires. Je les ai donc retirées, en pensant qu'un simple lien (accueil, etc) se mettrait à sa place, mais comme je n'ai pas mis les liens nulle part, je ne sais pas comment faire. Du coup, je n'ai plus du tout de barre de navigation ce qui est très problématique...

J'aimerais obtenir un rendu similaire à ça ( https://i26.servimg.com/u/f26/15/96/80/72/commen10.jpg ), avec des couleurs différentes - puisque je veux l'adapter à mon forum.

Voici 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}"><center><div class="navig">{GENERATED_NAV_BAR}</div></center>
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/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 />
                     <span class="gen">{SITE_DESCRIPTION}<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></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 -->

et mon css associé:
Code:
/*BARRE NAVIGATION*/
.navig {
position: absolute;
top: 0px;
width: 100%;
}


Merci de votre aide !

» Golden Mind.
**

Féminin
Messages : 98
Inscrit(e) le : 08/06/2011

http://trappedintime.forumactif.com
» Golden Mind. a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Anzu le Ven 24 Juin 2011 - 15:25

Bonjour,

Je vous invite à poster votre demande directement sur le forum Smile

Cordialement.

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.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par » Golden Mind. le Ven 24 Juin 2011 - 20:07


» Golden Mind.
**

Féminin
Messages : 98
Inscrit(e) le : 08/06/2011

http://trappedintime.forumactif.com
» Golden Mind. a été remercié(e) par l'auteur de ce sujet.

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Garown le Sam 27 Aoû 2011 - 3:36

Bonsoir,

Merci bien pour ce petit tuto, je cherchais justement ce genre de truc. :>

Garown
Nouveau membre

Messages : 1
Inscrit(e) le : 27/08/2011

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

Astuce Re: Mettre sa barre de navigation en haut du forum

Message par Ashlee le Mar 8 Nov 2011 - 11:24

-

Ashlee
***

Féminin
Messages : 155
Inscrit(e) le : 26/10/2009

http://bloodyfields.1fr1.net/
Ashlee 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