Jump to content
Fórum Script Brasil
  • 0

Menu Centralizado


drodrigo
 Share

Question

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>

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.8k
    • Total Posts
      646.7k
×
×
  • Create New...