AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [Template] Barre de navigation au dessus du header/logo

    Sui'
    Sui'
    MasculinAge : 27Messages : 1865

    le Dim 1 Aoû 2010 - 12:00

    Rappel du premier message :



    Salutation N'Utopien / N'Utopienne!!!

    Ce petit tutoriel vous permettra de placer votre barre de navigation au dessus de la bannière.

    Niveau: Facile Aperçu: Ici Fonctionne qu'avec les versions phpbb2 et punbb


    Vous êtes sur votre forum c'est bon? Alors commencer à allez sur votre panneau d'administration -> Affichage -> Template : Général -> Entrez dans le template Overall_header.

    Descendez vers le bas du code et copiez cette partie du 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><br />

    Remontez maintenant un peu plus haut et déplacez le code après cette partie:

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

    Ce qui vous donnera ça:

    Code:
    <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
          <tr>
             <td class="bodyline">
                <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                   <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                   </tr>
                </table><br>

    |!| A noter que j'ai ajouté un saut de ligne
    Code:
    <br>
    à la fin pour qu'il y ait un espace entre la bannière et la barre de navigation.


    Et voila!! Une fois le code placé au bon endroit, il ne vous reste plus qu'à valider puis à confirmer la validation en cliquant sur la croix verte [Template] Barre de navigation au dessus du header/logo - Page 2 Ajouter


    C'est terminé, j'espère que ce tutoriel vous aura aidé et qu'il sera compréhensible pour tous.

    Bonne chance Wink.

    Autre tuto qui va avec celui-ci:

    [CSS] Barre de navigation


    Dernière édition par Sui' le Lun 2 Aoû 2010 - 9:54, édité 1 fois



    Merci beaucoup Woo pour ce kit *-*
    [Template] Barre de navigation au dessus du header/logo - Page 2 657955SignatureSuicopie
    Sui' Art's
    Sui'
    Sui'
    MasculinAge : 27Messages : 1865

    le Dim 17 Oct 2010 - 15:47

    Que veux tu dire par vol?



    Merci beaucoup Woo pour ce kit *-*
    [Template] Barre de navigation au dessus du header/logo - Page 2 657955SignatureSuicopie
    Sui' Art's
    naruto-seikô
    naruto-seikô
    MasculinAge : 24Messages : 178

    le Dim 17 Oct 2010 - 18:14

    Flotte plutôt ! =p ! Par exemple je regarde mon QUEEL, et là j'ai oublié de changer a signature, alors au lieu de remonter toute la page, je clique sur la barre de navigation qui reste en haut de page ! Je ne connais pas le terme exact pour définir cela. J'espère que tu as compris par ce que mon exemple n'est pas fameux LOL .



    [Template] Barre de navigation au dessus du header/logo - Page 2 184950Prince_persia

    Kit By Me
    Sui'
    Sui'
    MasculinAge : 27Messages : 1865

    le Dim 17 Oct 2010 - 19:36

    Il te suffit de fixer la barre de navigation.
    Donc encadre ce code:

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

    Par sa:

    Code:
    <table style="position: fixed; left: 0px; top: 0px; right: 0px; z-index:1000; width: 100%;" ><tr><td>
    <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                   <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                   </tr>
                </table>
    </td></tr></table>



    Merci beaucoup Woo pour ce kit *-*
    [Template] Barre de navigation au dessus du header/logo - Page 2 657955SignatureSuicopie
    Sui' Art's
    naruto-seikô
    naruto-seikô
    MasculinAge : 24Messages : 178

    le Dim 17 Oct 2010 - 20:48

    ça fonctionne ! Merci beaucoup ! =)



    [Template] Barre de navigation au dessus du header/logo - Page 2 184950Prince_persia

    Kit By Me
    yooh
    yooh
    FémininAge : 27Messages : 142

    le Dim 15 Mai 2011 - 19:24

    merci beaucoup <3
    Feuille de Lune
    Feuille de Lune
    FémininAge : 21Messages : 30

    le Mar 27 Sep 2011 - 20:34

    Moi ça marche mais j'ai un léger problème ^^ J'ai une barre de navigation au dessus du header ce que je veux quoi, et euh la même mais comme avant, ce qui fait que j'ai 2 barres de navigation --" Aide moi stp merci (a) !

    Voilà le forum & mon template :
    www.vpac.forumgratuit.org

    Spoiler:



    {SITENAME_TITLE}{PAGE_TITLE}









    {META_FAVICO}
    {META}
    {META_FB_LIKE}

    {T_HEAD_STYLESHEET}
    {CSS}

















    // /* 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');
    }
    });
    //]]>



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

    //]]>

    {GREETING_POPUP}



    {HOSTING_JS}


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






    [Template] Barre de navigation au dessus du header/logo - Page 2 Hitskin_logo Hitskin.com




    {hitskin_preview.L_THEME_SITE_PREVIEW}


    {hitskin_preview.U_INSTALL_THEME}{hitskin_preview.L_RETURN_THEME}
















    {SITENAME}








    {LOGIN_POPUP_MSG}




    {JAVASCRIPT}










    {GENERATED_NAV_BAR}


















    {MAIN_SITENAME}



    {SITE_DESCRIPTION}
     






    {GENERATED_NAV_BAR}



























    {switch_ticker.ticker_row.ELEMENT}




















    {giefmod_index1.MODVAR}














    aFlametGirl
    aFlametGirl
    FémininAge : 27Messages : 39

    le Jeu 29 Sep 2011 - 23:19

    Pour moi ça fait la même chose x-x'
    Quand j'essaie de supprimer l'ancien code ça me dérègle tout ..

    C'est bon j'ai trouvée ♥



    최민호
    [Template] Barre de navigation au dessus du header/logo - Page 2 452404tumblrln2t64RPtJ1qdn2tro15001
    Dydy
    Dydy
    FémininAge : 28Messages : 490

    le Mer 7 Déc 2011 - 18:10

    Merci pour ce tuto très simple, il est bien pratique ^^




    [Template] Barre de navigation au dessus du header/logo - Page 2 27978_signature_never_utopia_dydy_2
    joypolis
    joypolis
    MasculinAge : 30Messages : 387

    le Mer 7 Déc 2011 - 21:30

    Haaaaa déjà vu ça sur des forums, toujours demandé comment on faisait merci à toi !!!

    Hourra 50 messages ham7



    [Template] Barre de navigation au dessus du header/logo - Page 2 653140Sanstitre003
    Eden.
    Eden.
    FémininAge : 26Messages : 201

    le Ven 9 Déc 2011 - 15:05

    Je l'ai fait mais j'ai aussi deux barres de navigation >< et vu que je vois de chose a supprimer dans le tuto je sais pas comment régler le problème T_T
    Jason41800
    Jason41800
    MasculinAge : 20Messages : 30

    le Dim 6 Jan 2013 - 20:53

    Merci beaucoup, c'est génial ! Very Happy
    avatar
    Sasuke49
    MasculinAge : 21Messages : 11

    le Sam 31 Mai 2014 - 1:53

    Merci, vraiment !
    Bunny Lune
    Bunny Lune
    FémininAge : 29Messages : 145

    le Jeu 9 Avr 2015 - 22:00

    Merci du partage
    Esperanga
    Esperanga
    FémininAge : 30Messages : 103

    le Jeu 17 Sep 2015 - 17:45

    Merci du partage :)



    [Template] Barre de navigation au dessus du header/logo - Page 2 Signa_10
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2075

    le Dim 20 Sep 2015 - 22:33

    Merci (*≧▽≦)
    LeMonarque
    LeMonarque
    MasculinAge : 33Messages : 26

    le Sam 13 Aoû 2016 - 12:26

    Merci
    itsizoh
    itsizoh
    MasculinAge : 23Messages : 13

    le Mar 24 Jan 2017 - 14:26

    Merci ! joli travail
    Nélie Reinart
    Nélie Reinart
    FémininAge : 19Messages : 38

    le Mar 8 Aoû 2017 - 10:26

    merci beaucoup :3
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 20:48