Menu Centralizado

drodrigo · Setembro 17, 2007

Bom dia galera.

Pessoal eu estou com uma dificuldade que pra mim está dificil mais creio que para vocês deva ser simples.

Seguinte eu estou tentando colocar o menu centralizado na página, que funcione em qualquer resolução ele tando sempre centralizado na página, e essa e minha difucldade, colocar ele na tabela para centralizar sem ta dando erro como está comigo.

Estarei enviando o código do menu para vocês verificarem, e me ajudar como faço para colocar ele dentro da tabela, como faço para colocar as tags e mais. Ok.

Claro se puder me ajudar nessa dúvida...

Abraços galera.

<!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" lang="pt-br" xml:lang="pt-br">
<head>
<meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial css,web design,web standards,webdesign,tableless" />
<meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." />
<meta name="author" content="Nick Rigby" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta name="robots" content="all" />
<meta name="language" content="pt-br" />
<meta name="ICBM" content="-22.975781,-43.193082" />
<meta name="DC.title" content="CSS para Web Design" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Horizontal Drop Down Menus - Parte 3</title>
<script type="text/javascript">
function IEHoverPseudo() {

    var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
    
    for (var i=0; i<navItems.length; i++) {
        if(navItems[i].className == "menuparent") {
            navItems[i].onmouseover=function() { this.className += " over"; }
            navItems[i].onmouseout=function() { this.className = "menuparent"; }
        }
    }

}
window.onload = IEHoverPseudo;

</script>

<style type="text/css">

body { font: normal 62.5% verdana; }

ul#primary-nav,
ul#primary-nav ul {
    margin: 0;
    padding: 0;
/*    width: 600px; */ /* Width of Menu Items */
    border-bottom: 0px; solid #ccc;
    background: #fff;   /* IE6 Bug */
/*    background: blue;  /* IE6 Bug */ cor do fundo dos menus
    font-size: 100%;
    }


ul#primary-nav li {
    position: relative;
    list-style: none;
    display: inline;
        float:left;
    }

ul#primary-nav li a {
    display: block;
    text-decoration: none;
        float:left;
    color: #777;
/*    color: red;   cor das letras do menu */
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 1;
    }

/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */

ul#primary-nav ul {
    position: absolute;
    display: none;
    left: 0px;   /* Set 1px less than menu width */
    top: 23px;
    }

ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul#primary-nav li:hover ul ul ,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; top: 17px;} /* Hide sub-menus initially */

ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */

ul#primary-nav li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; }
/* ul#primary-nav li.menuparent { background: yellow url(arrow-down.gif) right center no-repeat; } Cor dos que tem o -> */

ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #f9f9f9; }
/*ul#primary-nav li.over { background-color: blue } cor da selecao quando tem submenu */

ul#primary-nav li a:hover { color: #E2144A;  }
/*ul#primary-nav li a:hover { color: blue; background-color: blue} cor da letra dos menus com selecao / cor do fundo */

</style>
</head>
<body>
<h1>EXEMPLO DE MENU PRINCIPAL NA HORIZONTAL</h1>
<h2>Adaptação feita por:</h2>Marcos Antunes Moleiro<br><br>
<ul id="primary-nav">
  <li><a href="#">Home</a></li>

  <li class="menuparent"><a href="#">About   </a>
    <ul>
      <li><a href="#">History</a></li>

      <li><a href="#">Team</a></li>
      <li><a href="#">Offices</a></li>
    </ul>
  </li>

  <li class="menuparent"><a href="#">Services   </a>
    <ul>
      <li><a href="#">Web Design</a></li>

      <li><a href="#">Internet Marketing</a></li>
      <li class="menuparent"><a href="#">Hosting   </a>
        <ul>
          <li><a href="#">Dedicated</a></li>

          <li><a href="#">Virtual</a></li>
          <li><a href="#">Shared</a></li>

          <li><a href="http://www.uem.br" target="_blank">Managed</a></li>
        </ul>
      </li>
      <li><a href="#">Domain Names</a></li>
      <li><a href="#">Broadband</a></li>

    </ul>
  </li>

  <li class="menuparent"><a href="#">Contact Us   </a>
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>

      <li><a href="#">Australia</a></li>

    </ul>
  </li>
</ul>
</body>
</html>

.Andreia. · Setembro 17, 2007

O que você pode tentar fazer, que eu não testei aqui mas creio que funcione, é colocar esse menu em uma tabela e então.. centralizar esta tabela

Entrar

Menu Centralizado

Pergunta

drodrigo

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

.Andreia.

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades