Reset disturbing to center

Asked

Viewed 42 times

0

I have a problem and a little shame in asking for help.

Today I still solved a similar problem in: Error when centralizing ul in div

But I decided just by doing margin:auto in div and centering a ul.

Now, the problem has been reversed. is the margin: auto is who is not allowing the centralization of nav.

I’ve been eliminating almost everything in my code until I got to this piece of code.

What I do?

* {
  padding:0 auto;
  margin:0 auto;
  font-family: Arial;
}

body {	
  color: #CCC;
}

ul {
    list-style-type:none;
    padding:0;
}

a, a:hover {
    text-decoration:none;
    color:#FFF;    
}

.menuNav {
  height:50px;
  margin: 0 auto;
  background-color:#3E4095;	
}

ul li.menuTopo {
    float:left;
  width:166.6px;
    height:50px;
    border-left: #005E9C 1px solid;     
}

ul li.menuTopo:last-child {	
  border-right: #005E9C 1px solid;
}

ul li.menuTopo a {
  width:166.6px;
    height:50px;
    line-height:50px;
    display:inline-block;
    vertical-align:middle;  
    text-align:center;
    color: #FFF;
  background-color:#3E4095;	
}

ul li.menuTopo a:hover, ul li.menuBase a:hover {
    color: #FFF;
    background-color:#CCC;
}
<nav class="menuNav">
  <ul class="menuUlTopo">
    <li class="menuTopo"><a href="principal.php" title="Principal">Principal</a></li>
    <li class="menuTopo"><a href="administradoresMenu.php" title="Administradores">Administradores</a></li>
    <li class="menuTopo"><a href="clientesMenu.php" title="Clientes">Clientes</a></li>
    <li class="menuTopo"><a href="imoveisMenu.php" title="Imóveis">Imóveis</a></li>
    <li class="menuTopo"><a href="tiposMenu.php" title="Tipos de Imóveis">Tipos de Imóveis</a></li>
    <li class="menuTopo"><a href="emails.php?acao=listar" title="E-mails">E-mails</a></li>
  </ul>
</nav>

css3

  • Pro margin 0 auto work has to set an absolute width (not below to be percentage)

  • .menuNav { width:1024px; height:50px; margin: 0 auto; background-color:#3E4095; } Did not work

  • If I take the float: left das li’s, then the menu centers right. And if I take the margin: auto from Reset, it also works. But neither can I do!

  • Then put float:None on . menuNav

  • same thing, but . menuNav is not floating. Only the li’s

2 answers

0

A possible solution is to take the margin: 0 auto; of the element .menuNav and in its ul .menuUlTopo add margin: 0 auto; and width: 1030px;

  • It didn’t work out that way!

  • @Carlosrocha Pelo código that I have available in the question is centered do not know what has before this nav?

  • There’s nothing else. That’s all the code.

  • It failed to tell the size of ul within the Nav. The Nav 100%, already ul 1007px

  • Did you click on the code word in my comment to see how it looked? I just copied your question code and pasted there and made the changes!

0

I got.

.menuNav {
      margin: auto;
      width:1007px;
      background-color:#3E4095; 
}

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.