28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer mon menu

Bonsoir,

Je dispose d'un menu que j'aimerai centrer tout en haut de ma page, que ça prenne vraiment toute la largeur et soit bien collé en haut, ainsi que le menu reste à sa place même si je scroll vers le bas, c'est-à-dire qu'il soit toujours visible.

- centré
- toute la largeur de la page (jai bidouillé mais apparemment ça ne va pas car quand je scroll la barre se coupe de moitié) : Réussi
- toujours visible

Comment dois-je procéder pour le center?
#menu-wrapper{margin:0 auto;position:relative;background-color: #333333;
height: 55px;}
/* Reset */
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

.nav a { text-decoration: none; }
.nav li { list-style: none; }

/* Menu Container */
.nav {
	display: inline-block;
	position: fixed;
	cursor: default;
	z-index: 500;
}

/* Menu List */
.nav > li {
	display: block;
	float: left;
}

/* Menu Links */
.nav > li > a {
	position: relative;
	display: block;
	z-index: 510;
	height: 55px;
	padding: 0 20px;
	line-height: 55px;
	font-family: Segoe UI;
	font-size: 14px;
	color: #fcfcfc;
	text-shadow: 0 0 1px rgba(0,0,0,.35);

	background: #333333;
	border-left: 1px solid #4b4441;
	border-right: 1px solid #312a27;

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}

.nav > li:hover > a { background: #000000; }

.nav > li:first-child > a {
	border-left: none;
}

<div id="menu-wrapper">
	<ul class="nav">
		<li>
			<a href="#">ACCUEIL NJØ</a>
		</li>
		<li><a href="#">Les vidéos</a></li>

		<li><a href="#">La team</a></li>
		<li><a href="#">Contact</a></li>
		<li class="nav-search">
			<form action="#">
				<input type="text" placeholder="Rechercher ...">
				<input type="submit" value="">
			</form>
		</li>
	</ul>
</div>'


Je vous remercie de votre aide, vos conseils,

Cordialement,
LEPY Alizée
Modifié par lizeal (26 Feb 2014 - 10:12)
Bonjour,

Tente ceci : 
#menu-wrapper 
{
     width: 100%;
}
#menu-wrapper ul
{
     margin: auto;
}


… ou bien directement : 
#menu-wrapper 
{
     margin: auto;
}



Petite chose : tu as utilisé l'id « Nav » sur ta balise <ul> ; il serait peut-être préférable pour la sémantique d'écrire directement ceci dans ton code HTML… : 
<nav>
     <ul>
          <li></li>
          <li></li>
          <li></li>
     </ul>
</nav>

Smiley cligne
Bonjour ,

J'avais déjà essayer width et margin mais ça ne me centre toujours pas le menu.

Et pour mon code html ... bien vu !

Edit : je ne trouve vraiment pas le problème ....
Modifié par lizeal (26 Feb 2014 - 21:10)
Bonjour lizeal,

En fait l'approche margin: auto; n'est pas adapté dans ce cas :

1 - l'élément ul.nav est de type inline-block, il faut l'aborder comme du texte. Pour le centrer, il suffit donc d'utiliser text-align: center;.
2 - Ce n'est plus l'élément ul.nav qui doit être fixé, mais le #menu-wrapper.

Il ne manque pas grand chose pour obtenir ce centrage :
body {
  margin: 0;        /* Gwt | ++ Suppression des bandes blanches */
  height: 1000px;   /* Gwt | ++ Juste pour faire apparaitre le scroll vertical en test - A SUPPRIMER EN PROD */
}

#menu-wrapper{
    /*margin:0 auto;*/        /* Gwt | -- Non nécessaire */
    /*position: relative;*/   /* Gwt | -- Non nécessaire */
    position: fixed;          /* Gwt | ++ #menu-wrapper doit être en position fixed, et non ul.nav */
    width: 100%;              /* Gwt | ++ En position absolute et fixed, donner une largeur */
    text-align: center;       /* Gwt | ++ On centre le ul.nav (de type inline-block) */

    background-color: #333333;
    height: 55px;
}

[...]

/* Menu Container */
.nav {
    display: inline-block;
    /*position: fixed;*/ /* Gwt | -- #menu-wrapper doit être en position fixed, et non ul.nav */
    cursor: default;
    z-index: 500;
}

[...]

Vous avez l'exemple complet disponible ici : http://codepen.io/guiwint/pen/oBlEr

Bonne continuation et bon code...
Modifié par Guiwint (27 Feb 2014 - 10:32)
Bonjour, merci pour la réponse.

Le hic c'est que ça me le centre en plein milieu de la page, et non pas tout en haut .. Smiley ohwell
Oui il se comporte très bien même !
Par contre si je ne le fixe pas, aucun problème !
Modifié par lizeal (27 Feb 2014 - 10:50)
Ok !
lizeal a écrit :
...Par contre si je ne le fixe pas, aucun problème !

Du coup cela fonctionne correctement pour vous ?!
Oui ça fonctionne s'il n'est pas fixe, tant pis il ne sera pas fixe. En tout cas votre manière de raisonner est très intéressante et je vous remercie. Je n'aurais jamais pensé que le texte aurait besoin d'être centré pour centrer le reste.
Sujet clos
Aller à