Problème pour centrer mon menu
Résolu
iiYazza
Messages postés
4
Statut
Membre
-
animostab Messages postés 3003 Statut Membre -
animostab Messages postés 3003 Statut Membre -
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; }
A voir également:
- Problème pour centrer mon menu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
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; }
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; }
iiYazza
Messages postés
4
Statut
Membre
Merci beaucoup ça fonctionne ! Je n'avais pas pensé à mettre un display:inline-block ^^
animostab
Messages postés
3003
Statut
Membre
738
ok tu peux mettre le sujet en résolu
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
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 :
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>
