bonjour
margin: auto est sensé centrer le menu mais là avec mon menu horizontal déroulant possédant des sous-menus, je n'y parviens pas et j'arrive par à le centrer en fonction de la page et de son contenu.
Quelqu'un saurait me dire la marche à suivre pour y arriver sur les différents nabvigateurs ?
D'avance merci pour votre aide
le menu est sur cette page : http://www.coeuraccords.com/CLCA/pages/accueil.html
voici le code css du menu
Modifié par omzen (29 Jun 2010 - 00:04)
margin: auto est sensé centrer le menu mais là avec mon menu horizontal déroulant possédant des sous-menus, je n'y parviens pas et j'arrive par à le centrer en fonction de la page et de son contenu.
Quelqu'un saurait me dire la marche à suivre pour y arriver sur les différents nabvigateurs ?
D'avance merci pour votre aide
le menu est sur cette page : http://www.coeuraccords.com/CLCA/pages/accueil.html
voici le code css du menu
#menu {
width: 850px;
height : 30px;
position: relative;
marginr: auto;
list-style : none;
line-height : 30px; /* définit une hauteur pour chaque élément */
font-family : Arial;
font-size : 14px; /* hauteur du texte : 12 pixels */
z-index: 20;
}
#menu ul { /* Liste */
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none;
line-height : 25px; /* définit une hauteur pour chaque élément */
}
#menu a { /* Contenu des listes */
display : block; /* Les liens deviennent des balises de type block */
padding : 0;
color : #013082; /* couleur du texte */
background : #EAF2F5 ;
border: 1px solid white;
text-decoration : none;
}
#menu li { /* Éléments des listes */
float : left;
width : 120px;
background: #EAF2F5;
text-align:center
}
#menu a.accueil:hover {
color : white ;
background : #FA0400 ;
}#menu a.troupe:hover {
color : white ;
background : #FCA800 ;
}#menu a.buto:hover {
color : #FFC0CB ;
background : #FCFF00 ;
}#menu a.handicap:hover {
color : white ;
background : #01BF2A ;
}#menu a.marionnette:hover {
color : white ;
background : #013082;
}#menu a.spectacle:hover {
color : white ;
background : #4B0082 ;
}#menu a.contact:hover {
color : white ;
background : #8A2BE2 ;
}#menu a.accueil:active {
color : #EAF2F5 ;
background : red ;
}#menu a.buto:active {
color : #EAF2F5 ;
background : black ;
}#menu a.troupe:active {
color : #EAF2F5 ;
background : yellow ;
}#menu a.handicap:active {
color : #EAF2F5 ;
background : green ;
}#menu a.marionnette:active {
color : #EAF2F5 ;
background : blue ;
}#menu a.spectacle:active {
color : #EAF2F5 ;
background : purple ;
}#menu a.contact:active {
color : #EAF2F5 ;
background : grey ;
}#menu li ul { /* Sous-listes */
position: absolute;
width: 120px;
left: -999em;
z-index: 30;
}#menu ul li { /* Éléments des listes */
float : left;
width : 120px;
background: #EAF2F5;
text-align:center
}#menu ul li ul { /* Sous-listes */
position: absolute;
width: 120px;
left: -2em;
z-index: 30;
}#menu ul li { /* (Sous-liste de Sous-listes) Éléments des listes */
float:left;
margin-right:172px;
position:relative;
}#menu ul li ul li{ /* Sous-liste des Sous-listes */
position:relative;
margin-top: -1px;
z-index:50;
}#menu li ul ul {
margin: -20px 0 0 120px;
}#menu a:hover { /* Lorsque la souris passe sur un des liens */
color: black; /* On passe le texte en blanc... */
background: #FFC0CB;
font-weight : bold; /* texte en gras */
}#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
}#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
left: auto;
min-height: 0;
}
Modifié par omzen (29 Jun 2010 - 00:04)
