Ir para conteúdo

POWERED BY:

Arquivado

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

jnejunior

[Resolvido] deixar ul centralizada na #div

Por , em Desenvolvimento frontend

Recommended Posts

jnejunior    1

jnejunior
Postado

ae galera...

 

como deixar minha ul centralizada no box #nav?

<!doctype html>
<html lang="pt-br">
 <head>
   <title>EBDT :: Explore seus conhecimentos</title>
   <meta charset="utf-8">
   <style type="text/css" media="screen">
     * { list-style: none; margin: 0; padding: 0; }
     nav#menuPrincipal {
       border: 1px solid #c7c7c7;
       display: block;
       font: bold 11px Arial;
       height: 40px;
       margin: 0 auto;
       position: relative;
       text-transform: uppercase;
       width: 600px;
       background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(235,235,235)), color-stop(0.5, rgb(250,250,250))); /* Chrome */
       -webkit-box-shadow: 0 0 10px #999;
       box-shadow: 0 0 10px #999;
       background-image: -moz-linear-gradient(center bottom, rgb(235,235,235) 50%, rgb(250,250,250) 50%); /* FF */
       -moz-box-shadow: 0 0 10px #999;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#fafafa'); /* IE */
     }

     nav#menuPrincipal ul li {
       display: block;
       float: left;
       margin-right: 1px;
     }

     nav#menuPrincipal ul li a {
       color : #3a3a3a;
       display: block;
       float: left;
       height: 26px;
       padding: 14px 20px 0 20px;
       text-decoration: none;
     }

     nav#menuPrincipal ul li a:hover, nav#menuPrincipal ul li .current {
       background: #e1e1e1;
       color: #333;
     }

   </style>
 </head>
 <body>
 <nav id="menuPrincipal">
   <ul>
     <li><a href="#" class="current">início</a></li>
     <li><a href="#">envie sua video aulas</a></li>
     <li><a href="#">downloads</a></li>
     <li><a href="#">artigos web</a></li>
     <li><a href="#">contato</a></li>
   </ul>
 </nav>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Alternativa 1:

ul { text-align: center; }
li { display: inline; } /* retire o float */

 

 

Alternativa 2:

ul {
   margin: auto;
   width: 135463543548341px; /* É obrigatório definir um valor para width neste caso */
}

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

jnejunior    1

jnejunior
Postado

Alternativa 2:

ul {
   margin: auto;
   width: 135463543548341px; /* É obrigatório definir um valor para width neste caso */
}

 

usei a segunda alternativa pois a primeira não funcionou, mas tem um porem... se eu definir um tamanho para a div#nav não fica centralizado, e preciso definir um tamanho para o div#nav...

Compartilhar este post

Link para o post
Compartilhar em outros sites

jnejunior    1

jnejunior
Postado

 

usei a segunda alternativa pois a primeira não funcionou, mas tem um porem... se eu definir um tamanho para a div#nav não fica centralizado, e preciso definir um tamanho para o div#nav...

 

consegui fazer, me diz se ta certo....

 * { list-style: none; margin: 0; padding: 0; }

     body { background: #fff; }

     #logo { background-image: url(siteJr.png); height: 329px; margin: 0 auto; width: 1042px; }

     nav#menuPrincipal {
       border: 1px solid #c7c7c7;
       /*display: block;*/
       font: bold 11px Arial;
       height: 40px;
       margin: 0 auto;        
       text-transform: uppercase;
       width: 980px;
       /* aqui cria sombra e o gradiente lineal */
       background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(235,235,235)), color-stop(0.5, rgb(250,250,250))); /* Chrome */
       -webkit-box-shadow: 0 0 10px #999;
       box-shadow: 0 0 10px #999;
       background-image: -moz-linear-gradient(center bottom, rgb(235,235,235) 50%, rgb(250,250,250) 50%); /* FF */
       -moz-box-shadow: 0 0 10px #999;
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#fafafa'); /* IE */
     }

     nav#menuPrincipal ul { margin: 0 auto; text-align: center; width: 980px; }

     nav#menuPrincipal ul li {        
       display: inline;
       line-height: 40px;
       margin-right: -5px;
     }

     nav#menuPrincipal ul li a {
       color : #3a3a3a;
       display: inline;        
       padding: 14px 20px 14px 20px;
       text-decoration: none;
     }

     nav#menuPrincipal ul li a:hover, nav#menuPrincipal ul li .current {
       background: #989898;
       color: #fff;
     }

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito