Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Toolbar et barre de navigation au premier plan

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

Résolu Toolbar et barre de navigation au premier plan

Message par Juna Dim 24 Mai 2020 - 14:45

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour !

Voilà, je suis confrontée à un petit problème avec ma Toolbar et ma barre de navigation qui semble passer "derrière" certains éléments sur la PA.
fa_toolbar - Toolbar et barre de navigation au premier plan 131

Impossible pour moi de trouver la solution (et ce n'est pas faute d'avoir cherché). Puisque je ne suis pas très à l'aise avec le code dans le template, je me demande si ce n'est pas lié à ça.

Aussi, lorsque je suis dans une catégorie, le problème est résolu et la barre vient par-dessus tous les éléments. Cependant, ma toolbar bouge et du coup, le rendu est déformé :
fa_toolbar - Toolbar et barre de navigation au premier plan 224

Je souhaiterais évidemment que la toolbar ne se déforme pas.
J'ignore si les deux problèmes sont liés, par avance désolée si ce n'est pas le cas.

En vous remerciant pour vos réponses =D

Voici le 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} {NAMESPACE_BBCODE}>
<head>
    <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 switch_user_logged_in -->
                   <div class="img_pa"></div>
                   <!-- END switch_user_logged_in -->
<script type="text/javascript">$(function(){$('.img_pa').html(_userdata.avatar);});</script>
  
<!--============== R-max ========================-->
  <table id="nav_bar_1" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
          
                  <td align="{MENU_POSITION}">{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
  <!--============== fin R-max =========================-->
  
  <!-- 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}

    <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>

                
                <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 -->

Et la partie CSS :
Code:
*********** Début de la TOOLBAR **********/
 
/* les trucs moches à cacher */

   div#fa_search {display:none!important;} /* supprimer la barre de recherche */
        span#fa_share {display:none!important;} /* supprimer les liens réseaux sociaux */
   #fa_left {display:none!important;} /* supprimer le lien FA */
   #fa_hide {display:none!important;} /* supprimer la flèche pour cacher la barre */
   a#fa_hide {display: none!important;}
 
/* FOND TOOLBAR */
#fa_toolbar {
    padding-top: 0px !important;
    border-bottom: 3px solid #fff;
    background: black !important;
    color: #000;
}
 
 
#fa_right {
    float: left !important;
    text-transform: uppercase;
    font-size: 11px !important;
    font-family: Times;
    color: white;
    font-weight: bold;
    margin-top: 6px;
    margin-left: 150px;
}
 
a#fa_notifications.rightHeaderLink {
    text-transform: uppercase;
    font-size: 11px;
    font-family: Times;
    color: white !important;
    font-weight: bold;
}
 
#fa_right #fa_notifications, #fa_welcome {
    line-height: 22px !important;
}
 
ul#notif_list {
    margin-top: 3px !important;
    margin-left: 83px !important;
    background-color: red;
    border: none !important;
}
 
#fa_toolbar #fa_right #notif_list li .contentText :link {
    text-decoration: none !important;
    color: black !important;
}
 
#fa_toolbar #fa_right #notif_list li {
    color: white;
    display: block;
    font-size: 1em;
    line-height: 1.2em;
    margin: 0;
    padding: 0 .5em .5em;
    padding-top: 0px;
}
 
#fa_toolbar #fa_right #notif_list li .contentText a {
 
    color: black !important;
    text-decoration: underline !important;
    vertical-align: baseline;
 
}
 
#fa_toolbar #live_notif .fa_notification {
    background-color: black !important;
    border-radius: 3px;
    opacity: .8;
    padding: 10px;
    color: #666666 !important;
}
 
li.unread {
    background-color: red !important;
}
 
li.see_all {
    background-color: black !important;
}
 
li.see_all a {
    font-weight: bold !important;
    text-align: center !important;
}
 
 
/* MENU TOOLBAR */
 
ul#fa_menulist {
    z-index: 3 !important;
    margin-top: 3px !important;
    border: none !important;
    background: black; /* MODIFIABLE */
    font-size: 11px !important;
}
 
/* LIENS MENU TOOLBAR */
#fa_menulist a:link, #fa_menulist a:visited {
    color: white !important; /* MODIFIABLE */
}
 
