Accueil
Créer un forumToolbar et barre de navigation au premier plan
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Toolbar et barre de navigation au premier plan
par Juna Dim 24 Mai 2020 - 14:45
Détails techniques
Version du forum : phpBB2Poste 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.
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é :
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 /> </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- **
-
Messages : 88
Inscrit(e) le : 06/05/2006 
Re: Toolbar et barre de navigation au premier plan
par mSyx Dim 24 Mai 2020 - 21:23
Hello o/
Dans ton CSS, remplacer:
Par:
Ça devrait régler les deux problèmes ^^
Sinon:
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:
https://forum.forumactif.com/t236237-les-mentions-obligatoires-copyright-de-forumactif#fa_left {display:none!important;} /* supprimer le lien FA */
mSyx- ****
-
Messages : 386
Inscrit(e) le : 22/09/2012 -
Re: Toolbar et barre de navigation au premier plan
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
Aussi, la barre se confond toujours avec les autres éléments de la PA
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
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
Aussi, la barre se confond toujours avec les autres éléments de la PA
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
Juna- **
-
Messages : 88
Inscrit(e) le : 06/05/2006 -
Re: Toolbar et barre de navigation au premier plan
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:
Remplacer par:
Dans ton CSS:
Remplacer le code du #nav_bar_1 par:
Remplacer le code du #fa_toolbar par:
Si tu veux aligner la droite de la toolbar avec la navigation, remplacer le code du #fa_right par:
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- ****
-
Messages : 386
Inscrit(e) le : 22/09/2012 -
Re: Toolbar et barre de navigation au premier plan
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.
Voilà en image :
Sur la PA :
Et dans une catégorie :
Merci par avance
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.
Voilà en image :
Sur la PA :
Et dans une catégorie :
Merci par avance
Juna- **
-
Messages : 88
Inscrit(e) le : 06/05/2006 -
Re: Toolbar et barre de navigation au premier plan
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.
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- ****
-
Messages : 386
Inscrit(e) le : 22/09/2012 -
Re: Toolbar et barre de navigation au premier plan
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
Sachant que j'ai déjà un peu retravaillé le code de base, sinon tout était décalé comme ceci :
Voici le code de base :
Bon au pire je peux changer de PA tout court mais elle était bien celle-là
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 :
Et surtout cette petite chose :
Le hic est que si je le retire, le carousel se déploie sur le forum, comme ceci :
Et là j'avoue que ça dépasse un peu mes compétences
Par avance merci !
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
- 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 :
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à
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 :
Et là j'avoue que ça dépasse un peu mes compétences
Par avance merci !
Juna- **
-
Messages : 88
Inscrit(e) le : 06/05/2006 -
Re: Toolbar et barre de navigation au premier plan
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 
(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:
Vérifie peut-être dans les templates overall_footer_x ?
(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- ****
-
Messages : 386
Inscrit(e) le : 22/09/2012 -
Re: Toolbar et barre de navigation au premier plan
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
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 :
Pour le grand avant, avec F12, j'ai trouvé cette ligne de code :
Concernant le petit cercle, j'ai changé l'alignement du z-index mais ça ne change rien non plus
Merci par avance, après ça normalement, j'ai fini de t'embêter
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
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 :
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;
Concernant le petit cercle, j'ai changé l'alignement du z-index mais ça ne change rien non plus
Merci par avance, après ça normalement, j'ai fini de t'embêter
Juna- **
-
Messages : 88
Inscrit(e) le : 06/05/2006 -
Re: Toolbar et barre de navigation au premier plan
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
Pour ce dernier problème, je suis pas sûr d'avoir compris:
(je me suis crée un compte avec ton avatar pour voir ça de plus près :b)
Ah, la Toolbar reste maintenant identique peu importe la page ! :>
Le problème de l'avatar "du fond" a visiblement été réglé aussi
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
(je me suis crée un compte avec ton avatar pour voir ça de plus près :b)
mSyx- ****
-
Messages : 386
Inscrit(e) le : 22/09/2012 -
Re: Toolbar et barre de navigation au premier plan
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)
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
Par avance merci de ton aide !
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)
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
Par avance merci de ton aide !
Juna- **
-
Messages : 88
Inscrit(e) le : 06/05/2006 -
Re: Toolbar et barre de navigation au premier plan
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
Ça s'affiche correctement de mon côté pourtant o.o
Pour l'avatar écrasé:
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:
Puis dans CSS, ajouter:
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- ****
-
Messages : 386
Inscrit(e) le : 22/09/2012 -
Re: Toolbar et barre de navigation au premier plan
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
Merci infiniment pour ton aide, et désolée du temps que ça a pris
Le problème est donc
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
Merci infiniment pour ton aide, et désolée du temps que ça a pris
Le problème est donc
Juna- **
-
Messages : 88
Inscrit(e) le : 06/05/2006 -
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum