Nao consigo centralizar meu nav

Home › Fóruns › Desenvolvimento Web 2020 (HTML5+CSS3) › Nao consigo centralizar meu nav

Marcado: 

Visualizando 2 respostas da discussão
  • Autor
    Posts
    • 17 de setembro de 2021 às 11:17 #75629
      JOSE CORDEIRO NETO
      Participante

      olá, estou aprendendo sobre html com o curso antigo do curso em vídeo e me deparei com um problema. segui todos os passos exatamente iguais ao do video, entretanto meu nav nao centraliza na pagina, ele sempre fica meio a esquerda. até consegui deixar centralizado usando margin left mas acredito nao ser o ideal e gostaria de saber o correto. alguem poderia por favor me dizer exatamente o pq e como faze-lo pra que eu possa aprender? muito obrigado desde ja

      seguem os codigos

      HTML

      <div id=”interface”>

      <header id=”cabecalho”>
      <hgroup>
      <h1><br><br>Google Glass</h1>
      <h2>A revolução do Google está chegando</h2>
      </hgroup>

      imagem

      <nav id=”menu”>
      <h1>Menu Principal</h1>

      </nav>
      </header>

      CSS

      nav#menu {
      display: block;
      }

      nav#menu ul {
      list-style: none;
      text-transform: uppercase;
      position: absolute;
      top: -20px;
      }

      nav#menu li {
      display: inline-block;
      background-color: rgb(149, 148, 148);
      padding: 6px;
      margin: 2px;
      transition: background-color 0.3s;
      }

      nav#menu li:hover {
      background-color:greenyellow;
      }

      nav#menu h1 {
      display: none;
      }

      nav#menu a {
      color: black;
      text-decoration: none;
      }

      nav#menu a:hover {
      color: cornflowerblue;
      text-decoration: underline;
      }

    • 17 de setembro de 2021 às 11:24 #75630
      JOSE CORDEIRO NETO
      Participante

      Mandei errado na primeira, acho que vai dar certo agora

      HTML

      

<div id="interface">
<header id="cabecalho">
    <hgroup>
    <h1><br><br>Google Glass</h1>
    <h2>A revolução do Google está chegando</h2>
    </hgroup>
   
    <img id="icone" src="_imagens/glass-oculos-preto-peq.png" alt="imagem">

    <nav id="menu">
        <h1>Menu Principal</h1>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="specs.html">Especificações</a></li>
                <li><a href="fotos.html">Fotos</a></li>
                <li><a href="multimidia.html">Multimídia</a></li>
                <li><a href="fale-conosco.html">Fale conosco</a></li>    
            </ul>
    </nav>

</header>

CSS

nav#menu {
    display: block;    
}
nav#menu ul {    
    list-style: none;
    text-transform: uppercase;
    position: absolute;
    top: -20px;   
}
nav#menu li {
    display: inline-block;
    background-color: rgb(149, 148, 148);
    padding: 6px;
    margin: 2px;
    transition: background-color 0.3s;    
}
nav#menu li:hover {
    background-color:greenyellow;
}
nav#menu h1 {
    display: none;
}
nav#menu a {
    color: black;
    text-decoration: none;
}
nav#menu a:hover {
    color: cornflowerblue;
    text-decoration: underline;
}
    • 17 de setembro de 2021 às 19:47 #75656
      IcaroFilho
      Moderador

      Boa noite Jose.
      Olha, não ta dando certo por 2 motivos.
      imagina cada div como uma caixa. vc deve arruma-las hierarquicamente.
      Primeiro ponto. Pq escolheu desenvolver o menu após o hgroup ? isto te força a posicionar o seu menu na mão.
      vc pode simplesmente por o container nav antes.

      Segundo. que tudo esta dentro de uma DIV. logo, ela deve ser estilizada.

      e em ultimo, eu tenho como pratica, resetar o estilo com 

      *{
    margin: 0;
    padding: 0;
 }

      .
      Para centralizar vc pode usar display flex na div interface, e a propriedade justify-content: center;
      Ficando assim:
      CSS

              <style>
            *{
                margin: 0;
                padding: 0;
            }
            #interface{
                display: flex;
                justify-content: center;
            }
            nav#menu {
                display: block;    
            }
            nav#menu ul {    
                list-style: none;
                text-transform: uppercase;
            }
            nav#menu li {
                display: inline-block;
                background-color: rgb(149, 148, 148);
                padding: 6px;
                margin: 2px;
                transition: background-color 0.3s;    
            }
            nav#menu li:hover {
                background-color:greenyellow;
            }
            nav#menu h1 {
                display: none;
            }
            nav#menu a {
                color: black;
                text-decoration: none;
            }
            nav#menu a:hover {
                color: cornflowerblue;
                text-decoration: underline;
            }
        </style>

      HTML

          <body>
        <div id="interface">
            <header id="cabecalho">
                <nav id="menu">
                    <h1>Menu Principal</h1>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li><a href="specs.html">Especificações</a></li>
                            <li><a href="fotos.html">Fotos</a></li>
                            <li><a href="multimidia.html">Multimídia</a></li>
                            <li><a href="fale-conosco.html">Fale conosco</a></li>    
                        </ul>
                </nav>
                <hgroup>
                    <h1><br><br>Google Glass</h1>
                    <h2>A revolução do Google está chegando</h2>
                </hgroup>
                <img id="icone" src="_imagens/glass-oculos-preto-peq.png" alt="imagem">
            </header>
        </div>
    </body>
  • Autor
    Posts
Visualizando 2 respostas da discussão
  • Você deve fazer login para responder a este tópico.