Partage
  • Partager sur Facebook
  • Partager sur Twitter

Comment centrer mon menu?

Sujet résolu
    18 mars 2010 à 7:13:52

    Bonjour,
    J'ai un menu sur ma page que je voudrais centrer mais je n'y arrive pas, j'ai tout essayer (margin: auto; ou text-align: center;) Mais cela refuse de se centrer.

    Voici mes codes:

    <div class="ombre">
    <ul id="menu">
    	<li><a href="http://localhost/accueil.php" style="text-align: right; padding-right: 20px;">Accueil</a></li>
            <li>
                    <a href="http://localhost/actualite.php">Actualité</a>
    				<ul style="border-top : 2px ridge #c9c9c9;">
                                            <li><a href="http://localhost/actualite/politique.php">Politique</a></li>
                                            <li><a href="http://localhost/actualite/high-tech.php">High-tech</a></li>
    					<li><a href="http://localhost/actualite/musique.php">Musique</a></li>
    					<li> <a href="http://localhost/actualite/cine.php">Cinema/TV</a></li>
    					<li><a href="http://localhost/actualite/bourse.php">Bourse</a></li>
    					<li><a href="http://localhost/actualite/meteo.php">Météo</a></li>
    					<li><a href="http://localhost/actualite/sites.php">Sites</a></li>
    					<li><a href="http://localhost/actualite/jeux-videos.php">Jeux vidéos</a></li>
    					<li><a href="http://localhost/actualite/sport.php">Sport</a></li>
    					<li><a href="http://localhost/actualite/people.php">Peoples</a></li>
    					<li><a href="http://localhost/actualite/auto.php">Automobile</a></li>
    					<li><a href="http://localhost/actualite/sciences.php">Sciences</a></li>
    					<li><a href="http://localhost/actualite/sante.php">Santé</a></li>
    					<li><a href="http://localhost/actualite/culture.php">Culture</a></li>
    					<li><a href="http://localhost/actualite/insolite.php">Insolite</a></li>
    					<li><a href="http://localhost/actualite/droits-devoirs.php">Droits/Devoirs</a></li>
    					<li><a href="http://localhost/actualite/lois.php">Lois/Constitution</a></li>
    					<li><a href="http://localhost/actualite/finnances.php">Finnances</a></li>
                                    </ul>
            </li>
           <li>
    	       <a href="http://localhost/telecharger.php">Télécharger</a>
    			       <ul style="border-top : 2px ridge #c9c9c9;">
    				       <li><a href="http://localhost/telecharger/musique.php">Musique</a></li>
    				       <li><a href="http://localhost/telecharger/video.php">Vidéos</a></li>
    				       <li><a href="http://localhost/telecharger/image.php">Images</a></li>
    				       <li><a href="http://localhost/telecharger/scripts.php">Scripts</a></li>
    				       <li><a href="http://localhost/telecharger/logiciels-windows.php">Logiciels Windows</a></li>
    				       <li><a href="http://localhost/telecharger/logiciels-mac.php">Logiciels Mac</a></li>
    				       <li><a href="http://localhost/telecharger/logiciels-linux.php">Logiciels Linux</a></li>
    				       <li><a href="http://localhost/telecharger/logiciels-wm.php">Logiciels Windows Mobile</a></li>
    				       <li><a href="http://localhost/telecharger/logiciels-palm.php">Logiciels Palm</a></li>
    				       <li><a href="http://localhost/telecharger/apps-mobile.php">Applications Mobile</a></li>
    				       <li><a href="http://localhost/telecharger/apps-iphone.php">Applications Iphone</a></li>
    				       <li><a href="http://localhost/telecharger/fonds-ecran.php">Fonds d'écran</a></li>
    				       <li><a href="http://localhost/telecharger/sonneries.php">Logos/Sonneries</a></li>
    				</ul>
    	</li>
           <li>
    	       <a href="http://localhost/communaute.php">Communauté</a>
    				<ul style="border-top : 2px ridge #c9c9c9;">
    					<li><a href="http://localhost/communaute/forum.php">Forum</a></li>
    					<li><a href="http://localhost/communaute/membres.php">Membres</a></li>
    					<li><a href="http://localhost/communaute/blogs.php">Blogs</a></li>
    					<li><a href="http://localhost/communaute/tutos.php">Tutos</a></li>
    					<li><a href="http://localhost/communaute/commerce.php">Achat/Vente</a></li>
    					<li><a href="http://localhost/communaute/Astuces.php">Astuces</a></li>
    					<li><a href="http://localhost/communaute/cours.php">Cours/Ecyclopédie</a></li>
    					<li><a href="http://localhost/communaute/idees.php">Trouver des idées</a></li>
    					<li><a href="http://localhost/communaute/livredor.php">Livre d'or</a></li>
    					<li><a href="http://localhost/communaute/reseau-social.php">Réseau social</a></li>
    					<li><a href="http://localhost/communaute/choix.php">Sondages</a></li>
    					<li><a href="http://localhost/communaute/news.php">News</a></li>
    					<li><a href="http://localhost/communaute/mail.php">Mail</a></li>
    					<li><a href="http://localhost/communaute/articles.php">Articles</a></li>
    					<li><a href="http://localhost/communaute/comparer.php">Comparer</a></li>
    					<li><a href="http://localhost/communaute/sites.php">Sites persos</a></li>
    				</ul>
    	</li>
           <li>
    	       <a href="http://localhost/divertissement.php">Divertissement</a>
    			       <ul style="border-top : 2px ridge #c9c9c9;">
    				       <li><a href="http://localhost/divertissement/musique.php">Musique</a></li>
    				       <li><a href="http://localhost/divertissement/video.php">Vidéos</a></li>
    				       <li><a href="http://localhost/divertissement/jeux.php">Jeux</a></li>
    				       <li><a href="http://localhost/divertissement/blagues.php">Blagues</a></li>
    				</ul>
    	</li>
    	<li>
    		<a href="http://localhost/outils.php" style="text-align: left; padding-left: 20px;">Outils</a>
    		<ul style="border-top : 2px ridge #c9c9c9;">
    			<li><a href="http://localhost/outils/plans.php">Plans</a></li>
    			<li><a href="http://localhost/outils/recherche.php">Moteur de Recherches</a></li>
    			<li><a href="http://localhost/outils/traduction.php">Traduction</a></li>
    			<li><a href="http://localhost/outils/convertisseur.php">Convertisseur</a></li>
    			<li><a href="http://localhost/outils/calculatrice.php">Calculatrice</a></li>
    			<li><a href="http://localhost/outils/emplois.php">Emplois</a></li>
    			<li><a href="http://localhost/outils/classements.php">Classements</a></li>
    			<li><a href="http://localhost/outils/voyages.php">Voyages</a></li>
    			<li><a href="http://localhost/outils/comparateur.php">Comparateur de prix</a></li>
    			<li><a href="http://localhost/modifier-theme.php">Changer de thème</a></li>
    		</ul>
    	</li>
           </ul>
           </div>
    


    a
    {
    	text-decoration: none;
    	color: #2a75ff;
    }
    .ombre
    {
    	background-image: url('../../images/icones/ombre.png');
    	height: 40px;
    	width: 100%;
    	margin-top: -11px;
    	position: relative;
    	z-index: 1000;
    }
    body
    {
    	font-family: Arial, serif;
    	background-image: url("fond.jpg");
    	background-attachment: fixed;
    	color: #555555;
    	min-width: 1000px;
    	font-size: 12px;
    	text-align: center;
    }
    a:hover
    {
    	text-decoration: underline;
    	color: blue;
    }
    a:active
    {
    	color: darkblue;
    }
    img
    {
    	border: none;
    }
    .retour, .contact, .droits
    {
    	margin-left: 16px;
    }
    #menu, #menu ul /* Liste */     
    {
            padding : 0; /* pas de marge intérieure */
            margin : 0; /* ni extérieure */
            list-style : none; /* on supprime le style par défaut de la liste */
            line-height : 35px; /* on définit une hauteur pour chaque élément */
            text-align : center; /* on centre le texte qui se trouve dans la liste */
    	cursor: default;
    }
    
    #menu /* Ensemble du menu */
    {
    	margin: 0 auto%;
            font-weight : bold; /* on met le texte en gras */
            font-family : Arial; /* on utilise Arial, c'est plus beau  */
            font-size : 12px; /* hauteur du texte : 12 pixels */
    	min-width: 1000px;
    	cursor: default;
    	position: relative;
    	z-index: 2000;
    }
    #menu a /* Contenu des listes */
    {
            display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
            padding : 0; /* aucune marge intérieure */
    	background-image: url("../../images/icones/fond-menu.png");
            color : #000; /* couleur du texte */
            text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
            width : 144px; /* largeur */
    	cursor: default;
    }
    
    #menu li /* Elements des listes */      
    { 
            float : left; 
            border-right : 1px solid #afafaf; /* on met une bordure blanche à droite de chaque élément */
    	cursor: default;
    }
    
    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menu li
    {
            border-right: 1px solid #afafaf ; /* on met une bordure transparente à droite de chaque élément */
    	cursor: default;
    }
    
    #menu li ul /* Sous-listes */
    { 
            position: absolute; /* Position absolue */
            width: 144px; /* Largeur des sous-listes */
            left: -999em; /* Hop, on envoie loin du champ de vision */
    	cursor: default;
    	border-left: 1px solid #afafaf;
    }
    
    
    #menu li ul li /* Éléments de sous-listes */
    {
            /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
            border-bottom : 1px solid #afafaf; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
    	cursor: default;
    }
    
    /* IE ne reconnaissant pas le sélecteur ">" */
    html>body #menu li ul li                
    {
    	cursor: default;
    }
    
    #menu li ul ul 
    {
            margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
            /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
            border-left     : 1px solid #afafaf; /* Petite bordure à gauche pour ne pas coller ... */      
    	cursor: default;
    }
    
    /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
    html>body #menu li ul ul                
    {
            border-left     : 1px solid #afafaf; /* on met une bordure transparente sur la gauche de chaque élément */
    	cursor: default;
    }
    #menu a:hover /* Lorsque la souris passe sur un des liens */    
    {
            color: #fff; /* On passe le texte en noir... */
            background-image: url("../../images/icones/fond-menu-hover.png");
    	cursor: default;
    }
    #menu .extr:hover /* Lorsque la souris passe sur un des liens */    
    {
            color: #fff; /* On passe le texte en noir... */
            background-image: url("../../images/icones/fond-menu-droite-hover.png");
    	cursor: default;
    }
    sfHover = function() {
            var sfEls = document.getElementById("menu").getElementsByTagName("LI");
            for (var i=0; i<sfEls.length; i++) {
                    sfEls[i].onmouseover=function() {
                            this.className+=" sfhover";
                    }
                    sfEls[i].onmouseout=function() {
                            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                    }
            }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
    {
            left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
    	cursor: default;
    }
    
    #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
    {
            left: auto; /* Repositionnement normal */
            min-height: 0; /* Corrige un bug sous IE */
    	cursor: default;
    }
    


    Pouvez vous maider?
    Merci d'avance
    • Partager sur Facebook
    • Partager sur Twitter
      18 mars 2010 à 7:44:07

      tu mets ça avec en commentaire liste:
      #menu, #menu ul /* Liste */     
      {
              padding : 0; /* pas de marge intérieure */
              margin : 0; /* ni extérieure */
              list-style : none; /* on supprime le style par défaut de la liste */
              line-height : 35px; /* on définit une hauteur pour chaque élément */
              text-align : center; /* on centre le texte qui se trouve dans la liste */
      	cursor: default;
      }
      

      et en dessus tu mets encore:
      #menu /* Ensemble du menu */
      {
      	margin: 0 auto%;
              font-weight : bold; /* on met le texte en gras */
              font-family : Arial; /* on utilise Arial, c'est plus beau  */
              font-size : 12px; /* hauteur du texte : 12 pixels */
      	min-width: 1000px;
      	cursor: default;
      	position: relative;
      	z-index: 2000;
      }
      

      quels styles veux-tu appliquer à #menu?
      en plus, je comprends pas cette expression (personnellement):
      margin: 0 auto%;
      
      • Partager sur Facebook
      • Partager sur Twitter
        18 mars 2010 à 7:59:39

        Les commentaires sont juste parce que j'ai pris le code de ce menu sur un site et apres j'ai changé quelques petits truc sans changer les commentaires donc pas la peine d'y faire attention;)

        et margin: 0 auto; veut dire que les marges du haut et du bas seront de 0 et de droite et gauche automatique mais meme avec seulement margin: auto; ca ne marche pas
        • Partager sur Facebook
        • Partager sur Twitter
          18 mars 2010 à 8:10:07

          non,tu m'as pas compris,je voulais dire que tu peux séparer les styles pour voir plus clair.d'un côté #menu ul et de l'autre #menu...
          pour margin:0 auto;, je sais.c'est le % à la fin que je comprends pas
          • Partager sur Facebook
          • Partager sur Twitter
            18 mars 2010 à 8:22:13

            ah desolé j'ai fait une erreur la mais meme sans le % ca ne fonctionne pas

            j'ai fais des petite corrections mais ca ne marche toujours pas

            #menu ul 
            {
                    padding : 0;
                    line-height : 35px;
                    list-style : none;
            	cursor: default;
            }
            #menu
            {
            	margin: 0 auto;
                    line-height : 35px;
                    list-style : none;
                    text-align : center;
                    font-weight : bold;
                    font-family : Arial;
                    font-size : 12px;
            	min-width: 1000px;
            	cursor: default;
            	position: absolute;
            	z-index: 2000;
            }
            
            • Partager sur Facebook
            • Partager sur Twitter
              18 mars 2010 à 10:14:02

              je saismets tes listes dans un conteneur et applique un margin: 0 auto; sur ce conteneur.
              • Partager sur Facebook
              • Partager sur Twitter
                18 mars 2010 à 11:05:59

                J' ai essayer ça aussi mais ça ne marche pas non plus:(
                • Partager sur Facebook
                • Partager sur Twitter
                  19 mars 2010 à 21:38:36

                  peux-tu nous envoyer une image au moins de comment ça se présente?
                  • Partager sur Facebook
                  • Partager sur Twitter
                    19 mars 2010 à 22:34:25

                    le div qui contient les listes a quelle taille en width
                    • Partager sur Facebook
                    • Partager sur Twitter
                      19 mars 2010 à 22:45:22

                      normalement, ça devrait pas poser problème;mais j'ai constaté ceci dans ton code:un float:left:
                      #menu li /* Elements des listes */      
                      { 
                              float : left; 
                              border-right : 1px solid #afafaf; /* on met une bordure blanche à droite de chaque élément */
                      	cursor: default;
                      }
                      


                      as-tu appliqué text-align:center au div qui contient les listes.
                      en plus,avec les position:....et left:....que t'as utilisé;il faut avouer que c'est difficile de répérer les positions
                      • Partager sur Facebook
                      • Partager sur Twitter
                        19 mars 2010 à 23:12:25

                        en fait j'ai trouvé la solution assez bizare mais qui a marché j'ai remplacé la largeur du div qui contenais tous de 1000px par 1001px et ca s'est centré lol merci de ton aide:)
                        • Partager sur Facebook
                        • Partager sur Twitter

                        Comment centrer mon menu?

                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                        • Editeur
                        • Markdown