Problème de menu dans la toolbar.

[Rivendell.]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lookhappier.forumactif.com/

Description du problème

Bonjour.
Je reviens à nouveau vers vous car j'ai un petit problème au niveau de ma toolbar et du menu du forum que j'ai intégré dedans. En gros, si la page internet n'est pas en plein écran, le menu se met sur la zone info de la toolbar dès qu'on rétrécis la largeur de la page : https://i.imgur.com/Os2krRR.png

De plus, comme la toolbar n'est pas visible quand on n'est pas inscrit et connecté sur le forum, le menu se retrouve sans sa couleur de fond : https://i.imgur.com/alwYfya.png

Est-ce qu'il y aurait un moyen pour régler les deux problèmes ? Que le menu reste bien à sa place et que la toolbar/le fond soit visible quand on n'est pas connecté sur le forum ? Voici la partie du template ainsi que mon css :

overall_header:

css:

Merci d'avance.

[Rivendell.]

Personne ?

[Neptunia]

Bonjour ^^


Je ne prétends pas résoudre le problème mais vais faire preuve de raisonnement logique.

Code:

<div id="navig"><center>{GENERATED_NAV_BAR}</center></div>

Pour commencer, l'élément <center> est obsolète depuis 1997 c'est à dire depuis plus de 20 ans. Même si pour l'instant, tous les navigateurs semblent encore gérer cette balise, pour être certain d'avoir un code fonctionnel, mieux vaut utiliser un code propre.
Elément de texte centré sur Mozilla Developer Network

Code:

#navigation {text-align: center;position: fixed;z-index: 999;top: 0;left: 495;right: 0;width: 600px;}

- Je veux ma navigation sur le bord droit du moniteur -> 0
- Je veux ma navigation à 495 du bord gauche, 495 quoi ? centimètres ? -> Une longueur est toujours suivie de l'unité utilisée (px, cm, em) ou de %. Là encore, si on n'aime pas les surprises, on respecte la syntaxe du langage utilisé. Sinon c'est le navigateur qui tente de deviner, et en fonction du navigateur, le résultat peut varier, ce qui n'arrive pas avec du code standard.
On va imaginer que c'était du px mais ça serait mieux de le dire au navigateur.
- Je veux que ma navigation fasse 600 pixels de large.

Les 3 choses que je veux implique que l'écran qui va ouvrir la page fait obligatoirement 1095 pixels de largeur (0px de marge droite + 600px de contenu + 495px de marge gauche.
Comment vous faites pour deviner la largeur d'écran de vos membres et pour savoir que tous vos visiteurs ont la même largeur d'écran ??

Partant de cette aberration, le plus simple me semblerait de supprimer la marge gauche, laisser la marge droite. Quant au 600px de largeur, ça va poser un souci si on redimensionne la fenêtre non ?

---

Edité :

Le plus simple, c'est encore de choisir quelque chose qui fonctionne, le code de Forumactif fonctionne très bien si on ne s'en mêle pas.

Plutôt que de réinventer la roue et devoir rafistoler à coup de CSS, on va juste déplacer le bloc de code concernant la navigation.

Juste après :

Code:

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

Ajouter :

Code:

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

Et ça sera centré pour tout le monde, y-compris ceux qui n'ont pasune résolution de 1600 pixels de large.

[Rivendell.]

Bonjour,

De là à dire que c'est une aberration, c'est un peu gros. Je ne suis pas experte en la matière, d'où ma question donc désolée pour les erreurs. Ces codes m'ont juste servis à centrer la navigation. Surtout que je partais d'un code trouvé sur internet. My bad.

Ensuite, j'ai essayé le code ci-dessous bien que j'ai quand même dû rajouter du css. Car la navigation ne se mettait tout simplement pas à l'endroit voulu.

Mais, mon problème est que maintenant, elle n'est plus fixée cette navigation. Dès que je scroll vers le bas, la navigation s'enlève et il ne reste que la toolbar .. De plus, la navigation disparaît quand on n'est pas connecté.

Dans tous les cas, merci.

[Rivendell.]

Help ? Je présume que ça doit bien se faire vu que certains forums ont fait ça .. Sinon ben tant pis je mettrais le menu en-dessous du header.

[*Splash*]

Hi,

Help ? Je présume que ça doit bien se faire vu que certains forums ont fait ça

Quels forums ?
Des liens sans doute ?

[Invité]

Hello Rivendell.,
Hélène (Neptunia que je salue ) à très bien résumé ton soucis.
De plus, il vaut mieux travailler en pourcentage (pour ma part) qu'en pixels .

Bref,

Dans le template overall_header de base Phpbb2 , tu as ce code html:

Code:

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


Cette variable

Code:

{MENU_POSITION}

Correspond à l'alignement choisi dans ton P.A:

Affichage/Page d'accueil/En-tête & Navigation/En-tête des pages
Position de la barre de navigation :
A gauche
Centré
A droite





Donc pour que la barre de navigation soit centrée et prenne toute la largeur de la page:

Code:


<table id="navigation"cellspacing="0" cellpadding="0" border="0"style="width:100%;position:fixed;top:30px;left:0px;right:0px;">
                    <tr>
                        <td align="center">{GENERATED_NAV_BAR}</td>
                    </tr>
</table>

Pour une barre avec une largeur de 80%:

On aura alors un left à 10%

Code:


<table id="navigation"cellspacing="0" cellpadding="0" border="0"style="width:80%;position:fixed;top:30px;left:10%;">
                    <tr>
                        <td align="center">{GENERATED_NAV_BAR}</td>
                    </tr>
</table>


La pratique et la même si tu veux encore diminuer, mais par habitude,
il vaut mieux rester avec cette largeur , car il faut voir avec le nombre de liens et leurs tailles de police respectives.
Plus tu en auras et plus les liens partiront en vrille .



La table à cet ID:

Code:


table#navigation


Tu peux donc coloriser le cellule td comme ceci:

Code:


table#navigation td{background-color:#666666;}


Les liens:

Code:


table#navigation td a.mainmenu{color:#ffffff;}


Fred

a++

[Rivendell.]

Bonjour @"Milouze14",

Très bien, merci beaucoup, elle se positionne parfaitement ! Cependant j'ai toujours le problème de quand je me déconnecte et ben le fond disparaît. Et si je mets un fond à

Code:

table#navigation td{background-color:#666666;}

Ce fond passe au-dessus des menus de la toolbar et donc on ne voit plus la toolbar ; surtout que celle-ci disparaît quand on est déconnecté et je ne comprends pas pourquoi.

[Invité]

Hello Rivendell,

hum, l'ajout du template aurait été un sérieux atout pour la personne qui te vient en aide!!!!!!!!

Bref, sur ton forum ,
tu positionnes le code html donné au début du body juste après l'ancre:

Code:

<a name="top"></a>

Alors que ce dernier doit être positionné après ceci:

Code:


    <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 />&nbsp; </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>


a++

[Rivendell.]

Désolée, oublie de ma part mais voici la partie concernée :

Code:

<a name="top"></a>
    {JAVASCRIPT}
                  <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                    <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}><table id="navigation"cellspacing="0" cellpadding="0" border="0"style="width:100%;position:fixed;top:0px;left:0px;right:0px;">
                    <tr>
                        <td align="center">{GENERATED_NAV_BAR}</td>
                    </tr>
</table></td>
                    </tr>
                </table>

Alors oui, je l'ai positionné là car on m'a dit plus haut de le mettre à ce niveau .. Mais si je positionne ceci là où tu me le dis, le menu sera sous le header, alors que je souhaite l'avoir DANS la toolbar .. J'ai suivis ce tuto au départ : https://forum.forumactif.com/t380910-integrer-la-barre-de-navigation-dans-la-toolbar

[Invité]

Re,

Alors avant ceci:
Si tu as des soucis, donnes moi le template dans sa totalité .

Code:

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