span#fa_share {display:none!important;}
div#fa_search {display:none!important;}
#fa_toolbar { position:absolute; top:0; z-index:0; padding:10px 0; }
#fa_right { float:left; margin-left:110px; }
#fa_left { float:right; margin-right:30px; }
#nav_bar_1 {position:fixed; z-index:999; top:1px; padding:10px; width:65%; left:35%; }
ul#fa_menulist { padding-bottom:35px; font-family:arial; }
 
/* BORDURE AVATAR */
.img_pa
{
 
z-index:5;
position:fixed;
 left:45px;
 top:15px;
width:75px;
height:75px;
border-radius:40px;
overflow:hidden;
border:4px solid;
border-color:black;
}
 
/* IMAGE AVATAR */
.img_pa img
{
  width:68px;
  margin-top: -20px;
}

/*********** Fin de la TOOLBAR **********/

/*********** Début BARRE DE NAVIGUATION MENU **********/
.mainmenu{
  font-size: 9px!important;
  font-weight: lighter;
  background-color:transparent!important;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  text-transform:uppercase;
  line-height:-20px;
  letter-spacing: 1px;
  color:var(--coul_navital) !important;
  text-shadow: 2px 2px 2px #XXXX;
  z-index:999!important;
}
.mainmenu:hover {
color: var(--coul_hover) !important;
text-shadow: 2px 2px 2px #XXXX;
}
  
  /* NAVBAR EN HAUT */

#nav_barr {
position: fixed; /*--- position de la barre ---*/
    top: 2px!important; /* pour garder la barre au bon niveau en hauteur */
    right:0px;
height:26px!important; /*--- pour régler la hauteur de la barre */
background-color: transparent!important; /*--- On donne une couleur au fond ---*/
border:0px #000 solid!important;  /*--- On ajoute une bordure (ou pas) ---*/
  padding-top:0px!important; /* pour laisser de la marge en haut entre le cadre et les liens de la navbar */
  padding-bottom:6px!important; /* pour laisser de la marge en bas entre le cadre et les liens de la navbar */
  margin-right:0px!important;
z-index: 999!important; /* pour qu'elle reste "au-dessus" du reste du forum */}
  
  #nav_barr table{align:right!important;}
 
div#search_menu {position:absolute!important; top:33px!important; left:70px!important;width:320px!important;}
  #search_menu table{width:320px!important;}

a.mainmenu:link, a.mainmenu:visited{color:#FCFCFC!important;}
a.mainmenu:hover, a.mainmenu:active{color:var(--coul_hover)!important;}

/* Supprimer images de la barre de naviguation */
a.mainmenu img {display:none;}
a.mainmenu{padding-left: 1px; padding-right: 1px;}
.mainmenu img{ /* pour effacer la place des images à côté des liens accueil faq rechercher etc. */
display:none;}

 
 /* Couleur de la ligne en bas de la PA et des catégories */
  
  /*.couleurbaspa{width:800px;
    height:1px;
    background-color:silver; /* la couleur qu'on veut */
    /*box-shadow: 1px 1px 8px #454545;}*/
  
  .couleurbascat{width:790px;
    height:5px;
    background-color:silver; /* la couleur qu'on veut */ }
/*********** Fin BARRE DE NAVIGUATION MENU **********/


Dernière édition par Juna le Mar 26 Mai 2020 - 9:06, édité 1 fois
Juna

Juna
**

Féminin
Messages : 88
Inscrit(e) le : 06/05/2006

Voir le profil de l'utilisateur https://testrynn.forumactif.com/
Juna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par mSyx Dim 24 Mai 2020 - 21:23

Hello o/
Dans ton CSS, remplacer:
Code:
#fa_toolbar {
    padding-top: 0px !important;
    border-bottom: 3px solid #fff;
    background: black !important;
    color: #000;
}

Par:
Code:
#fa_toolbar {
    padding-top: 0px !important;
    border-bottom: 3px solid #fff;
    background: black !important;
    color: #000;
    z-index: 998;
    box-sizing: border-box;
}

Ça devrait régler les deux problèmes ^^

Sinon:
#fa_left {display:none!important;} /* supprimer le lien FA */
https://forum.forumactif.com/t236237-les-mentions-obligatoires-copyright-de-forumactif
mSyx

mSyx
****

Masculin
Messages : 386
Inscrit(e) le : 22/09/2012

Voir le profil de l'utilisateur https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par Juna Dim 24 Mai 2020 - 21:41

Bonjour,
merci pour la rapide réponse !

