Problème de zoom sur ma toolbar

[Nekrofyre]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : Http://bronenbourg.forumactif.com

Description du problème

Bonjour, avant toute chose, je tiens à signaler que j'ai essayé de trouver des sujets similaires au mien mais je n'en ai trouvé que un, menant vers un tuto: https://forum.forumactif.com/t286701-image-de-fond-qui-s-adapte-a-la-resolution-du-visiteur mais qui portait sur une image de fond et qui n'était donc pas totalement en adéquation avec mon problème.

Bonjour, je vous expose mon problème. J'ai installé sur mon forum une barre de navigation se situant au-dessus de la bannière du forum et disposant d'un effet hoover vers le bas au survol du titre, afin de laisser apparaître plusieurs sous-catégories.
Le problème est que lorsque je zoom, le dernier onglet passe en-dessous donnant alors un rendu très moche.

Voici deux images afin de mieux représenter le problème:

Lorsque le zoom est > ou = à 110%:



Lorsque le zoom est > que 110%:



Je ne comprends absolument pas pourquoi cela se produit sachant que j'ai donné une largeur de 100% à la barre de navigation et une largeur de 20% à chacun des 5 onglets.
Je vous donne ci-dessous le CSS de ma barre si jamais cela peut vous aider

Code:

/* DEBUT BARRE DE NAVIGATION */
.nav_txt {
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: #e6e7e7;
  background: #091016;
  font-size: 20px;
  height: 25px;
  text-shadow:1px 1px 2px #000000;
  border-bottom: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
}
.barre_nav a{
 
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: #e6e7e7;
  font-size: 15px;
  text-decoration: none !important;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:  0.2s all;
  transition:  0.2s all;
}
.barre_nav a:hover {
  text-decoration: none !important;
  letter-spacing: 2px;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:    0.2s all;
  transition:    0.2s all;
}
.barre_nav {
 
  width:100%; /* à adapter selon la largeur de votre forum */
  height:175px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: -24px; /* à adapter selon les éléments présents au dessus de votre barre */
  overflow: hidden;
  z-index: 10;
  border-top: 1px solid #e6e7e7;
}
.nav_1 {
  width:12em;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_2 {
  width:12em;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_3 {
  width:12em;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
 
.nav_4 {
  width:12em;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_5 {
  width:11.4em;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_1:hover {
  width:12em;
  height:150px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_2:hover {
  width:12em;
  height:100px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_3:hover {
  width:12em;
  height:100px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;}
 
.nav_4:hover {
  width:12em;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
 
.nav_5:hover {
  width:11.4em;
  height:100px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
 
/* FIN BARRE DE NAVIGATION */

Je vous remercie d'avance du temps que vous m'accordez

[Invité]

Hello Nekrofyre,

Hum cela ressemble a un copier coller de cette demande:

https://forum.forumactif.com/t386931-probleme-de-zoom-avec-certains-elements#3251486

a++

[Nekrofyre]

Effectivement mais je repose une demande car mon problème n'est finalement pas réglé

[Invité]

Re,
comme expliqué sur le message du topic mentionné,
tu t'obstines a mettre des largeurs en em et non en pourcentage sur tes onglets (comme tu le mentionnes)
alors que le conteneur à une largeur à 100%.

J'ai corrigé aussi le code html de ton template car il manquait une balise de fermeture sur un lien:

Code:


 <center>
<div class="barre_nav">       
<div class="nav_1">
<div class="nav_txt">Forum<br /><br /></div>
<br /><a href="http://bro-nembourg.forumactif.org">  Acceuil </a><br />
      <a href="http://bro-nembourg.forumactif.org/t2-les-regles-de-la-guilde">  Les règles </a><br />
      <a href="http://bronenbourg.forumactif.org/calendar"> Calendrier</a><br />
      <a href="http://bronenbourg.forumactif.org/faq">  FAQ </a><br />
      <a href="http://bronenbourg.forumactif.org/search">  Rechercher </a><br />
</div>
<div class="nav_2">
                       
<div class="nav_txt">Profil<br /><br /></div>
 <br /><a href="http://bronenbourg.forumactif.org/u1">  Voir votre profil </a><br />
      <a href="http://bronenbourg.forumactif.org/profile?mode=editprofile&page_profil=preferences">  Editer votre profil </a><br />
      <a href="/privmsg?folder=inbox">  Messagerie</a><br /> 
</div>
             
<div class="nav_3">
                       
<div class="nav_txt">Membres <br /><br /></div>
<br /><a href="http://bronenbourg.forumactif.org/memberlist">  Membres </a><br />
      <a href="http://bronenbourg.forumactif.org/groups">  Groupes</a><br />
      <a href="http://bronenbourg.forumactif.org/t6-tekitoa">  Tékitoa ? </a><br />
</div>
     
<div class="nav_4">
<div class="nav_txt">Sites annexes<br /><br /></div>
<br /><a href="">  Forum alliance </a><br />
      <a href="https://www.dofusbook.net/fr/"> Dofusbook </a><br />
      <a href="http://dofustools.everhate.com/index.php?page=accueil">  Dofustools </a><br />
      <a href="http://www.dofuspourlesnoobs.com/">  Dofuspourlesnoobs </a>
</div>
     
<div class="nav_5">
<div class="nav_txt">Connexion <br /><br /></div><br />
  <a href="http://bro-nembourg.forumactif.org/register">  S'enregistrer </a><br />
  <a href="http://bro-nembourg.forumactif.org/login">  Connexion </a><br />
  <a href="http://bronenbourg.forumactif.org/login?logout">  Déconnexion </a>
  <br />
</div>
</div>
  </center>
  <center><span class="bannière">
    <a href="http://bronenbourg.forumactif.org">
      <img src="http://image.noelshack.com/fichiers/2016/27/1467975338-logo-bro-border.png"/></a></span>
  </center>



Ensuite la c.s.s modifiée:

Code:


/* DEBUT BARRE DE NAVIGATION */
    .nav_txt {
      text-align: center;
      font-variant: small-caps;
      font-family: Gerogia;
      color: #e6e7e7;
      background: #091016;
      font-size: 20px;
      height: 25px;
      text-shadow:1px 1px 2px #000000;
      border-bottom: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
    }
    .barre_nav a{
   
      text-align: center;
      font-variant: small-caps;
      font-family: Gerogia;
      color: #e6e7e7;
      font-size: 15px;
      text-decoration: none !important;
      -moz-transition:  0.2s all;
      -webkit-transition:  0.2s all;
      -o-transition:  0.2s all;
      -ms-transition:  0.2s all;
      -khtml-transition:  0.2s all;
      transition:  0.2s all;
    }
    .barre_nav a:hover {
      text-decoration: none !important;
      letter-spacing: 2px;
      -moz-transition:  0.2s all;
      -webkit-transition:  0.2s all;
      -o-transition:  0.2s all;
      -ms-transition:  0.2s all;
      -khtml-transition:    0.2s all;
      transition:    0.2s all;
    }
    .barre_nav {
width:100%; /* a adapter selon la largeur de votre forum */
  height:175px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: -24px; /* a adapter selon les éléments présents au dessus de votre barre */
  overflow: hidden;
  z-index: 10;
  border-top: 1px solid #e6e7e7;
    }

    .nav_1 {
      width:19%;
      padding: 0px 3px 0px 4px;
      height:25px;
      background: #080e13;
      float: left;
      border: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
      overflow: hidden;
    }
    .nav_2 {
      width:19%;
      padding: 0px 3px 0px 4px;
      height:25px;
      background: #080e13;
      float: left;
      border: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
      overflow: hidden;
    }
    .nav_3 {
      width:19%;
      padding: 0px 3px 0px 4px;
      height:25px;
      background: #080e13;
      float: left;
      border: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
      overflow: hidden;
    }
   
    .nav_4 {
      width:19%;
      padding: 0px 3px 0px 4px;
      height:25px;
      background: #080e13;
      float: left;
      border: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
      overflow: hidden;
    }
    .nav_5 {
      width:19%;
      padding: 0 5px 0 5px;
      height:25px;
      background: #080e13;
      float: left;
      border: 1px solid #091016;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
      overflow: hidden;
    }
    .nav_1:hover {
     
      height:150px;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
    }
    .nav_2:hover {
   
      height:100px;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
    }
    .nav_3:hover {
     
      height:100px;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;}
   
    .nav_4:hover {
     
      height:125px;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
    }
   
    .nav_5:hover {
   
      height:100px;
      box-shadow: 0px 0px 3px #000000;
      -moz-transition:  0.5s all;
      -webkit-transition:  0.5s all;
      -o-transition:  0.5s all;
      -ms-transition:  0.5s all;
      -khtml-transition:  0.5s all;
      transition:  0.5s all;
    }
   
    /* FIN BARRE DE NAVIGATION */



a++