Déposes ceci:

Code:

<script>
    $(function(){
var a=$('#fa_toolbar').css('backgroundColor');
$('#navigation').find('td').css('backgroundColor',a);
});
    </script>
<table id="navigation"cellspacing="0" cellpadding="0" border="0"style="width:100%;position:fixed;top:30px;">
                    <tr>
                        <td align="center">{GENERATED_NAV_BAR}</td>
                    </tr>
</table>

Puis dans ta feuille de style, supprimes ceci:

Code:

   table#navigation td{background-color:#666666;}

Ta barre prendra automatiquement la couleur de la Toolbar.




a++

[Rivendell.]

Alors, la toolbar disparaît totalement avec le script. Voici mon template et le css associé à la toolbar :

[Invité]

Hello Rivendell,

alors avec ton template,ta toolbar à cette hauteur 15px:

Code:


#fa_toolbar
{
height: 15px;
border-bottom: 2px solid;
padding-bottom: 5px;
z-index: 998!important;
}

pourquoi mettre un border-bottom: 2px solid sans épaisseur?

Code:


#fa_toolbar
{
height: 15px;
padding-bottom: 5px;
z-index: 998!important;
}

Ensuite un léger calcul te fera revenir dans le template afin de donner la bonne valeur à la table
contenant la barre de navigation:

La toolbar fait 15px de hauteur et à un padding-bottom de 5px soit 20px.

Donc la table ne doit plus être a 30px du haut:

Code:


<table id="navigation"cellspacing="0" cellpadding="0" border="0"style="width:100%;position:fixed;top:30px;">

Mais bel et bien à 20px:

Code:


<table id="navigation"cellspacing="0" cellpadding="0" border="0"style="width:100%;position:fixed;top:20px;">

Voilà, et tout cela sans script installé sur mon fofo de tests.
Pour ton soucis, désactives les un à un pour voir le responsable et plus particulièrement celui-ci qui ressort avec erreur dans la console:

http://lookhappier.forumactif.com/20523.js

Code:

$(function(){$.get($("#dernier_membre a[href^='/u']")[0].href,function(d){(a=$("#avatar_membre img",$(d))).length&&$("#avatar_dernier_membre").html(a)})});

a++

[Rivendell.]

Hello.

Je ne comprends pas pour la bordure, il y a une épaisseur .. La couleur du border est juste dans une autre partie du css.
Par contre si je mets un top de 20, la toolbar se met ici : https://i.imgur.com/7lEXbS3.png alors qu'avec un top:0 ben elle se met bien là où je voudrais.

Concernant le JS que dois-je faire ? Etant donné qu'il m'est utile pour le qui est en ligne. Tout ça me casse la tête, je pense que je vais finir par laisser le menu en-dessous du header.

[*Splash*]

Hi,

Concernant le JS que dois-je faire ? Etant donné qu'il m'est utile pour le qui est en ligne. Tout ça me casse la tête, je pense que je vais finir par laisser le menu en-dessous du header.

Pour l'instant il ta été demandé de le désactiver afin de vérifier s'il était la cause de ton problème

[Rivendell.]

Je l'ai fait et effectivement c'est bien ça, car j'ai le même soucis sur un autre forum .. Cependant sur encore un autre il n'y a pas ce soucis et pourtant le JS est également présent.

[*Splash*]

Dans ce cas tu peux tenter de réactiver ce script et de chercher si un autre js est problématique

[Invité]

Re,

il faut désactiver le script définitivement afin que je puisse voir ou se trouvent ces IDs:

Code:


#dernier_membre
#avatar_dernier_membre


De ce fait, je pourrai voir ce qui cloche aussi pour ta toolbar.

Je pensais avoir déposé le template dans sa totalité:

