Entrar Ainda não tem acesso?
4
respostas

Desafio navegador no INDEX.HTML

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Finalizando a página de produtos e atividade Conclusão

por Marina Sancovich
| 20.7k xp | 31 posts

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
por Alexandre de Souza Serrano
| 238.8k xp | 181 posts
Coordenador de TI

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!

por Marina Sancovich
| 20.7k xp | 31 posts

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 :(

por Alexandre de Souza Serrano
| 238.8k xp | 181 posts
Coordenador de TI

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.

por Marina Sancovich
| 20.7k xp | 31 posts

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??? :(