4
respostas

Desafio navegador no INDEX.HTML

Pessoal, realizando o desafio proposto pelo professor de inserir um menu navegador no INDEX.HTML, surgiram algumas dúvidas as quais tentei tirar no outro tópico mas que acabou levando a uma outra situação...

Eu me baseei no produtos.css, porém ao replicar o código no style.css, fiquei na dúvida sobre manter o h1 dentro ou fora da div (acredito que o correto seja dentro, conforme o código), mas não consigo jogar o título de volta para a esquerda, como estava em sua posição inicial.

<div class="menu">    
                <h1 class="titulo-principal">Barbearia Alura</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato">Contato</a></li>
                    </ul>
                </nav>
            </div> 
.menu {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 0;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

Tentei alterar o

.titulo-principal {
    padding-left: 20px;
}

mas mesmo diminuindo o padding-left, não consigo jogá-lo o suficiente para a esquerda :(

4 respostas

Olá, Marina.

Você pode apertar F12 no seu browser que ele vai abrir uma janela com seu HTML e CSS. Você pode alterar a vontade e já ver como está ficando na tela acima.

Quando tiver do jeito que você quer, é só copiar o CSS para o código! ;)

Bons estudos!

Oi Alexandre!!! Obrigada pelo resposta! :)

Na verdade a dúvida não era bem essa rs

Mas sim sobre manter o h1 dentro ou fora da div :(

Sei que sua dúvida não foi essa, mas com a possibilidade de testar na própria tela com o F12, vc consegue testar várias possibilidades e verificar a melhor. :)

Tente colocar o h1 pra fora e mexer num padding só dele. Talvez algum padding (ou margin) externo esteja sendo adicionado.

Para chegar no resultado mais ou menos que eu esperava, precisei tirar o h1 de dentro da div:

<header>
            <h1 class="titulo-principal">Barbearia Alura</h1>
            <div class="menu">    
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato">Contato</a></li>
                    </ul>
                </nav>
            </div>    


        </header>

E usar no CSS um valor negativo:

nav {
    position: absolute;
    top: -64px;
    right: 22px;
}

Acredito que essa não seja a forma mais correta, certo??? :(

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software