Problème de zoom sur ma toolbar
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Problème de zoom sur ma toolbar
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
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
Dernière édition par Nekrofyre le Jeu 28 Juil 2016 - 20:19, édité 1 fois
Re: Problème de zoom sur ma toolbar
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++
Hum cela ressemble a un copier coller de cette demande:
https://forum.forumactif.com/t386931-probleme-de-zoom-avec-certains-elements#3251486
a++
Invité- Invité
Re: Problème de zoom sur ma toolbar
Effectivement mais je repose une demande car mon problème n'est finalement pas réglé
Re: Problème de zoom sur ma toolbar
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:
Ensuite la c.s.s modifiée:
a++
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++
Invité- Invité
Sujets similaires
» Zoom du forum, les images, l'écriture et autre sont passés au zoom.
» Problème de déformation du bodyline avec le zoom
» Problème d'image de fond lors de zoom
» Problème de zoom avec certains éléments
» Bug sur la barre d'outils
» Problème de déformation du bodyline avec le zoom
» Problème d'image de fond lors de zoom
» Problème de zoom avec certains éléments
» Bug sur la barre d'outils
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum