Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fritoocwb

Centralizar Menu

Recommended Posts

Olá a todos estou com problema para centralizar o menu de um template por favor peço ajuda, fiquei o dia inteiro hojê tentando resolver e nada .

 

Segue codigo

 

Index

 

<div id="top-menu">
<img src="images\logo.png" width="250" height="148" border="0" style="width:270px; z-index:999; position:absolute; float:left; display:block;" />
<div class="container">
<p align="right"><ul class="menu">
<li> <a href="slider-nivo.html" title=""> Home </a>
</li>
<li> <a href="features-html-elements.html" title=""> Sobre </a>
</li>
<li> <a href="typography.html" title=""> Chopeira </a>
</li>
<li> <a href="portfolio-three-column.html" title=""> Produtos </a>
</li>
<li> <a href="blog-with-right-sidebar.html" title=""> Contato </a>
</li>
</div>
</div>
</ul>
</div>
</p>

 

Css

 

 

#top-menu { width:100%; float:left; margin:0px; padding:0px; height:52px; position:relative; z-index:999; }
ul.menu { float:left; margin:0px; padding:0px; width:100%; }
ul.menu li { float:left; display:inline; margin:0px; padding:0px; height:52px; position:relative; }
ul.menu li a { text-shadow:none; float:left; font-size:14px; line-height:52px; text-transform:uppercase; padding:0px 27px; position:relative; z-index:1; transition:none; -moz-transition:none; -o-transition:none; -webkit-transition:none; }
ul.menu li.home a { width:31px; height:31px; margin:0px; padding:11px 15px 10px; font-size:0; text-align:center; }
ul.menu li:last-child { border:none; }
ul.menu li.home li a { text-align:left; }
ul.menu li .hoverL, ul.menu li .hoverR { opacity:0; filter:alpha(opacity=0); bottom:1; left:0; position:absolute; right:0; top:0; }
ul.menu li.current_page_item .hoverL, ul.menu li.current_page_item .hoverR, ul.menu li:hover .hoverL, ul.menu li:hover .hoverR { -webkit-transition: opacity 0.5s; -moz-transition:opacity 0.5s; -o-transition:opacity 0.5s; opacity:1; filter:alpha(opacity=100); }
ul.menu li ul { display:none; position:absolute; z-index:100; top:52px; left:0px; width:200px; padding:0px; margin:0px; }
ul.menu li ul li, ul.menu li.home ul li { height:auto; border-right:0px; clear:both; width:100%; }
ul.menu li ul li a, ul.menu li.home ul li a { font-size:12px; line-height:normal; line-height:20px; padding:10px 15px 9px; width:170px; }
ul.menu li.home ul li a { background:none; height:auto; }
ul.menu li ul li.current_page_item, ul.menu li ul li:hover { behavior:url(PIE.htc); }
ul.menu li ul ul { left:200px; top:-2px; }
ul.menu-rounded li { border:none; margin:10px 5px 10px; height:32px; border-radius:20px; behavior:url(PIE.htc); }
ul.menu-rounded li a { line-height:32px; text-shadow:none; padding:0px 23px; font-size:13px; }
ul.menu-rounded li.home.current_page_item { background:none; }
ul.menu-rounded li.home { margin:0px; }
ul.menu-rounded li.home, ul.menu-rounded li.home:hover { background:none; }
ul.menu-rounded li.home ul { top:52px; }
ul.menu-rounded li.hasSubmenu:hover { border-radius:20px 20px 0px 0px; }
ul.menu-rounded li ul { top:32px; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border-radius:0px 20px 20px 20px; behavior:url(PIE.htc); }
ul.menu-rounded li ul li { margin:0px; border-radius:0px; border:none; }
ul.menu-rounded li ul li a { padding:12px 15px 12px; font-weight:normal; }
ul.menu-rounded li ul ul { border-radius:20px; top:0px; behavior:url(PIE.htc); }
Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você deve tirar a tag <p> pois ela está com um align=right, isso vai dificultar.

Depois você está fechando suas tags erradas.. utilize assim:

<div id="top-menu">
     <img src="images\logo.png" .... display:block;" />
     <div class="container">
          <ul class="menu">
               <li> <a href="slider-nivo.html" title=""> Home </a> </li> 
               <li>  <a href="features-html-elements.html" title=""> Sobre </a> </li>
               <li> <a href="typography.html" title=""> Chopeira </a> </li>
               <li>  <a href="portfolio-three-column.html" title=""> Produtos </a> </li>
               <li> <a href="blog-with-right-sidebar.html" title=""> Contato </a> </li>
	  </ul>
    </div>
</div>

e o css essa é a parte importante:

#top-menu { width:100%; margin:0 auto; padding:0px; height:52px; position:relative; z-index:999; }
ul.menu { display:block; margin:0 auto; padding:0px; width:40%;}

altere o width do ul.menu conforme você ache melhor =D

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.