Problème pour centrer mon menu
Résolu
Bonjour,
Je ne parviens pas à centrer mon menu après de multiples tentatives, merci à celui qui pourra m'aider !
Voilà mon css :
Je ne parviens pas à centrer mon menu après de multiples tentatives, merci à celui qui pourra m'aider !
Voilà mon css :
@charset "iso-8859-1";
/* JS disabled styles */
.no-js nav li:hover ul { display:block; }
/* styles de base nav*/
nav { display:block; margin:0 auto 20px; border:1px solid #222; position:relative; background-color:#333333; font:16px Titillium,Tahoma, Sans-serif; }
nav ul { padding:0; margin:0; }
nav li { position:relative; float:left; list-style-type:none; }
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a { display:block; padding:10px 20px; border-left:1px solid #999999; border-right:1px solid #222; color:#eee; text-decoration:none; }
nav li a:focus { outline:none; text-decoration:underline; }
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul { display:none; width:100%; position:absolute; left:0; background:#333333 }
nav ul ul li { float:none; }
nav ul ul a { padding:15px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { background-color:#555; }
4 réponses
-
voila ton css avec le menu bien centré (le problème c'était le float:left; remplacé par display inline-block et un text-align dans nav
voila le css complet
nav { display:block; text-align:center; margin:0 auto; border:1px solid #222; position:relative; background-color:#333333; font:16px Titillium,Tahoma, Sans-serif; text-align:center; }
nav ul { padding:0; margin:0; }
nav li { position:relative; display:inline-block; list-style-type:none; }
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a { display:block; padding:10px 20px; border-left:1px solid #999999; border-right:1px solid #222; color:#eee; text-decoration:none;}
nav li a:focus { outline:none; text-decoration:underline; }
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul { display:none; width:100%; position:absolute; left:0; background:#333333 }
nav ul ul li { float:none; }
nav ul ul a { padding:15px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { background-color:#555; }
-
Salut
a vu d'oeil essaie déjà de mettre text-align:center; dans nav (ou nav ul)
si ca ne le fait pas
donne le html du menu ou bien l'url de la page pour tester
-
J'ai essayé tex-align un peu partout ça ne change rien
Voilà l'html :
<script src="scr/jquery.js"></script> <script src="scr/modernizr.js"></script> </head> <body class="no-js"> <!-- Emplacement du menu --> <nav id="topNav"> <ul> <li><a href="#" title="">Accueil</a></li> <li class="last"><a href="#" title="">La LFFC</a> <ul> <li><a href="#" title="">Présentation</a></li> <li><a href="#" title="">Contact</a></li> <li><a href="#" title="">Staff</a></li> </ul> </li> <li><a href="#" title="">Les équipes</a> <ul> <li><a href="#" title="">Liste des équipes</a></li> <li><a href="#" title="">Inscrire une équipe</a></li> </ul> </li> <li><a href="#" title="">Saison 2014</a> <ul> <li><a href="#" title="">Règlement</a></li> <li><a href="#" title="">Les tournois online</a></li> <li><a href="#" title="">Les tournois offline</a></li> <li><a href="#" title="">Classement</a></li> </ul> </li> <li><a href="#" title="">Medias</a> <li><a href="#" title="">Partenaires</a> </ul> </nav> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script> <script type='text/javascript'> $(function(){ $(window).scroll(function () {//Au scroll dans la fenetre on déclenche la fonction if ($(this).scrollTop() > 150) { //si on a défilé de plus de 150px du haut vers le bas $('#navigation').addClass("fixNavigation"); } else { $('#navigation').removeClass("fixNavigation"); } }); }); </script> <!-- Initialisation de la fonction --> <script> var el = document.getElementsByTagName("body")[0]; el.className = ""; (function($){ var nav = $("#topNav"); nav.find("li").each(function() { if ($(this).find("ul").length > 0) { $("<span>").text("^").appendTo($(this).children(":first")); $(this).mouseenter(function() { $(this).find("ul").stop(true, true).slideDown();}); $(this).mouseleave(function() { $(this).find("ul").stop(true, true).slideUp();}); } }); })(jQuery); </script> </body> </html> -
Salut,
tu peut essayer comme ceci :
nav{ display : table; margin : 0px auto; }