Alors, la barre ne se redimensionne plus quand je suis dans les catégories et non plus sur la PA, c'est déjà une bonne chose, merci beaucoup !
En revanche, l'avatar bouge encore, et les liens des menus descendent quand je passe de la PA à une catégorie Neutral

Aussi, la barre se confond toujours avec les autres éléments de la PA Visage pleurant

Pour le lien FA, merci de me l'avoir signalé, on m'a donné une base de code et je travaille encore dessus. J'ai modifié ça (faut que je fasse joli maintenant xD)

Merci par avance pour mes problèmes qui persistent I love you
Juna

Juna
**

Féminin
Messages : 88
Inscrit(e) le : 06/05/2006

Voir le profil de l'utilisateur https://testrynn.forumactif.com/
Juna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par mSyx Dim 24 Mai 2020 - 22:18

Re o/
Le changement du z-index de #fa_toolbar ne semble pas avoir bougé :/ Peut-être que FA l'en empêche ou qu'une option des CSS en est responsable ^^ On va réessayer:


On va déjà essayer de transformer ton #nav_bar_1 en div au lieu de la laisser en table, au cas où :>

Dans le template overall_header, trouver:
Code:
<!--============== R-max ========================-->
  <table id="nav_bar_1" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
          
                  <td align="{MENU_POSITION}">{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
  <!--============== fin R-max =========================-->

Remplacer par:
Code:
<!--============== R-max ========================-->
<div id="nav_bar_1"><div>{GENERATED_NAV_BAR}</div></div>
<!--============== fin R-max =========================-->


Dans ton CSS:

Remplacer le code du #nav_bar_1 par:
Code:
#nav_bar_1 {
    right: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: auto;
    z-index: 1007 !important;
    display: block;
}

Remplacer le code du #fa_toolbar par:
Code:
#fa_toolbar {
    padding-top: 0px !important;
    border-bottom: 3px solid #fff;
    background: black !important;
    color: #000;
    z-index: 1005 !important;
    box-sizing: border-box;
}

Si tu veux aligner la droite de la toolbar avec la navigation, remplacer le code du #fa_right par:
Code:
#fa_right {
    float: left !important;
    text-transform: uppercase;
    font-size: 11px !important;
    font-family: Times;
    color: white;
    font-weight: bold;
    margin-top: 4px;
    margin-left: 150px;
}
mSyx

mSyx
****

Masculin
Messages : 386
Inscrit(e) le : 22/09/2012

Voir le profil de l'utilisateur https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par Juna Dim 24 Mai 2020 - 22:51

Re coucou <o/

Merci beaucoup ! =D
La barre est maintenant par-dessus tous les éléments youhou !
Vous êtes mon héros huhu

Maintenant il reste l'alignement du menu qui bouge dans les catégories,et l'avatar qui bouge aussi. Hein
Voilà en image :
Sur la PA :
fa_toolbar - Toolbar et barre de navigation au premier plan Pa10

Et dans une catégorie :
fa_toolbar - Toolbar et barre de navigation au premier plan Cate10

Merci par avance ::pourtoi::
Juna

Juna
**

Féminin
Messages : 88
Inscrit(e) le : 06/05/2006

Voir le profil de l'utilisateur https://testrynn.forumactif.com/
Juna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par mSyx Dim 24 Mai 2020 - 23:39

Re,
On avance ! :b

Alors, j'ai continué à regarder et j'ai déjà remarqué que l'alignement central du forum (.bodylinewidth) diffère selon la page (en l'occurrence; l'index et l'affichage d'un sous-forum par ex.). J'ai pu voir qu'il y avait du CSS dans un template utilisé sur l'index.

Il faudrait donc déjà retirer ou déplacer ce CSS, qui doit probablement se trouver dans le template index_box ou(/et) index_body pour peut-être régler ces différences.
mSyx

mSyx
****

Masculin
Messages : 386
Inscrit(e) le : 22/09/2012

Voir le profil de l'utilisateur https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par Juna Lun 25 Mai 2020 - 9:00

Hello !

Oui on avance c'est super =p

