Ir para o conteúdo
  • 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

Mensagens Recomendadas

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

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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>

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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;

:)

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros 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;
}

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.