Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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

    Partagez
    MasculinAge : 24Message(s) : 1865
    Sui'
    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


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

    Bonne chance Wink.

    Deux autres tuto qui vont avec celui-ci:

    [CSS] Barre de navigation

    Rollover sur la navigation [simple - toute version de forum]


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


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 24Message(s) : 1865
    Sui'
    le Dim 17 Oct 2010 - 15:47
    Que veux tu dire par vol?


    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    MasculinAge : 21Message(s) : 178
    naruto-seikô
    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 .




    Kit By Me
    MasculinAge : 24Message(s) : 1865
    Sui'
    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 *-*

    Sui' Art's
    MasculinAge : 21Message(s) : 178
    naruto-seikô
    le Dim 17 Oct 2010 - 20:48
    ça fonctionne ! Merci beaucoup ! =)




    Kit By Me
    FémininAge : 24Message(s) : 142
    yooh
    le Dim 15 Mai 2011 - 19:24
    merci beaucoup <3
    FémininAge : 18Message(s) : 30
    Feuille de Lune
    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);
    })();
    //]]>






    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}














    FémininAge : 24Message(s) : 39
    aFlametGirl
    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 ♥


    최민호
    FémininAge : 25Message(s) : 472

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Dydy
    le Mer 7 Déc 2011 - 18:10
    Merci pour ce tuto très simple, il est bien pratique ^^



    MasculinAge : 27Message(s) : 374
    joypolis
    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




    Cordialement Joypolis.
    FémininAge : 23Message(s) : 201
    Eden.
    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
    MasculinAge : 17Message(s) : 30
    Jason41800
    le Dim 6 Jan 2013 - 20:53
    Merci beaucoup, c'est génial ! Very Happy
    MasculinAge : 18Message(s) : 11
    Sasuke49
    le Sam 31 Mai 2014 - 1:53
    Merci, vraiment !
    FémininAge : 26Message(s) : 133
    Bunny Lune
    le Jeu 9 Avr 2015 - 22:00
    Merci du partage
    FémininAge : 27Message(s) : 88
    Esperanga
    le Jeu 17 Sep 2015 - 17:45
    Merci du partage :)


    FémininAge : 24Message(s) : 1355

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Dim 20 Sep 2015 - 22:33
    Merci (*≧▽≦)
    MasculinAge : 30Message(s) : 25
    LeMonarque
    le Sam 13 Aoû 2016 - 12:26
    Merci
    Contenu sponsorisé
    Aujourd'hui à 6:54

      La date/heure actuelle est Sam 1 Oct 2016 - 6:54