Alors, déjà, merci pour ta réponse ! Je suis allée voir les templates cités et je n'ai pas trouvé de code CSS.
En revanche, j'ai essayé un truc : j'ai retiré le message de ma PA et là ho miracle, le problème a disparu.
Du coup, j'imagine que ça vient du code du message de PA, que je te partage ici. Quelque chose doit déformer l'ensemble, reste à trouver quoi  scratch
Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <meta charset="utf-8" /><link href="https://fonts.googleapis.com/css?family=Anton|Pontano+Sans&display=swap" rel="stylesheet" />  
<div class="tableau">
                                                            
 <div class="bloc-contexte">
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                                
 </div>
                                                            
 <div class="etoiles">
                                 <a href="#"><img src="https://zupimages.net/up/19/30/l782.png" class="top-site" /></a>  <a href="#"><img src="https://zupimages.net/up/19/30/rxq9.png" class="top-site" /></a>  <a href="#"><img src="https://zupimages.net/up/19/30/l782.png" class="top-site" /></a>  <a href="#"><img src="https://zupimages.net/up/19/30/rxq9.png" class="top-site" /></a> <a href="#"><img src="https://zupimages.net/up/19/30/l782.png" class="top-site" /></a>                              
 </div>
                                                              
 <div class="flex">
                                                              
 <div class="liens">
                                                              
 <div class="bloc-lien1">
                             <a href="lien">Règlement</a>                            
 </div>
                                                              
 <div class="bloc-lien1">
                             <a href="lien">Contexte</a>                            
 </div>
                                                              
 <div class="bloc-lien1">
                             <a href="lien">Groupes</a>                            
 </div>
                                                              
 <div class="bloc-lien1">
                             <a href="lien">Evenement</a>                            
 </div>
                                                              
 </div>
                                                                  
 <div class="liens2">
                                                              
 <div class="bloc-lien1">
                             <a href="lien">Publicité</a>                            
 </div>
                                                              
 <div class="bloc-lien1">
                             <a href="lien">Invité</a>                            
 </div>
                                                              
 <div class="bloc-lien1">
                             <a href="lien">Evenement</a>                            
 </div>
                                                              
 <div class="bloc-lien1">
                             <a href="lien">Evenement</a>                            
 </div>
                                                              
 </div>
                                                              
 </div>
                                                                
 <div class="carousel-item">
                               <img src="..." alt="..." />                              
 <div class="carousel-caption d-none d-md-block">
                                                              
 <h5>
                             ...                            
 </h5>
                                                              
 <p>
                             ...                            
 </p>
                                                            
 </div>
                                                        
 </div>
                                                                
 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                                                            
 <div class="carousel-inner">
                                                              
 <div class="carousel-item active">
                                   <img class="d-block w-100" src="https://zupimages.net/up/19/30/u0jm.png" alt="First slide" />                                    
 <div class="carousel-caption d-none d-md-block">
                                                              
 <h5>
                             Splash Dream                            
 </h5>
                                                                
 <p class="title">
                              Watashi wa anata o mamoru                            
 </p>
                                                            
 </div>
                                                                      
 </div>
                                                              
 <div class="carousel-item">
                                   <img class="d-block w-100" src="https://zupimages.net/up/19/30/u0jm.png" alt="Second slide" />                                            
 <div class="carousel-caption d-none d-md-block">
                                                              
 <h5>
                             Ever green                            
 </h5>
                                                                
 <p class="title">
                              Watashi wa anata o mamoru                            
 </p>
                                                            
 </div>
                                                                      
 </div>
                                                              
 <div class="carousel-item">
                                   <img class="d-block w-100" src="https://zupimages.net/up/19/30/u0jm.png" alt="Third slide" />                                            
 <div class="carousel-caption d-none d-md-block">
                                                              
 <h5>
                             Lunamaria                            
 </h5>
                                                              
 <p class="title">
                              Watashi wa anata o mamoru                            
 </p>
                                                            
 </div>
                                                                      
 </div>
                                                            
 </div>
                               <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">    <span class="carousel-control-prev-icon" aria-hidden="true"></span>    <span class="sr-only">Previous</span>  </a>  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">    <span class="carousel-control-next-icon" aria-hidden="true"></span>    <span class="sr-only">Next</span>  </a>                            
 </div>
                                                                              
 <div class="predef">
                                       <a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a>                                          
 </div>
                                                                              
 <div class="bloc4">
                                                                              
 <div class="nouveaute">
                             <span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                              
 </div>
                                                                                  
 <div class="nouveaute">
                             <span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                              
 </div>
                                                                                  
 <div class="nouveaute">
                             <span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                              
 </div>
                                                                                  
 <div class="nouveaute">
                             <span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.                              
 </div>
                                                                  
 </div>
                                
 <div class="discord">
                              <a href="#"><img src="https://zupimages.net/up/19/39/6llh.png" /></a>            
 </div>
                                              
 <p class="credit">
                             :copyright: made by champi                            
 </p>
                              <style type="text/css">
 
  .credit {
  position:relative;
  bottom:440px;
  left:10px;
  font-size:9px;
  opacity:0.2;
  }
 
  .discord {
  position:relative;
  bottom:450px;
  left:258px
  }
 
  .date {
  padding:1px;
  font-size:10px;
  font-weight:bold;
  border: 1px solid #dadada;

  }
  .nouveaute {
  margin-top:6px;
  margin-left:10px;
  font-size:10px;
  text-align:justify;
  font-size:9px;
  color:#a7a7a7;
  letter-spacing:-0.1em;
 
  }
 
  .bloc4 {
  overflow:auto;
  background-color:white;
  border: 3px solid #e5e5e5;
  width:163px;
  height:150px;
  position:relative;
  bottom:460px;
  left:258px;
}

  .tableau {
  height: 250px;
  width: 750px;
  border: 1px solid #f3f3f3;box-sizing: border-box;padding: 5px;background: #f3f3f3;
  }
 
  .bloc-contexte {
  width:240px;
  height:100px;
  overflow:auto;
  font-size:9px;
  color:#a7a7a7;
  text-align:justify;
  border: 3px solid #e5e5e5;
  box-sizing: border-box;
  padding: 5px;
  margin-left: -450px;
  background: #ffffff;
  font-family: 'Pontano Sans', sans-serif;
  }

  ::-webkit-scrollbar-thumb {
    background: #e9e9e9;
    border: 2px solid #fff;
}
  ::-webkit-scrollbar-track {
    background: #fff;
    border: 0 none #fff;
}
 
  ::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
  .etoiles {
  margin-top:5px;
  width:240px;
  text-align:center;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
  padding: 5px;
  margin-left: -450px;
  background: #f9f9f9;
  }
 
.top-site {
  width:15px;
  height:15px;
  margin-top:-7px;
  margin-right:5px;
  }
 
  .liens a {
  text-decoration:none;
  font-size:9px;
  color:white;
  margin:0 auto;
  }
  .liens {
  margin-left:-225px;
  }
 
  .bloc-lien1 {
  background-color:#e0e0e0;
  width:118px;
  margin-bottom:2px;
  margin-right:2px;
  text-align:center;
  font-family: 'Pontano Sans', sans-serif;
  border: 1px solid #dadada;box-sizing: border-box;padding: -5px;
  }
 
  .liens2 a {
  text-decoration:none;
  font-size:9px;
  color:white;
  }

  .lien {
  display:flex;
  flex-direction:column;
  }
 
  .flex {
  display:flex;
  margin-top:7px;
  width:240px;
 }
 
  #carouselExampleControls {
  width:254px;
  height:146px;
  position:relative;
  bottom:215px;
  left:250px;
 
  }
  .carousel-inner{
  border: 3px solid #e5e5e5;
  margin-left: -430px;
  margin-top: 9px;
  }
 
  h5 {

  color:white;
  text-shadow:0px 0px 1px black;
 font-family: 'Anton', sans-serif;
  text-transform:uppercase;
  font-weight:bold;
  font-size:20px;
  letter-spacing: .1rem;

  }
 
  .title {
  color:white;
  text-shadow:0px 0px 1px black;
  font-family: 'Anton', sans-serif;
  font-size:11px;
  letter-spacing: .1rem;

  }
  .icon {
    background-color:white;
    box-shadow: 0px 0px 0px 1px rgba(153, 155, 155, 0.2);
    margin-bottom:6px;
    width:26px;
    height:26px;
    padding:2px;
  margin-left:6px;
}
 
  .predef {
  width:258px;
  height:100px;
  position:relative;
  bottom:205px;
  left:32px;
  }

  .carousel-control-prev-icon {
  margin-left: -430px;
  }

  .carousel-control-next-icon {
  margin-left: -425px;
  }

</style>
</div>

Sachant que j'ai déjà un peu retravaillé le code de base, sinon tout était décalé comme ceci :
fa_toolbar - Toolbar et barre de navigation au premier plan Screen25

