Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Posicionamento de menu de navegação no centro

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Posicionamento mais a fundo e atividade Posicionamento mais a fundo

por Ian Alt de Oliveira
| 42.1k xp | 9 posts
Estagiario

Olá! Estou desenvolvendo uma página cujo menu de navegação para os demais sites fique centralizado no meio da tela, abaixo do título principal.Segue abaixo o HTML:

            <!-- Menu de navegação -->
            <nav>
                <ul id=menu class="menunavControls menuNav">
                      <li><a href="site-home.html">Home</a></li>
                      <li><a href="site-mundo.html">O Mundo</a></li>
                      <li><a href="site-personagens.html">Personagens</a></li>
                      <li><a class="selecionado" href="site-desenvolvedores.html">Desenvolvedores</a></li>
                </ul>
            </nav>
            <!-- Fim do menu de navegação -->

e o CSS que estou usando:

/* INÍCIO - Menu de navegação */
ul#menu {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    background-color: black;
}
ul#menu li a { 
    display: block;
    text-align: center;
    padding:  10px 10px;
    text-decoration: none;
    border-bottom-style: solid;
    border-bottom-color: #0080FF;
    border-bottom-width: 5px;
}
ul#menu li {
    float: left;
}
ul#menu li a:hover {
    background-color: #0080FF;
    color: white;
}
.selecionado {
    background-color: #0080FF;
}
.menuNav { text-align: center; }
.menunavControls { display: inline-block; }
/* FIM - Menu de navegação */

Podem me ajudar? Aceito sugestões para deixar o código mais limpo!

4 respostas
solução!
por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Olá, Ian.

Primeiro só vou comentar alguns pontos de melhoria no seu CSS e HTML.

Melhorias no CSS e HTML

  • Evite adicionar id nos elementos para utilizar ele no seu CSS. Utilizamos o id no HTML só para referência um link entre dois elementos da mesma página ou pra ser usado no JS -- mesmo no JS eu não vejo necessidade se você escrever bem suas class.
  • Evite ao máximo criar seletores que relacionam uma tag porque você travará o CSS a estrutura do HTML (ul#menu li a), nesse caso imagine que você altere sua ul por um ol, se isso acontecer você também terá que alterar o seu CSS.

Parabéns pelo código bem indentado, isso me deixa muito feliz e muitos outros desenvolvedores que trabalha com você :-)

Abaixo eu peguei a estrura do seu HTML e fiz um CSS pequeno pra mostrar como você pode centralizar ele na tela no sentido horizontal (eixo x).

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Exemplo de como centralizar o menu</title>

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/menu.css">
</head>
<body>
  <nav>
    <ul class="menu">
          <li class="menu-item">
            <a href="site-home.html">Home</a>
          </li>
          <li class="menu-item">
            <a href="site-mundo.html">O Mundo</a>
          </li>
          <li class="menu-item">
            <a href="site-personagens.html">Personagens</a>
          </li>
          <li class="menu-item">
            <a class="selecionado" href="site-desenvolvedores.html">Desenvolvedores</a>
          </li>
    </ul>
  </nav>
</body>
</html>

reset.css

* {
  margin: 0;
  padding: 0;
  border: none;
}

menu.css

.menu {
  text-align: center;
}

.menu-item {
  display: inline-block;
}

No meu ponto de vista um dos maiores desafios quando estamos desenvolvendo nossas telas com CSS são as essas coisas de alinhar o elementos na tela. Se quiser complementar seus estudos da Alura você pode dar uma olhada em uns vídeos no YouTube que eu fiz sobre as propriedade de posicionamento do CSS: Pare de chutar e aprenda as propriedades de posicionamento do CSS

por Ian Alt de Oliveira
| 42.1k xp | 9 posts
Estagiario

Oi Marco, eae!

Eu fiz uma alteração aqui no código. Poderia avaliar?

Eu mantive a id no ul porque não achei outro jeito de executar a mudança no background do item com o hover. Segue abaixo:

                <!-- Menu de navegação -->
                <nav>
                    <ul id="menu-navegacao" class="menu" class="menu-formatacao">
                          <li class="menu-item"><a href="site-home.html" class="menu-formatacao-item">Home</a></li>
                          <li class="menu-item"><a href="site-mundo.html" class="menu-formatacao-item">O Mundo</a></li>
                          <li class="menu-item"><a href="site-personagens.html" class="menu-formatacao-item">Personagens</a></li>
                          <li class="menu-item"><a href="site-desenvolvedores.html" class="menu-formatacao-item" class="selecionado">Desenvolvedores</a></li>
                    </ul>
                </nav>
                <!-- Fim do menu de navegação -->

CSS:

/* INÍCIO - Menu de navegação */
.menu {
    text-align: center;
}
.menu-item {
    display: inline-block;
}
.menu-formatacao {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    background-color: black;
}
.menu-formatacao-item {
    font-size: 30px;
    text-align: center;
    padding:  10px 10px;
    text-decoration: none;
    border-bottom-style: solid;
    border-bottom-color: #0080FF;
    border-bottom-width: 5px;
}
.selecionado {
    background-color: #0080FF;
}
ul#menu-navegacao li a:hover {
    background-color: #0080FF;
    color: white;
}
/* FIM - Menu de navegação */

Eu ainda tô tentado dominar a parte de classes, então aceito qualquer sugestão pra deixar o mais simples possível e manter ou melhorar a qualidade!

por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Aí sim Ian. Ficou muito melhor o código :-)

Bora continuar...

Vamos ver outro pontos de melhoria e boas práticas no seu código CSS e HTML:

Quando temos duas class ou mais em uma mesma tag não é uma boa ideia criar dois atributos class o correto é colocar todas as nossas classes dentro de um atributo separadas por espaço:

Seu código

<ul id="menu-navegacao" class="menu" class="menu-formatacao">

Minha sugestão

<ul id="menu-navegacao" class="menu menu-formatacao">

Sobre o hover não é necessário usar o id você pode usar a próprio classe que você já crio para o id, chamada menu-formatacao-item:

Seu código

ul#menu-navegacao li a:hover {
    background-color: #0080FF;
    color: white;
}

Minha sugestão

.menu-formatacao-item:hover {
    background-color: #0080FF;
    color: white;
}

Acho que por hora é isso. Sempre temos coisas pra melhorar em nossos código, mas sempre é bom lembrar que se o código está fácil de ler significa que a manutenção dele tem um alto potencial de ser fácil também.

Mas dúvida posta aí ;-)

por Ian Alt de Oliveira
| 42.1k xp | 9 posts
Estagiario

Muito obrigado, Marco! Organizei o CSS aproveitando as classes e pus em arquivos separados conforme sugerido pelo curso. Me ajudou bastante!