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

4 réponses


Arzou
Réponse acceptée

Hello !
Je te conseille de revoir les bases html / css, et de te pencher sur flexbox et grid, ça change la vie ;)

Surtout quand tu commence, il faut mieux éviter de gérer ton contenu avec des postions absolute et relative. On a vite tendance à en abuser, et c'est compliqué à maintenir et à avoir un bon comportement mobile.

La, avec un petit flex sur ton ul, ça résout quasiement tous tes problèmes.

Pour tes a, évite de leur donner une largeur fixe, applique leur plutôt des marges.

Tu as une petite erreur dans la première ligne de ton html, tu as oublié les "" à ta div .menunav

Je t'ai réécris rapidement ton css, tu nous diras si c'est bon pour toi. Et surtout si tu as compris le code :)


ul, li {
  margin: 0;
  padding: 0;
}

header {
  background: #2E0D11;
}

 .navMenu {
  top: 4vw;
}

.navMenu ul {
  list-style: none; 
  display: flex;
   justify-content: center;
  gap: 2vw;
}

.navMenu a {
  color: #FFD68F;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 700;

}
pparora
Auteur

Génial ! Le CSS que tu as ré-écris est 2 fois plus court et fonctionne 2 fois mieux, c'est juste parfait <3
Merci beaucoup pour les conseils, jusqu'a maintenant je fesait.. comme je pouvais avec mon peu connaissances ^^'
Les absolute et relative, c'est tout ce que j'ai trouver pour arriver à placer mes élèments ^^'
Mais je suis d'accord avec toi et c'est ce que je fait, bosser encore les bases

Je te remercie pour ta réponse bien complète et ce bout de code ré-écris a la perfection
Je peut maintenant continuer sans trop déprimer car rien ne marche :')

Ravi d'avoir d'écouvert ce forum ^^

Content que ça fonctionne et que ça puisse t'aider ;)
Bon courage pour la suite !

intéréssant ! merci pour ces info !

192.168.100.1 192.168.1