Problème pour centrer mon menu
Résolu/Fermé
iiYazza
Messages postés
4
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
18 mars 2014
-
13 mars 2014 à 19:07
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 14 mars 2014 à 21:17
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 14 mars 2014 à 21:17
A voir également:
- Problème pour centrer mon menu
- Menu déroulant excel - Guide
- Windows 11 menu démarrer classique - Guide
- Canon quick menu - Télécharger - Utilitaires
- Réinitialiser menu démarrer windows 10 - Guide
- Menu demarrer windows 10 - Guide
4 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
14 mars 2014 à 04:05
14 mars 2014 à 04:05
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; }
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
13 mars 2014 à 23:09
13 mars 2014 à 23:09
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
iiYazza
Messages postés
4
Date d'inscription
jeudi 13 mars 2014
Statut
Membre
Dernière intervention
18 mars 2014
13 mars 2014 à 23:54
13 mars 2014 à 23:54
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>
Utilisateur anonyme
14 mars 2014 à 00:13
14 mars 2014 à 00:13
Salut,
tu peut essayer comme ceci :
tu peut essayer comme ceci :
nav{
display : table;
margin : 0px auto;
}
14 mars 2014 à 18:45
14 mars 2014 à 21:17