Problème centre menu css
flyad
-
RAD ZONE Messages postés 5362 Statut Contributeur -
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
Mon code CSS
Merci
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
4 réponses
-
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+
-
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>
-
-
??? 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+
