Problème de zoom sur ma toolbar

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

Résolu Problème de zoom sur ma toolbar

Message par Nekrofyre le Jeu 28 Juil 2016 - 2:47

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: http://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
Very Happy
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



Dernière édition par Nekrofyre le Jeu 28 Juil 2016 - 20:19, édité 1 fois

Nekrofyre
Nouveau membre

Messages : 29
Inscrit(e) le : 24/06/2016

Http://bronenbourg.forumactif.com
Nekrofyre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de zoom sur ma toolbar

Message par Milouze14 le Jeu 28 Juil 2016 - 4:08

Hello Nekrofyre,

Hum cela ressemble a un copier coller de cette demande:

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

a++


Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de zoom sur ma toolbar

Message par Nekrofyre le Jeu 28 Juil 2016 - 11:57

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

Nekrofyre
Nouveau membre

Messages : 29
Inscrit(e) le : 24/06/2016

Http://bronenbourg.forumactif.com
Nekrofyre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de zoom sur ma toolbar

Message par Milouze14 le Jeu 28 Juil 2016 - 16:49

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

Milouze14
+ Hyperactif +

Masculin
Messages : 4577
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 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