Materialize css comment centrer le menu

Par Geek Boy (GeekBoy), il y a 9 ans

Les bases HTML/CSS

Bonjour,

Je débute dans le html et le css donc j'utilise MaterialiseCss pour allez plus vite dans le css et d'avoir un résultat plus intérésent et pour me permetre en même temps d'apprendre

Ce que je fais

voici le code de mon menu:

<nav>
<div class="nav-wrapper">
  <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
  <ul class="right hide-on-med-and-down">
    <li><a href="accueil.html">Accueil</a></li>
    <li><a href="team.html">Notre équipe</a></li>
    <li><a href="pronos.html">Pronostics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <ul class="side-nav" id="mobile-demo">
    <li><a href="accueil.html">Accueil</a></li>
    <li><a href="team.html">Notre équipe</a></li>
    <li><a href="pronos.html">Pronostics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

</nav>

et voici mon custom css

nav {
color: #fff;
background-color: #ee6e73;
width: 100%;
height: 44px;
line-height: 45px;

}

nav ul a {
transition: background-color .3s;
font-size: 1.2rem;
color: #fff;
display: block;
padding: 0 15px;
cursor: pointer;
left: 60%;
}

Ce que je veux

Ce que je veux c'est que mon menu soit centrer au millieu et non a droite

Merci d'avance de m'aider.

12 réponses

Muxabble, il y a 9 ans

tu met tes deux ul dans une div container

Lartak, il y a 9 ans

Bonjour.
C'est lequel des deux ul que tu veux centrer ?
Car le premier à la classe right, ce qui doit vouloir dire que ça l'aligne sur la droite.

Geek Boy (GeekBoy), il y a 9 ans

je veux centrer le premier menu ,car l'autre pas besoin de le centrer vue que c'est pour mobile est qu'il me convient ,DubleYu comment je doit mis prendre ?

Geek Boy (GeekBoy), il y a 9 ans

j'ai réussi en fesant ceci

ul.right {

position: absolute;
right: 40%;

}

Muxabble, il y a 9 ans

@Geek Boy, ça ne fonctionneras pas sur les mobiles:

Tu veux centrer par rapport au milieu de la page ou au conteneur de ta page ?

<nav> <div class="container"> <div class="nav-wrapper"> <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> <ul class="right hide-on-med-and-down"> <li><a href="accueil.html">Accueil</a></li> <li><a href="team.html">Notre équipe</a></li> <li><a href="pronos.html">Pronostics</a></li> <li><a href="contact.html">Contact</a></li> </ul> <ul class="side-nav" id="mobile-demo"> <li><a href="accueil.html">Accueil</a></li> <li><a href="team.html">Notre équipe</a></li> <li><a href="pronos.html">Pronostics</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </nav>
Robin, il y a 9 ans

Utilise les flexbox

Geek Boy (GeekBoy), il y a 9 ans

oui exact ça ne fonctionne plus le menu mobile , @DubleYu, je veux qui soit positioner à 18% de la gauche

Muxabble, il y a 9 ans

Ah oui sur materialdesign CSS le menu mobile est separe du coup ferme la div container avant le ul side-mobile

Geek Boy (GeekBoy), il y a 9 ans

Donc si je comprend bien je dois faire comme ceci?

http://pastebin.com/fdZjY7iP

enfaite le menu mobile ne fonctioner pas avant ,comment l'intégrer corectement pour qu'il fonctionne?
il faut metre ceci $(".button-collapse").sideNav(); dans le fichier materialize.js ?

et niveau css je déclare comment dans mon custom css?

désoler si je suis nul ,je débute ,j'ai télécharger la formation complete de Elephorm pour bien apprendre toutes les bases
car les bouquins c'est pas mon truc

Lartak, il y a 9 ans

Bonjour.

il faut metre ceci $(".button-collapse").sideNav(); dans le fichier materialize.js ?

Non, soit dans un fichier javascript que tu auras créé pour ton application ou bien entre des balises script dans une portion html qui sera affiché sur chacune des pages de ton site dans laquelle ta sidebar sera affichée.
Dans les deux cas, il faudra que le code soit appelé après le javascript de Materialize.

Geek Boy (GeekBoy), il y a 9 ans

j'ai regarder une vidéo sur YouTube et c'est bon ,le menu est centrer et le menu mobile fonctionne ,merci à vous c'était bien ce que vous m'avez conseillé