Centrage d'un menu en Css (Responsive)

Sujet résolu

27 mars 2020 à 10:29:20

Bonjour,

Je viens vers vous car j'ai un problème de centrage de menu en responsive, voici ce que j'ai :

J'aimerais que le menu soit aligner verticalement et qu'il n'y ai plus se décalage vers la gauche.

Mais impossible de savoir d'ou ça vient, j'ai mis des text-align: center et fais des tests avec des margin-left et right en auto, rien ne change....

Voici mon code, si vous pouviez m'aider :

/* MEDIA QUERIES */
@media screen and (max-width: 910px) {

  body {
    font-size: 1.5rem;
    font-weight: 200;
  }
  
  p {
    line-height: 2;
    text-align: center;
    width: 90%;
  }

  h1{
    font-weight: 400;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 15px;
    line-height: 1;
  }

  #navbar {
    display: block;
    text-align: center;
  }

  #navbar img {
    width: 50%;
  }

  #navbar ul {
    display: none;

  }

  #navbar ul li {
    text-align: center;
  }

  #navbar ul .dropdown {
    display: block;
  }

  #navbar li:hover .dropdown {
    display: block;
    position: static;
  }

  #navbar label {
    display: block;
    color: var(--main-white);
  }
}

Merci

-RR-

27 mars 2020 à 14:47:45

Bonjour,

il nous faudrait ton code html également. Ou sinon un lien vers ton site ou un codepen irait aussi.

En attendant, la seule chose que je pourrai éventuellement trouver étrange c'est ton width: 90% sur ta balise p.

Mais sans le html, difficile de savoir si ça a une incidence.

-
Edité par -RR- 27 mars 2020 à 14:48:05

LucasBlandin

27 mars 2020 à 15:25:04

Bonjour,

Pour le width: 90% de ma balise p c'est pour pas que ça touche les bords, mais des margin font le taff je vais changer ça.

Voici le html :

<body>
    <!-- Barre de navigation avec les onglets -->
	<nav id="navbar">
        <a class='logo-astucePC' href="index.php"><img class="image_logo" src="ressources/images/logo.png" alt="logo AstucePC"></a>
        <label for="menu-mobile" class="menu-mobile">Menu</label>
        <input type="checkbox" id="menu-mobile" role="button">
        <ul class="nav-list">
            <li><a class="nav-link" href="vueAccueil.php">Accueil</a></li>
            <li><a class="nav-link" href="vueSociete.php">Notre société</a></li>
            <!-- Menu déroulant -->
            <div class="dropdown">
                <li class="dropbtn">Nos services</li>
                <div class="dropdown-content">
                    <a href="vueDepannage.php">Dépannage - Réparation</a>
                    <a href="vueAssemblage.php">Assemblage</a>
                    <a href="vueAssistance.php">Assistance</a>
                    <a href="vueInstallationPC.php">Installation de votre équipement</a>
                </div>
            </div>
            <!-- Menu déroulant -->
            <div class="dropdown">
                <li class="dropbtn">Nos produits</li>
                <div class="dropdown-content">
                    <a href="vuePcFixe.php">PC Fixes</a>
                    <a href="vuePcPortable.php">PC Portable</a>
                    <a href="vuePiecesDetachees.php">Pièces Détachées</a>
                </div>
            </div>
            <li><a class="nav-link" href="vueAide.php">Aide et assistance</a></li>
            <li><a class="nav-link" href="vueContact.php">Contact</a></li>
        </ul>
    </nav>

-RR-

27 mars 2020 à 15:33:57

Ok, par contre tu ne nous as pas montré tout le css en lien avec cette partie.

Il nous faudrait plus d'élément parce qu'en testant ton HTML + CSS ça ne correspond pas à ton image, et je ne vois pas de décalage.

LucasBlandin

27 mars 2020 à 15:44:55

J'ai envoyé que la partie responsive

/* FICHIER CSS DU SITE */


/* Police du site */
@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap');

/* Toutes les couleurs du site */
:root {
  --main-white: #ffffff;

  --main-light-blue: #c0ccdf;
  --main-blue: #0098d4;
  --main-black-blue: #0548BD; 
  --main-black-blue2: #023285; 
  --main-darkblue: #001e69;

  --main-black: #1c1f20;
}

/* Dimmension du site par raport à l'écran */
/* Ne pas modifier */
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* Ne pas modifier */
html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* corps du site */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--main-white);
  margin: 0; 
  padding: 0;
}

/* texte du site */
p {
  color : var(--main-black);
  max-width: 900px;
  text-align: center;
  line-height: 2;
  margin: auto;
}

/* titre des pages */
h1{
  font-weight: 500;
  text-align: center;
  font-size: 2rem;
  color: var(--main-black-blue);
  font-weight: bold;
  margin-bottom: 15px;
  margin-top: 15px;
}

/* Lien au survol */
a:hover {
  color: var(--main-black);
}

/* MENU DEROULANT */

/* Lien principal du menu */
.dropbtn {
  color: var(--main-light-blue);
  font-size: 1.8rem;
  border: none;
  margin-right: 30px;
}

/* bouton au survol */
.dropbtn:hover {
  color: var(--main-white);
}

/* <div> du contenu - Ne pas modifier */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Contenu du menu déroulant */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--main-white);
  min-width: 300px;
  z-index: 1;
}

/* Lien du menu déroulant */
.dropdown-content a {
  color: var(--main-black);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Changement de la couleur au survol des liens du menu déroulant */
.dropdown-content a:hover {background-color: var(--main-black-blue);}

/* Montre le menu au survol */
.dropdown:hover .dropdown-content {display: block;}


/* Onglets de la barre de navigation */
ul {
  list-style: none;
}

/* lien de la barre de navigation */ 
a {
  text-decoration: none;
  color: var(--main-light-blue);
}

/* Id de la navbar */
#navbar {
  display: flex; 
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: var(--main-black-blue);
}

#navbar input[type=checkbox] {
  display: none;
}

#navbar input[type=checkbox]:checked ~ ul {
  display: block;
}

#navbar label {
  display: none;
}


/* Class regroupant les onglets */
.nav-list {
  display: flex;
}

/* Class regroupant les liens des onglets */
.nav-list a {
  margin-right: 30px;
  font-size: 1.8rem;
}

/* Lien des onglets au survol */
.nav-list a:hover {
  color: var(--main-white);
}

Là tout y est

-RR-

27 mars 2020 à 15:51:09

Tu as ces deux règles à supprimer:

.nav-list a {
    margin-right: 30px;
}

.dropbtn {
    margin-right: 30px;
}

Quand tu as un comportement non désiré, le plus simple c'est d'utiliser l'inspecteur d'éléments de ton navigateur.

Très vite, il va te mettre en évidence ce qui ne va pas comme, dans ce cas, une marge inutile.

Bon dev à toi !

LucasBlandin

27 mars 2020 à 16:00:13

Super merci ! Je t'avoue que j'avais pas pensé que ça pouvais venir de mon CSS, je pensais que c'était mes médias queries qui étaient mauvaise :-°

J'ai un autre problème maintenant dans la version web les onglets sont tous collés comme j'ai enlevé le margin-right, y a pas un moyen de régler ça ?

J'ai réglé le problème j'ai mis dans ma médias queries #navbar ul li un margin-right a 0px

-
Edité par LucasBlandin 27 mars 2020 à 16:26:08

-RR-

27 mars 2020 à 17:09:54

Avec plaisir !

Bon apprentissage.