Voici le code de base :
Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Anton|Pontano+Sans&display=swap" rel="stylesheet">
  <div class="tableau">
  <div class="bloc-contexte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="etoiles">
    <a href="#"><img src="https://zupimages.net/up/19/30/l782.png" class="top-site"/></a>  <a href="#"><img src="https://zupimages.net/up/19/30/rxq9.png" class="top-site"/></a>  <a href="#"><img src="https://zupimages.net/up/19/30/l782.png" class="top-site"/></a>  <a href="#"><img src="https://zupimages.net/up/19/30/rxq9.png" class="top-site"/></a> <a href="#"><img src="https://zupimages.net/up/19/30/l782.png" class="top-site"/></a>
  </div>
 
  <div class="flex">
    <div class="liens">

    <div class="bloc-lien1"><a href="lien">Règlement</a></div>
    <div class="bloc-lien1"><a href="lien">Contexte</a></div>
    <div class="bloc-lien1"><a href="lien">Groupes</a></div>
    <div class="bloc-lien1"><a href="lien">Evenement</a></div>
    </div>
  
    <div class="liens2">
    <div class="bloc-lien1"><a href="lien">Publicité</a></div>
    <div class="bloc-lien1"><a href="lien">Invité</a></div>
    <div class="bloc-lien1"><a href="lien">Evenement</a></div>
    <div class="bloc-lien1"><a href="lien">Evenement</a></div>
    </div>
  
 </div>
  
  <div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>
 
 
  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://zupimages.net/up/19/30/u0jm.png" alt="First slide">
        <div class="carousel-caption d-none d-md-block">
    <h5>Splash Dream</h5>
      <p class="title"> Watashi wa anata o mamoru</p>
  </div>
      
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://zupimages.net/up/19/30/u0jm.png" alt="Second slide">
      
        <div class="carousel-caption d-none d-md-block">
    <h5>Ever green</h5>
      <p class="title"> Watashi wa anata o mamoru</p>
  </div>
      
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://zupimages.net/up/19/30/u0jm.png" alt="Third slide">
      
        <div class="carousel-caption d-none d-md-block">
    <h5>Lunamaria</h5>
    <p class="title"> Watashi wa anata o mamoru</p>
  </div>
      
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
    

    
        <div class="predef">
          <a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon"/></a>
      
      </div>
      
            <div class="bloc3">
                     <div class="nouveaute"><span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
                        <div class="nouveaute"><span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
                        <div class="nouveaute"><span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
                        <div class="nouveaute"><span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
        </div>
        <a href="#"><img src="https://zupimages.net/up/19/39/6llh.png" class="discord"/></a>
          <p class="credit">:copyright: made by champi</p>

<style type="text/css">
 
  .credit {
  position:relative;
  bottom:440px;
  left:330px;
  font-size:9px;
  opacity:0.2;
  }
 
  .discord {
  position:relative;
  bottom:450px;
  left:516px;
  }
 
  .date {
  padding:1px;
  font-size:10px;
  font-weight:bold;
  border: 1px solid #dadada;

  }
  .nouveaute {
  margin-top:6px;
  margin-left:10px;
  font-size:10px;
  text-align:justify;
  font-size:9px;
  color:#a7a7a7;
  letter-spacing:-0.1em;
 
  }
 
  .bloc3 {
  overflow:auto;
  background-color:white;
  border: 3px solid #e5e5e5;
  width:163px;
  height:150px;
  position:relative;
  bottom:460px;
  left:516px;
}

  .tableau {
  height: 250px;
  width: 700px;
  border: 1px solid #dadada;box-sizing: border-box;padding: 5px;background: #f3f3f3;
  }
 
  .bloc-contexte {
  width:240px;
  height:100px;
  overflow:auto;
  font-size:9px;
  color:#a7a7a7;
  text-align:justify;
  border: 3px solid #e5e5e5;box-sizing: border-box;padding: 5px;background: #ffffff;
  font-family: 'Pontano Sans', sans-serif;
  }

  ::-webkit-scrollbar-thumb {
    background: #e9e9e9;
    border: 2px solid #fff;
    border-radius: 0;
}
  ::-webkit-scrollbar-track {
    background: #fff;
    border: 0 none #fff;
    border-radius: 0;
}
 
  ::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0;
}
::-webkit-scrollbar-corner {
    background: transparent;
}
  .etoiles {
  margin-top:5px;
  width:240px;
  text-align:center;
  border: 1px solid #e5e5e5;box-sizing: border-box;padding: 5px;background: #f9f9f9;
  }
 
.top-site {
  width:15px;
  height:15px;
  margin-top:-7px;
  margin-right:5px;
  }
 
  .liens a {
  text-decoration:none;
  font-size:9px;
  color:white;
    margin:0 auto;
  }
  .liens {
  margin-left:2px;
  }
 
  .bloc-lien1 {
  background-color:#e0e0e0;
  width:118px;
  margin-bottom:2px;
  margin-right:2px;
  text-align:center;
  font-family: 'Pontano Sans', sans-serif;
  border: 1px solid #dadada;box-sizing: border-box;padding: -5px;
  }
 
  .liens2 a {
  text-decoration:none;
  font-size:9px;
  color:white;
  }

  .lien {
  display:flex;
  flex-direction:column;
  }
 
  .flex {
  display:flex;
  margin-top:7px;
  width:240px;
 }
 
  #carouselExampleControls {
  width:254px;
  height:146px;
  position:relative;
  bottom:215px;
  left:250px;
 
  }
  .carousel-inner{
  border: 3px solid #e5e5e5;
  }
 
  h5 {

  color:white;
  text-shadow:0px 0px 1px black;
 font-family: 'Anton', sans-serif;
  text-transform:uppercase;
  font-weight:bold;
  font-size:20px;
  letter-spacing: .1rem;

  }
 
  .title {
  color:white;
  text-shadow:0px 0px 1px black;
  font-family: 'Anton', sans-serif;
  font-size:11px;
  letter-spacing: .1rem;

  }
  .icon {
    background-color:white;
    box-shadow: 0px 0px 0px 1px rgba(153, 155, 155, 0.2);
    margin-bottom:6px;
    width:26px;
    height:26px;
    padding:2px;
  margin-left:6px;
}
 
  .predef {
  width:258px;
  height:100px;
  position:relative;
  bottom:205px;
  left:247px;
  }
  
</style>

Bon au pire je peux changer de PA tout court mais elle était bien celle-là Mouais

Merci par avance, je fouille encore de mon côté =D

EDIT :
Après avoir fait des tests, ce sont les premières lignes de code qui m'ennuient, à savoir :
Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <meta charset="utf-8" /><link href="https://fonts.googleapis.com/css?family=Anton|Pontano+Sans&display=swap" rel="stylesheet" />

Et surtout cette petite chose :
Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />

Le hic est que si je le retire, le carousel se déploie sur le forum, comme ceci :
fa_toolbar - Toolbar et barre de navigation au premier plan Screen26

Et là j'avoue que ça dépasse un peu mes compétences Mouais

Par avance merci ! Flowers2
Juna

Juna
**

Féminin
Messages : 88
Inscrit(e) le : 06/05/2006

Voir le profil de l'utilisateur https://testrynn.forumactif.com/
Juna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par mSyx Lun 25 Mai 2020 - 9:45

Peut-être que Bootstrap a une influence sur certains éléments, vu qu'il n'est visiblement chargé que sur l'index Question
(d'ailleurs, il est chargé deux fois le Bootstrap :b - et.. je vois pas trop son utilité dans le code, donc si c'est une des causes du problème, c'est pas trop grave si tu t'en débarrasses; même si ça peut nécessiter de refaire un peu le code ^^)

Il y a pourtant bien du CSS qui est chargé directement dans un template. Pour n'en citer qu'un petit bout:
Code:
<style type="text/css">
 
  .credit {
  position:relative;
  bottom:440px;
  left:10px;
  font-size:9px;
  opacity:0.2;
  }
 
  .discord {
  position:relative;
  bottom:450px;
  left:258px
  }

Vérifie peut-être dans les templates overall_footer_x ?
mSyx

mSyx
****

Masculin
Messages : 386
Inscrit(e) le : 22/09/2012

Voir le profil de l'utilisateur https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par Juna Lun 25 Mai 2020 - 11:50

Coucou !

Alors le code que tu vois et que tu pensais être dans un template était en fait dans le code de la PA dans "message d'accueil".
Bref, ce code m'a littéralement rendue neuneu du coup j'en ai changé et ça a réglé presque tous mes soucis. Presque Mr. Green

