28172 sujets

CSS et mise en forme, CSS3

Centrer mon menu dans mon div

Bonjour à tous !

Je suis nouveau dans ce forum et vous souhaite la bonne année 2011 à tous !! (on est encore en Janvier ! c'est permis !! Smiley cligne )

J'aurais besoin d'un coup de main concernant mon menu...
J'ai cherché avant de poster ce message mais je ne comprend pas pourquoi les différentes solutions que j'ai trouvé ne marche pas... (propriété inline-block qui combine le meilleur des 2 proprieté inline et block par exemple, ou alors je l'ai mal implémenté Smiley fache )

Pouvez me jeter un petit coup d'oeil à cet URL ??? et me dire ce qui cloche avec le centrage de mon menu à l'interieur du div "menuContainer" ?? Je vous le laisse tel qu'avant mes tests avec inline-block parce que là je seche...

Le code HTML est :


    <div id="menuContainer">
    <ul id="MenuDeroulant">

    <li><a href="#">MENU 1</a>

        <ul>            
            <li><a target="_blank"href="#">SOUS MENU 1</a></li>

            <li><a target="_blank"href="#">SOUS MENU 2 TEXTE PLUS GRAND</a></li>
            
            <li><a target="_blank"href="#">SOUS MENU 3</a></li>

            <li><a target="_blank"href="#">SOUS MENU 4</a></li>

            <li><a target="_blank"href="#">SOUS MENU 5</a></li>

        </ul>

    </li>

    <li><a href="#">MENU 2</a>

        <ul>

            <li><a target="_blank"href="#">SOUS MENU 1</a></li>

            <li><a target="_blank"href="#">SOUS MENU 2</a></li>
            
            <li><a target="_blank"href="#">SOUS MENU 3 TEXTE PLUS GRAND</a></li>

            <li><a target="_blank"href="#">SOUS MENU 4</a></li>

            <li><a target="_blank"href="#">SOUS MENU 5</a></li>

        </ul>

    </li>

    <li><a href="#">MENU 3</a></li>

    <li><a href="#">MENU 4</a></li>

    <li><a href="#">MENU 5</a></li>
    
    <li><a href="#">MENU 6</a></li>

</ul>
 

</div>


le code CSS est pour le moment :


#menuContainer {
	background-image:url(../images/fond_menu.png);
    width:940px;
    height:30px;
    margin-top:271px;
	padding:10px;
	text-align:center;
}

#menu {
  position:relative; /* on positionne le conteneur */ 
  margin-left: auto; 
  margin-right: auto; 
  width: 940px; 
  text-align: center;
}

#MenuDeroulant {
    margin: 0;
    padding: 0;
	z-index:1;
	}
	
	
    #MenuDeroulant li {
	    margin: 0 auto;
		float: left;
        list-style: none;
		}

    #MenuDeroulant li a {
        font: 12px Verdana;
		font-weight:bold;			
		display:block;
        background: #f18903; /* Couleur de fond des titres du menu (orange) */
        padding: 7px 12px;
		margin-right:4px;
		text-decoration: none;
        width: 128px;
        color: #FFFFFF; /* Couleur de police des titres du menu (blanc) */
		white-space: nowrap;
		}

    #MenuDeroulant li a:hover {
		background: #ffc06f; /* Couleur de fond des titres du menu au survol de la souris (orange clair) */
		}

        #MenuDeroulant li ul {
			margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-top: 1px solid white;
			}

        #MenuDeroulant li ul li {
			float: none;
            display: inline;
			}

        #MenuDeroulant li ul li a {
	        font: 10px Verdana;
			font-weight:bold;			
			text-align:left;
			width: auto;
            background: #9F1B1B; /* Couleur de fond des items déroulant du menu (rouge bordeaux) */
			}
        

        #MenuDeroulant li ul li a:hover {
			background: #7F1616; /* Couleur de fond des items déroulant du menu au survol de la souris(rouge bordeaux encore plus foncé) */
			}


Au passage j'ai même testé comme vous le voyez le trick de centrage de div proposé en tuto sur le site d'Alsacréation et rien n'y fait...

Je suis un peu embêté sachant que je ne sais pas encore combien de section je vais mettre et je souhaite vraiment centrer ce menu qui m'eneeeeeeeeeeeeerve vous pouvez pas avoir Smiley langue

Merci d'avance pour vos conseils !
Modifié par bond007lr (25 Jan 2011 - 13:14)
Bonjour

Chez moi sur mac sur safari, chrome et firefox ton menu est parfaitement centré..
sur quel navigateur as tu un soucis? internet explorer??? non?
Mabelle a écrit :
Bonjour c'est probablement juste un mauvais calcul de tes marges ou padding.


c'est justement le truc... j'aimerais me passer du float:left pour pouvoir centrer le menu dans le div en fait ! donc pas de calcul de padding ou de marges à faire sauf pour la taille des différentes sections du menu...

Je suis sur qu'il y a une manière mais là comme j'ai dit en 1er post, je sèche grave !

Y'a surement un truc à faire avec la propriété inline-block mais je ne sais pas comment l'implémenter... mais peut être je me trompe et y'a plus simple ! Bien sur en tenant compte qu'il faut un petit espace entre les boutons principaux du menu... Smiley ohwell
Modifié par bond007lr (25 Jan 2011 - 15:47)
Alors moi j'ai un peu modifié ton code css et ça me parait un peu plus centré :

essaye ça :



#MenuDeroulant {
    margin: 0;
    padding: 0;
	z-index:1;
	width:942px; /* ici j'ai rajouté la longueur */
	}
	
	
    #MenuDeroulant li {
	    margin: 0 auto;
		float: left;
        list-style: none;
		}

    #MenuDeroulant li a {
        font: 12px Verdana;
		font-weight:bold;			
		display:block;
        background: #f18903; 
        padding: 7px 12px;
		margin-right:3px; /* ici j'ai remplacé 4px par 3px */
		text-decoration: none;
        width: 130px; /* ici j'ai remplacé 128px par 130px */
        color: #FFFFFF; 
		white-space: nowrap;
		}
youbaba a écrit :
Alors moi j'ai un peu modifié ton code css et ça me parait un peu plus centré :

essaye ça :



#MenuDeroulant {
    margin: 0;
    padding: 0;
	z-index:1;
	width:942px; /* ici j'ai rajouté la longueur */
	}
	
	
    #MenuDeroulant li {
	    margin: 0 auto;
		float: left;
        list-style: none;
		}

    #MenuDeroulant li a {
        font: 12px Verdana;
		font-weight:bold;			
		display:block;
        background: #f18903; 
        padding: 7px 12px;
		margin-right:3px; /* ici j'ai remplacé 4px par 3px */
		text-decoration: none;
        width: 130px; /* ici j'ai remplacé 128px par 130px */
        color: #FFFFFF; 
		white-space: nowrap;
		}


C'est clair que c'est nettement mieux ! merci Youbaba d'avoir testé !!!
Le souci c'est que les espaces entre les boutons principaux de menu sont nettement moins grand dû à margin-right:3px...

j'avais déjà fait kk chose en recalculant les marges + en fonction des width etc etc... mais cela m'échappe quand même... qu'on est obligé de faire ça en float:left à chaque fois...
Sujet clos
Aller à