Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

JPFA

[Resolvido]Menu horizontal não consigo centrar

Recommended Posts

JPFA

Boas , estou a criar um site e tirei um menu horizontal da net só que o problema é que não estou a conseguir centra-lo .

O código que estou a por no css é este :

#pcm{display:none;}
ul.pureCssMenu ul{display:none;
}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
   margin:0px;
   list-style:none;
   padding:0px 2px 2px 0px;
   background-color:#fff;
   background-repeat:repeat;
   border-color:#808080;
   border-width:1px;
   border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
   display:block;
   zoom:1;
   height:21px;
   float: center;
}
ul.pureCssMenu ul{
   width:134.4px;
}
ul.pureCssMenu li{
   display:block;
   margin:2px 0px 0px 2px;
   font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
   display:block;
   vertical-align:middle;
   background-color:#FFFFFF;
   border-width:1px;
   border-color:#fff;
   border-style:solid;
   text-align:center;
   text-decoration:none;
   padding:2px 5px 5px 10px;
   _padding-left:0;
   font:normal 11px Tahoma;
   color: #000;
   text-decoration:none;
   cursor:default;
}
ul.pureCssMenu span{
   overflow:hidden;
}
ul.pureCssMenu li {
   float:left;
}
ul.pureCssMenu ul li {
   float:none;
}
ul.pureCssMenu ul a {
   text-align:left;
   white-space:nowrap;
}
ul.pureCssMenu li.sep{
   text-align:center;
   padding:0px;
   line-height:0;
   height:100%;
}
ul.pureCssMenu li.sep span{
   float:none;   padding-right:0;
   width:3px;
   height:100%;
   display:inline-block;
   background-color:#808080;   background-image:none;}
ul.pureCssMenu ul li.sep span{
   width:100%;
   height:3px;
}
ul.pureCssMenu li:hover{
   position:relative;
}
ul.pureCssMenu li:hover>a{
   background-color:#DBF0F9;
   border-color:#45ADE4;
   border-style:solid;
   font:normal 11px Tahoma;
   color: #444;
   text-decoration:none;
}
ul.pureCssMenu li a:hover{
   position:relative;
   background-color:#DBF0F9;
   border-color:#45ADE4;
   border-style:solid;
   font:normal 11px Tahoma;
   color: #444;
   text-decoration:none;
}
ul.pureCssMenu li.dis a {
   color: #557D4F !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
ul.pureCssMenu span{
   display:block;
   background-image:url(images/menu/arrv_white.gif);
   background-position:right center;
   background-repeat: no-repeat;
   padding-right:9px;}
ul.pureCssMenu ul span{background-image:url(images/menu/arr_black.gif)}
ul.pureCssMenu ul li:hover > a span{   background-image:url(images/menu/arr_white.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(images/menu/arr_white.gif)}
ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(images/menu/arr_black.gif)}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:23px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(images/menu/btn3.jpg);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(images/menu/btn4.jpg);
font:normal 11px Tahoma;
color:#eee;
}
ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
   padding:0px 0px 0px 0px;
}
ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}

e o codigo do html que estou a por é este:

<ul class="pureCssMenu pureCssMenum0">
   <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Principal</a></li>
   <ul class="pureCssMenum">
      
      <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Supported Browsers</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul class="pureCssMenum">
         <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Windows OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
         <ul class="pureCssMenum">
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Chrome</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Mozilla</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Opera</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Netscape Navigator</a></li>
         </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
         <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>MAC OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
         <ul class="pureCssMenum">
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>
         </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
         <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Unix/Linux OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
         <ul class="pureCssMenum">
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Konqueror</a></li>
         </ul>
         <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Produtos</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="pureCssMenum">
      <li class="pureCssMenui"><a class="pureCssMenui" href="#">Computadores</a></li>
      <li class="pureCssMenui"><a class="pureCssMenui" href="#">Monitores</a></li>
      <li class="pureCssMenui"><a class="pureCssMenui" href="#">Impressoras</a></li>
      <li class="pureCssMenui"><a class="pureCssMenui" href="#">Periféricos</a></li>
      <li class="pureCssMenui"><a class="pureCssMenui" href="#">Software</a></li>
      <li class="pureCssMenui"><a class="pureCssMenui" href="#">Fotografia</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contactos</a></li>
</ul>

Preciso de ajuda urgentemente ,

Cumps

Share this post


Link to post
Share on other sites
green angel

Eu diria que a maneira mais prática de resolver esse problema será colocares o menu dentro de uma div, sendo que essa div estará associada ao seguinte CSS:

.centra_menu {
position:absolute;
height:21px; /*altura do menu*/
width:330px;  /*comprimento do menu*/
margin: 0px 0px 0px -165px;  /*o último valor é metade do comprimento do menu*/
left:50%;
text-align:left;
}

Código para a div:

<div class="centra_menu">
<!--Código do menu-->
</div>

Share this post


Link to post
Share on other sites
JPFA

Ajuda urgente é quando se paga para isso.

Foi uma maneira de dizer , mas bela ajuda :)

Obrigado "green angel" vou exprimentar,

Share this post


Link to post
Share on other sites
JPFA

Como eu tinha dito antes foi uma maneira de dizer mas se levas-te a mal ok , obrigado pela a chamada de atenção .

Share this post


Link to post
Share on other sites
JPFA

Já consegui centrar, mas não foi pelo "div" tive que andar a mexer pixel por pixel neste código .

ul.pureCssMenum0 {

background-color:transparent;

border-width:0px;

padding:0px 0px 8px 445px;

:)

Share this post


Link to post
Share on other sites
Caya

Já consegui centrar, mas não foi pelo "div" tive que andar a mexer pixel por pixel neste código .

;)

Isso é uma forma incorrecta de resolver o problema.

Deves usar a sugestão green angel, ou então, metes esse código dentro de uma div e no CSS:

#divx {
margin: 0 auto;
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.