Quand je déploie à présent ma toolbar en cliquant sur "bienvenue", le petit cercle qui contient l'avatar reste devant.
Ensuite, l'avatar du fond lui est tout ratatiné.
Voilà en image les deux derniers détails :
fa_toolbar - Toolbar et barre de navigation au premier plan Notif10

Pour le grand avant, avec F12, j'ai trouvé cette ligne de code :
Code:
#fa_usermenu img {
    max-height: 120px;
    max-width: 120px;
    width: 120px;
Mais je ne sais pas où elle se trouve, il n'y a rien dans mon CSS, et quand je l'ajoute manuellement, ça ne change rien scratch

Concernant le petit cercle, j'ai changé l'alignement du z-index mais ça ne change rien non plus scratch

Merci par avance, après ça normalement, j'ai fini de t'embêter Mr. Green
Juna

Juna
**

Féminin
Messages : 88
Inscrit(e) le : 06/05/2006

Voir le profil de l'utilisateur https://testrynn.forumactif.com/
Juna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par mSyx Lun 25 Mai 2020 - 18:37

Oy o/
Ah, la Toolbar reste maintenant identique peu importe la page ! :>

Le problème de l'avatar "du fond" a visiblement été réglé aussi Smile

Pour ce dernier problème, je suis pas sûr d'avoir compris:
@Juna a écrit:Concernant le petit cercle, j'ai changé l'alignement du z-index mais ça ne change rien non plus  scratch

(je me suis crée un compte avec ton avatar pour voir ça de plus près :b)
mSyx

mSyx
****

Masculin
Messages : 386
Inscrit(e) le : 22/09/2012

Voir le profil de l'utilisateur https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par Juna Lun 25 Mai 2020 - 19:02

Coucou =D

Pardon, je me suis sûrement mal exprimée, j'ai essayé de mettre ça en image (je dessine super bien les bonhommes bâtons)
fa_toolbar - Toolbar et barre de navigation au premier plan Notif110
Je souhaiterai, que quand on déploie la barre quand on clique sur "bienvenue", le cercle et l'avatar à l'intérieur passe derrière la bande qu'on déploie.
De plus, dans cette bande déployée, l'avatar est tout ratatiné, je souhaiterai corriger ça si possible

Ho, ma célébrité favorite capturée par quelqu'un d'autre ! ça fait bizarre Lunette

Par avance merci de ton aide ! king
Juna

Juna
**

Féminin
Messages : 88
Inscrit(e) le : 06/05/2006

Voir le profil de l'utilisateur https://testrynn.forumactif.com/
Juna a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par mSyx Lun 25 Mai 2020 - 23:01

Re c:
AH, oui. J'ai même pas fait gaffe qu'il y avait ce hic x_x

@Juna a écrit:De plus, dans cette bande déployée, l'avatar est tout ratatiné, je souhaiterai corriger ça si possible

Ça s'affiche correctement de mon côté pourtant o.o
Pour l'avatar écrasé:

Code:
#fa_menu #fa_usermenu > img {
    max-width: 200px !important;
    max-height: 320px !important;
}

Pour que l'avatar ne prenne pas le dessus, je pense + à du JS vu que le z-index ne fait aucun effet :b
Ajoute ce JS; soit dans le overall_header, soit dans une nouvelle page JS:

Code:
('#fa-menu').click(function() {   
  $('.img_pa').toggleClass('fa-img-hide');
});

Puis dans CSS, ajouter:

Code:
.fa-img-hide {
display: none;}
mSyx

mSyx
****

Masculin
Messages : 386
Inscrit(e) le : 22/09/2012

Voir le profil de l'utilisateur https://forum.forumactif.com/
mSyx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Toolbar et barre de navigation au premier plan

Message par Juna Mar 26 Mai 2020 - 9:05

Hello !

Merci beaucoup pour l'avatar ratatiné, maintenant c'est tout bon !

En revanche pour le cadre rond, toujours pas, alors que j'ai essayé dans le template et en JS. Mais pas de problème, j'ai trouvé une solution alternative en décalant légèrement le menu, maintenant ça me plait bounce

Merci infiniment pour ton aide, et désolée du temps que ça a pris Bizz
Le problème est donc résolu Hero
Juna

Juna
**

Féminin
Messages : 88
Inscrit(e) le : 06/05/2006

Voir le profil de l'utilisateur https://testrynn.forumactif.com/
Juna 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