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

Bug barre navigation sous firefox

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

Résolu Bug barre navigation sous firefox

Message par Tsukynette Ven 12 Fév 2021 - 2:23

Détails techniques


Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:
Bug barre navigation sous firefox 52uWYXf

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://woa-rpg.forumactif.com/

Description du problème

Bonjour,

Comme la capture d'écran le démontre, ma barre de navigation cause des décallages de façon aléatoire avec le haut du forum. Le bug se produit seulement sous Mozilla Firefox. Tout fonctionne bien sous chrome !

Auriez-vous des pistes pour que cette barre de navigation s'affiche proprement sous firefox ?

Merci à vous !

Voici les codes concernés sous hide :
avatar

Tsukynette
*

Messages : 38
Inscrit(e) le : 03/12/2011

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

Résolu Re: Bug barre navigation sous firefox

Message par Tsukynette Sam 13 Fév 2021 - 11:53

Up Smile
avatar

Tsukynette
*

Messages : 38
Inscrit(e) le : 03/12/2011

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

Résolu Re: Bug barre navigation sous firefox

Message par Tsukynette Dim 14 Fév 2021 - 19:09

Up <3
avatar

Tsukynette
*

Messages : 38
Inscrit(e) le : 03/12/2011

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

Résolu Re: Bug barre navigation sous firefox

Message par Tsukynette Mar 16 Fév 2021 - 16:37

Up !
avatar

Tsukynette
*

Messages : 38
Inscrit(e) le : 03/12/2011

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

Résolu Re: Bug barre navigation sous firefox

Message par Self Jeu 18 Fév 2021 - 13:50

Bonjour,

Je ne pense pas que ça vienne de la barre de navigation mais peut être du calcul des flex-box que vous avez mit dans un conteneur affiché en mode inline avec ce code dans votre feuille de style:
Code:
#container {
    display: inline;
}
Il peut être enlevé ou remplacé par un :
Code:
#container {
    display: inline-flex;
}
peut être, cependant je ne reproduis pas tout le temps ce problème de décalage pourriez vous fournir le contenu de vos templates index_body & index_box ainsi que le CSS si le problème ne se résout pas avec la solution que je vous ai donné.
Self

Self
Membre actif

Masculin
Messages : 3796
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bug barre navigation sous firefox

Message par Tsukynette Jeu 18 Fév 2021 - 14:45

Bonjour,

Merci pour votre passage !

Concerant l'ajout du flex, ça ne règle pas le problème malheureusement et même ça l'ajoute des soucis d'affichage. Sad

Voici mes templates :

avatar

Tsukynette
*

Messages : 38
Inscrit(e) le : 03/12/2011

Voir le profil de l'utilisateur https://woa-rpg.forumactif.com/
Tsukynette a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Bug barre navigation sous firefox

Message par Self Jeu 18 Fév 2021 - 19:45

Hello !

Alors j'ai réussi à reproduire puis à corriger de mon côté en retirant du CSS le passage :
Code:
#container{
    display: inline;
}

Puis en remplaçant le passage :
Code:
#page-body {
    margin-left: -14%;
}
Par :
Code:
#page-body {
    display: grid;
    grid-template-columns: 80% 20%;
}
#emptyidcc{ grid-row-start: 1; grid-column-start: 1; }

Et le passage :
Code:
#navi-woa {
    width: 200px;
    background-image: url(https://i.imgur.com/tsTgKrk.png);
    background-size: 100%;
    background-color: #212122;
    text-align: center;
    margin-top: 40px;
    animation: stickAnim .3s;
    float: right;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    margin-right: -34%;
}
Par :
Code:
#navi-woa {
    grid-column-start: 2;
    width: 200px;
    background-image: url(https://i.imgur.com/tsTgKrk.png);
    background-size: 100%;
    background-color: #212122;
    text-align: center;
    margin-top: 40px;
    animation: stickAnim .3s;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
}

Est-ce que la correction fonctionne également sur votre forum ?
Self

Self
Membre actif

Masculin
Messages : 3796
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bug barre navigation sous firefox

Message par Tsukynette Jeu 18 Fév 2021 - 20:27

Salut,

Après avoir essayé ces nouveaux codes, le problème est toujours présent hélas
Voici une capture d'écran du rendu : https://i.imgur.com/upHhIht.png
avatar

Tsukynette
*

Messages : 38
Inscrit(e) le : 03/12/2011

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

Résolu Re: Bug barre navigation sous firefox

Message par Self Jeu 18 Fév 2021 - 20:52

Je ne reproduis pas et je vois les anciens codes sur votre forum, pourriez vous appliquer ceux que je vous ai donné que j'essaie de voir comment je peux reproduire ce comportement ?
Self

Self
Membre actif

Masculin
Messages : 3796
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bug barre navigation sous firefox

Message par Tsukynette Ven 19 Fév 2021 - 1:32

Oups, pardon, j'ai remis le forum normalement car nous avons des visiteurs dessus ^^

Voici mon forum test où j'ai appliqué vos codes https://adminee-test.forumactif.com/
avatar

Tsukynette
*

