Problème centre menu css

flyad -  
RAD ZONE Messages postés 5362 Statut Contributeur -
Bonjour, j'ai mon menu qui est deroulant horizonta let je veux le centrer mais je n'arrive pas !

Mon code html 
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>


Mon code CSS 
#cssmenu{height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width: 500px; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width: 200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }



Merci
A voir également:

4 réponses

Réponse 1 / 4
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
Salut

tu donne un width ( que tu calcul en fonction de ton menu , dans ton exemple le width tournerait autour de 400px )
et tu met le margin auto au ul

tu modifie cette ligne quoi ;-) 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}


a+
0
flyad
 
Merci mai rien !
0
Réponse 2 / 4
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
c est que tu as du faire une erreur ! ;-)

voila le code complet 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
/*<![CDATA[*/
       #cssmenu
    {
    height: 37px;
    display: block;
    padding: 0;
    margin: 20px auto;
    border: 1px solid #000000;
    border-radius: 5px
    }
    #cssmenu>UL
    {
    list-style: none inside;
    padding: 0;
    margin: auto;
    width: 400px;
    }
    #cssmenu>UL>LI
    {
    list-style: none inside;
    padding: 0;
    margin: 0;
    float: left;
    display: block;
    position: relative;
    }
    #cssmenu>UL>LI>A
    {
    outline: none;
    display: block;
    position: relative;
    padding: 12px 20px;
    font: bold 13px/100% Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    }
    #cssmenu>UL>LI:first-child>A
    {
    border-radius: 5px 0 0 5px
    }
    #cssmenu>UL>LI>A:after
    {
    content: '';
    position: absolute;
    border-right: 1px solid #000000;
    top: -1px;
    bottom: -1px;
    right: -2px;
    z-index: 99;
    }
    #cssmenu UL LI.has-sub:hover>A:after
    {
    top: 0;
    bottom: 0;
    }
    #cssmenu>UL>LI.has-sub>A:before
    {
    content: '';
    position: absolute;
    top: 18px;
    right: 6px;
    border: 5px solid transparent;
    border-top: 5px solid #FFF;
    }
    #cssmenu>UL>LI.has-sub:hover>A:before
    {
    top: 19px;
    }
    #cssmenu UL LI.has-sub:hover>A
    {
    background: #3F3F3F;
    border-color: #3F3F3F;
    padding-bottom: 13px;
    padding-top: 13px;
    top: -1px;
    z-index: 999;
    }
    #cssmenu UL LI.has-sub:hover>UL, #cssmenu UL LI.has-sub:hover>DIV
    {
    display: block;
    }
    #cssmenu UL LI.has-sub>A:hover
    {
    background: #3F3F3F;
    border-color: #3F3F3F;
    }
    #cssmenu UL LI>UL, #cssmenu UL LI>DIV
    {
    display: none;
    width: 500px;
    position: absolute;
    top: 38px;
    padding: 10px 0;
    background: #3F3F3F;
    border-radius: 0 0 5px 5px
    z-index: 999;
    }
    #cssmenu UL LI>UL
    {
    width: 200px;
    }
    #cssmenu UL LI>UL LI
    {
    display: block;
    list-style: none inside;
    padding: 0;
    margin: 0;
    position: relative;
    }
    #cssmenu UL LI>UL LI A
    {
    outline: none;
    display: block;
    position: relative;
    margin: 0;
    padding: 8px 20px;
    font: 10pt Arial, Helvetica, sans-serif;
    color: #FFF;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    }

    /*]]>*/
    </style>
  </head>
  <body>
    <div id='cssmenu'>
      <ul>
        <li class='active '>
          <a href='index.html'><span>Home</span></a>
        </li>
        <li class='has-sub '>
          <a href='#'><span>Products</span></a>
          <ul>
            <li>
              <a href='#'><span>Product 1</span></a>
            </li>
            <li>
              <a href='#'><span>Product 2</span></a>
            </li>
          </ul>
        </li>
        <li>
          <a href='#'><span>About</span></a>
        </li>
        <li>
          <a href='#'><span>Contact</span></a>
        </li>
      </ul>
    </div>
  </body>
</html>

0
Réponse 3 / 4
flyad
 
J'ai perdu les couleur et cela fais un decalage !
0
Réponse 4 / 4
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
??? quelles couleurs ?, il n y en as pratiquement pas dans ton css , et celle qui y sont sont visible ( sub background ect )!

PS: attention avec les couleurs CSS3 en rgba , IE < 9 ne les lis pas !
voila un code qui passe ce probleme
pour un rgba(0,0,0,0.4)
background:none;
background-color:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
zoom:1;
mais bon la on s eloigne :-)

pareil pour le decalage ?? je ne vois pas de quoi tu parle ?? par rapport au code que tu as donne , je n en vois pas ?

a+
0
flyad
 
Avec ton premier code sachant que j'ai un style.css a pars du fichier html j'ai ceci !

http://img4.hostingpics.net/pics/651410Sanstitre.png
et quand je déroule cela me fais sa
http://img4.hostingpics.net/pics/260603Sanstitre.png
0
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
  
Avec ton premier code sachant que j'ai un style.css a pars du fichier html


;-)) et je le devine comment si tu ne le donne pas ! c est donc dans ce css externe que quelque chose provoque ces problemes !
il faut regarder les heritages CSS avec firebug pour trouver !

a+
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses