Bonjour, je suis nouveau sur le forum, alors je suis désolé pour les eventuelles erreures d'emplacement de post,mise en forme de la demande, ect..
Voila mon problème, en zoomant/dézoomant ( et maintenant même en 100%) dans mon header contenant mon menu navigvation, les éléments se superposent, passent sur plusieurs lignes, se décalent anormalement, ect..
Je ne comprend pas d'ou vient ces problèmes, et à force d'y toucher, les problèmmes se cummulent, plus qu'ils ne se résoudent..
Voila le HTML et le CSS des parties concernées,
Désolé pour ce bordel, je débute dans le domaine en auto-didacte ^^'
HTML:
<div class=menunav>
<nav class="navMenu">
<ul>
<li><a href="index.php">Accueil</a></li>
<li><a href="webtoon.php">Webtoon</a></li>
<li><a href="shop.php">Shop</a></li>
<li><a href="info.php">Info</a></li>
<li><a href="contact.php">Contact</a></li>
<div class="dot"></div>
</ul>
</nav>
</div>
CSS:
header {
background: #2E0D11;
}
.navMenu {
position: absolute;
max-lines: 1;
top: 4vw;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.navMenu ul {
list-style: none;
margin: 0;
padding: .2em 2em;
float: right;
}
.navMenu ul li {
display: inline-block;
margin: 0;
padding: .2em .7em;
}
.navMenu a {
color: #FFD68F;
text-decoration: none;
text-align: center;
max-lines: 1;
font-size: 1.6vw;
text-transform: uppercase;
font-weight: 700;
display: inline-block;
width: 180px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
J'aimerais que ces éléments restent au centre, j'ai fait en sorte que la taille des textes ne changent pas ( j'essaye d'avoir un seul affichage pour pc et mobile, le responsive web rattraperait les différente résolutions d'affichage )
Et qu'ils ne se supperposent pas, et gardent 1 seule ligne plutot que de crée des colones a force de zoom
(Si j'ai le droit de citer ?) je prendrait l'exemple du NavMenu de Facebook, sauf qu'il n'est pas fixe à l'écran, je voudrait qu'il reste en haut de la page
Mais avec le même logo retour acceuil a gauche, le bouton "compte" a droite et les éléments du millieux (les icon remplacer par des textes dans mon cas)
Et surtout qu'ils réagissent de la même facon quand on zoom/dezoom
Pour l'instant j'ai beau essayer tout ce que je peux grace au aides trouver sur google, je n'arrive pas a faire en sorte que les éléments restent en une seule ligne, ni qu'ils se supperposent.
Sauf en créant une vraie case visible, mais dans mon cas, la case n'est pas visible bien que cliquable, le texte devrait être au millieu de la case (non affiché ).
J'espère que mon explication est compréhensible, comme je l'ai dit au début, je débute dans le domaine, et le tout en autodidacte, je comprend que mon code peut-être hasardeux, ou très moche ^^' Je m'en excuse d'avance
Je reste a dispo pour donner d'eventuelles explications sur ce que j'ai fait ou cherche à avoir
Ou autre bout de code que j'aurais oublier
Merci de m'avous lu, à bientot :D