Remplaces tout le contenu par celui-ci:

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 rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Arapey:400,400i|Fresca|Playfair+Display:400,400i,700,700i,900,900i|Raleway:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i|Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/solid.css" integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/regular.css" integrity="sha384-IG162Tfx2WTn//TRUi9ahZHsz47lNKzYOp0b6Vv8qltVlPkub2yj9TVwzNck6GEF" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/brands.css" integrity="sha384-BKw0P+CQz9xmby+uplDwp82Py8x1xtYPK3ORn/ZSoe6Dk3ETP59WCDnX+fI1XCKK" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css" integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+" crossorigin="anonymous">
    <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_compat_meta -->
    <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
    <!-- END switch_compat_meta -->
    <!-- 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>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> 
    {RICH_SNIPPET_GOOGLE}

    <!-- BEGIN switch_fb_login -->
    <script src="https://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="{JQUERY_DIR}ticker/ticker.css" />
    <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
    <!-- END switch_ticker -->

    <!-- BEGIN switch_ticker_new -->
    <script src="{JQUERY_DIR}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>
    <!-- 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');
        if(pm != null) { 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}');
        if(report != null) { report.focus(); }
        <!-- END switch_report_popup -->
        <!-- BEGIN switch_ticker -->
        $(document).ready(function() {             
            Ticker.start({
                height : {switch_ticker.HEIGHT},
                spacing : {switch_ticker.SPACING},
                speed : {switch_ticker.SPEED},
                direction : '{switch_ticker.DIRECTION}',
                pause : {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 -->
    {HOSTING_JS}

    <!-- BEGIN google_analytics_code -->
    <script type="text/javascript">
        //<![CDATA[
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', '{G_ANALYTICS_ID}', 'auto');
    ga('send', 'pageview');
    ga('set', 'anonymizeIp', true);

    <!-- BEGIN google_analytics_code_bis -->
    ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
    ga('bis.send', 'pageview');
    ga('bis.set', 'anonymizeIp', true);
    <!-- END google_analytics_code_bis -->
    //]]>
    </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}">
    <!-- BEGIN hitskin_preview -->
    <div id="hitskin_preview" style="display: block;">
        <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
        <div class="content">
            <p>
                {hitskin_preview.L_THEME_SITE_PREVIEW}
                <br />
                <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{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" style="z-index: 10000 !important;">
        <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}
  <script>
    $(function(){
var a=$('#fa_toolbar').css('backgroundColor');
$('#navigation').find('td').css('backgroundColor',a);
});
    </script>
<table id="navigation"cellspacing="0" cellpadding="0" border="0"style="width:100%;position:fixed;top:20px;">
                    <tr>
                        <td align="center">{GENERATED_NAV_BAR}</td>
                    </tr>
</table>               

<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>
                        </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>
              <center>
                <div class="entup">
                <div style="width: 200px;display: inline-block;vertical-align:top;padding: 5px;margin-left: 0px;margin-top: 0;">
                  <div class="entour" style="height: 69px;overflow: auto;"><img src="https://i.imgur.com/V5T4Ezh.png" style="float:left;width:30px;padding-right: 8px;" /><i>temp. max</i> <strong style="font-size:10px;">12°</strong> | <i>temp. min</i> <strong style="font-size:10px;">2°</strong><br/><u>précipitations</u> entre 70 et 85%<br/><i class="fa fa-ship"></i> sortie en mer <strong style="font-size:9px;">autorisée</strong>.<hr/>Wexford garde actuellement un doux temps de <u>printemps</u>. Les <em>vents se lèvent</em> de temps à autre et l'air reste très <em>humide</em>.</div>
                  </div>
                <div class="cadre" style="width: 300px;">
                  <div class="entour" style="height: 64px;overflow: auto;"><div><strong style="font-size:9px;">light between oceans</strong> n'est autre qu'un forum rpg city simple et sans chichis. Le <u>but du forum</u> n'est autre que de se faire plaisir, faire de nouvelles rencontres, de se poser un peu <em>sans pression</em> ni <em>prise de tête</em>. Venez <u>comme vous êtes</u>, avec le personnage et l'avatar que vous souhaitez. Ce forum, on veut le construire et le développer avec <strong style="font-size:9px;">vous</strong>. Ici, vous êtes à la maison.</div></div>
                  </div>
                <div style="width: 200px;display: inline-block;vertical-align:top;padding: 5px;margin-left: 7px;margin-top: 0;">
                  <div class="entour">Retrouvez ci-dessous la liste de nos partenaires.<br/>
                    <select style="width: 205px;margin-top: 7px;text-transform:uppercase;" onchange="location = this.value">
  <option selected="selected">Nos partenaires</option>
  <option value="http://lookhappier.forumactif.com">toi ?</option>
  <option value="http://lookhappier.forumactif.com">toi ?</option>
</select>
                    <br/><center><img src="https://i.imgur.com/xtgCw5R.png" width="40%" style="margin-top: 7px;"/>
                      <br/>
                      <cit><a href="#">devenir partenaire</a> › <a href="#">nos partenaires</a></cit></center></div>
                  </div>
                </div>
              </center>
                <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 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 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 -->

a++

[Rivendell.]

Voilà, le script est désactivé. Le script concerne le qeel et l'avatar du dernier membre inscrit si jamais.

Et voici ce que ça fait avec le template modifié : https://i.imgur.com/CRiY0jP.png Mais à nouveau, quand je mets le top:0px + en laissant le script dans le template, le menu se met au-dessus de la toolbar. Désolée de vous ennuyer avec tout ça ..

[Invité]

Re,

Le script concerne le qeel et l'avatar du dernier membre inscrit si jamais.

Super , on ne voit rien, ton forum est en maintenance!!!!!!!!!!!!!!

ah, je n'avais pas saisi ta demande, tu veux avoir la toolbar en dessous de la barre de navigation.
Alors cela risque d'être un peu compliqué mais on va tâcher de trouver.

Il faut donc ajouter à cet ID:

Code:


#fa_toolbar


Un :

Code:

top: 19px !important;

A partir de là tu devrais obtenir satisfaction, ensuite il faudra régler l'affichage des notifications etc etc et c'est là que cela va se corser.

a++

[Rivendell.]

Ah oui désolée, voilà. Mais du coup, que faire pour le js ? Car j'en ai besoin ..

Et non, j'aimerais que la navigation soit DANS la toolbar comme dans ce sujet : https://forum.forumactif.com/t380910-integrer-la-barre-de-navigation-dans-la-toolbar Tout allait bien, sauf qu'une fois déconnecté, le fond disparaît. Mais je pense abandonner et laisser la barre de navigation en-dessous du header car ça m'a l'air compliqué.

[Invité]

Re,
le lien que tu mentionnes n'intégre pas la barre de navigation et plus un positionnement.
Donc oui, il vaut mieux laisser ainsi:
Toolbar puis en dessous la barre de navigation.

Mais du coup, que faire pour le js ? Car j'en ai besoin ..

Alors, j'ai fais pas mal de recherche pour te venir en aide, à ton tour de rechercher et me dire ou est placé ce code html:

Code:

#dernier_membre

Et une fois trouvé, me donner le template concerné.

a++


a++

[Rivendell.]

Merci quand même pour ton temps.

Ensuite voici les templates comprenant les éléments du JS :

index_body:

profile_view_body:

J'ai suivis ce tuto : https://forum.forumactif.com/t379011-avatar-du-dernier-membre-inscrit-dans-le-qui-est-en-ligne De plus, une amie utilise aussi ce tutoriel, mais elle n'a pas ce soucis elle.

[Invité]

Re,

remplaces le script par celui-ci:

Code:

$(function(){$('#dernier_membre').find(' a[href^="/u"]').each(function(){
var link=$(this).attr('href');$.get(link, function(data){
var a= $(data).find('#avatar_membre img').attr('src');
$('#avatar_dernier_membre').append('<img src="'+a+'"/>');})});});

a++

[Rivendell.]

C'est parfait, un tout tout grand merci pour ton aide.

[Invité]

Re ,
de rien et n'oublies pas de donner un maximum d'informations pour ta prochaine demande .

a++