Messages : 38
Inscrit(e) le : 03/12/2011

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

Résolu Re: Bug barre navigation sous firefox

Message par Self Ven 19 Fév 2021 - 12:15

En effet sur mon forum la variable {ID_CONTENT_CONTAINER} présente dans le overall_header à cette ligne :
Code:
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
génère l'ID #emptyidcc alors que sur vos forums c'est l'ID #content-container.

Donc il faut remplacer le passage que je vous ai donné :
Code:
#page-body {
    display: grid;
    grid-template-columns: 80% 20%;
}
#emptyidcc{ grid-row-start: 1; grid-column-start: 1; }


Par :
Code:
#page-body {
    display: grid;
    grid-template-columns: 80% 20%;
}
#content-container{ grid-row-start: 1; grid-column-start: 1; }

Et comme dans le CSS de base de votre forum cet ID agit aussi sur une marge de #container il faudra je pense ajouter à ce code le suivant :
Code:
#content-container #container{ margin-left: 0px; }
en modifiant le 0px si besoin Wink .
Self

Self
Membre actif

Masculin
Messages : 3796
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bug barre navigation sous firefox

Message par Tsukynette Ven 19 Fév 2021 - 15:01

Bonjour,
merci de votre nouveau passage !

J'ai apporté les modifications et j'en suis à ce rendu : https://i.imgur.com/a9nTC0i.png
Malheureusement, quand je joue avec le margin-left pour ditinguer la barre de navig du corps du forum, ça vient créer un grand décalage et le corps du forum n'est plus positionné comme il devrait l'être à l'origine Sad
J'ai d'ailleurs remarqué un autre petit bug qui s'est ajouté avec l'ajout de vos codes : la barre de navigation s'affiche mal lorsqu'on scroll

Merci !
avatar

Tsukynette
*

Messages : 38
Inscrit(e) le : 03/12/2011

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

Résolu Re: Bug barre navigation sous firefox

Message par Self Ven 19 Fév 2021 - 19:57

Je suis désolé mais c'est des problèmes que je ne reproduis pas sur mon forum de test, c'est pour cela que l'on avance à tâtons.
Pour la marge de la barre de navigation je m'étonnais que ça me le fasse pas (c'est un comportement normal du display: grid;) et pour le corriger on peut entourer celle-ci d'une nouvelle div et donc remplacez :
Code:
                                   <div id="navi-woa">
<div class="woa_nav_barre">
 
  <h1 style="margin:10px 0px;">Navigation rapide</h1>
 
  <div class="woa_navi">{GENERATED_NAV_BAR}</div>
 
  <h1>Liens utiles</h1>
 
  <div class="woa_barre_link">
    <a target="_blank" href="/">Contexte</a>
    <a target="_blank" href="/">Guide du nouveau</a>
    <a target="_blank" href="/">Questions ?</a>
    <a target="_blank" href="/">Prédéfinis importants</a>
    <a target="_blank" href="/">Carte du monde</a>
  </div>
 
  <h1 style="margin-bottom:10px;">Membre du mois</h1>
 
  <div class="woa_mdm">
    <img src="/"/>
    <span>Féliciations à Pseudo très long du joueur pour voir jusqu'où ça va</span>
  </div>
 
</div>
  </div>
Par :
Code:
<div class="m20">
 <div id="navi-woa">
 <div class="woa_nav_barre">
 <h1 style="margin:10px 0px;">Navigation rapide</h1>
 <div class="woa_navi">{GENERATED_NAV_BAR}</div>
 <h1>Liens utiles</h1>
 <div class="woa_barre_link">
 <a target="_blank" href="/">Contexte</a>
 <a target="_blank" href="/">Guide du nouveau</a>
 <a target="_blank" href="/">Questions ?</a>
 <a target="_blank" href="/">Prédéfinis importants</a>
 <a target="_blank" href="/">Carte du monde</a>
 </div>
 <h1 style="margin-bottom:10px;">Membre du mois</h1>
 <div class="woa_mdm">
 <img src="/"/>
 <span>Féliciations à Pseudo très long du joueur pour voir jusqu'où ça va</span>
 </div>
 </div>
 </div>
</div>

Puis pour le reste trouvez dans votre CSS :
Code:
#wrap {
    background-color: #e9ebed;
    border: 1px solid #;
    font-size: 1.3rem;
    margin: 0 auto;
    max-width: 1400px;
    padding: 24px 36px;
    width: 900px;
}
Et enlevez la ligne width: 900px;

Et comme dit dans mon précédent message régler le margin-left à 0px pour commencer :
Code:
#content-container #container{ margin-left: 0px; }
Self

Self
Membre actif

Masculin
Messages : 3796
Inscrit(e) le : 13/06/2013

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

Résolu Re: Bug barre navigation sous firefox

Message par Tsukynette Dim 21 Fév 2021 - 20:26

Bonjour,

Cela semble fonctionner avec ces nouveaux codes !

Merci pour votre aide Very Happy
avatar

Tsukynette
*

Messages : 38
Inscrit(e) le : 03/12/2011

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