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

Rodapé da página não é formatado quando especifico o footer.

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Mais seletores e atividade Corrigindo estilo no blog.html

por João Pedro Fileti Barreto
| 193.1k xp | 64 posts
</aside>

        <footer id="rodape-pagina">
            João da Silva &copy; 2019

            <ul class="icones-sociais">

            <li><a href="https://github.com/git-joaodasilva" alt="Icone github"><img src="github.png"></a></li>

            <li><a href="https://twitter.com/twitter-joaodasilva"><img src="twitter.png" alt="Icone twitter"></a></li>

            <li><a href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508"><img src="linkedin.png" alt="Icone Linkedin"></a></li>
        </ul>

        </footer>
<footer id="rodape-pagina">
        João da Silva &copy; 2019

        <ul class="icones-sociais">

            <li><a href="https://github.com/git-joaodasilva" alt="Icone github"><img src="Alura - Aula 1/github.png"></a></li>

            <li><a href="https://twitter.com/twitter-joaodasilva"><img src="Alura - Aula 1/twitter.png" alt="Icone twitter"></a></li>

            <li><a href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508"><img src="Alura - Aula 1/linkedin.png" alt="Icone Linkedin"></a></li>

        </ul>


    </footer>
#rodape-pagina footer{

    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;

}

footer{
    background-color: #000;
    color: #F2FFFC;
    text-align: center;
}

Eu estou tentando separar o que é footer das tags e footer do rodapé da página, mas sempre que eu removo a linha "Footer" sem o id o rodapé da página não fica nos moldes do que escrevi no css. Por que?

11 respostas
por Instrutor
| 1132.1k xp | 1471 posts
Instrutor

João, bom dia!

No CSS abaixo a ordem de declaração está incorreta 

#rodape-pagina footer{
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
}

Não é necessário (nesse caso em específico) colocar #rodape-pagina footer{ porquê só existe um rodapé com o id #rodape-pagina , tente fazer da seguinte maneira para que o estilo se aplique só para ele e não para os footers do post

#rodape-pagina{
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
}

OU

 footer #rodape-pagina{
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
}

Espero ter ajudado, e bons estudos :D

por João Pedro Fileti Barreto
| 193.1k xp | 64 posts

Não funciona também. Tá difícil de solucionar aqui kkkk. Passei uma meia hora tentando.

por Instrutor
| 1132.1k xp | 1471 posts
Instrutor

João, você poderia disponibilizar seu código para que eu posso verificar?

por João Pedro Fileti Barreto
| 193.1k xp | 64 posts

Claro! Aqui está!

https://github.com/joao-fb/barreto/blob/master/D%C3%BAvida%20Alura

por João Pedro Fileti Barreto
| 193.1k xp | 64 posts

Descobri também que ao inspecionar não aparece o id="" do <footer id=""

por Instrutor
| 1132.1k xp | 1471 posts
Instrutor

João, acho que você criou o repositório privado, não consigo acessar ele através desse link. Tente deixá-lo público pra que eu possa verificar

por João Pedro Fileti Barreto
| 193.1k xp | 64 posts

Desculpa, o link certo é esse:

https://gist.github.com/joao-fb/412a7031353c0fe00a9593e0df6005a2

por João Pedro Fileti Barreto
| 193.1k xp | 64 posts

Agora foi... não sei porque. Estava fazendo a mesma coisa de antes. Pelo inspetor descobri que o id não estava aparecendo. Eu apaguei e reescrevi a mesma coisa e começou a aparecer. Depois removi o footer do #rodape-pagina footer e acabou dando certo. Só uma outra dúvida. Por que quando eu coloco .icones-sociais li{} dá certo, mas quando coloco #rodape-pagina footer não?

solução!
por Instrutor
| 1132.1k xp | 1471 posts
Instrutor

João, tente alterar o código abaixo, perceba que logo depois do footer tem um espaço, para que a aplicação do css funcione você tem que retirar esse esse espaço, ele possui outro significado dentro do css

footer #rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
}

Esse código acima (do seu css) procura todos os rodape-pagina que estejam dentro do footer, e não existe nenhum elemento assim no seu HTML, perceba que footer #rodape-pagina é diferente defooter#rodape-pagina tirar o espaço significa que você procura todos os footer que tenham o id rodape-pagina.

footer#rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;
}

Abaixo tem um link interessante sobre seletores do CSS, você também irá aprender sobre ele no curso de HTML e CSS II.

Documentação com especificação

Espero ter ajudado e bons estudos!

por João Pedro Fileti Barreto
| 193.1k xp | 64 posts

Valeu, Felipe! Ajudou para caramba!

por Instrutor
| 1132.1k xp | 1471 posts
Instrutor

Que bom que funcionou João, no comentário acima eu expliquei porque funcionou dessa vez!

E sobre sua questão, dá certo porque dentro da tag <ul class="icones-sociais"> existe uma tag li, porém dentro da tag <footer id="rodape-pagina"> não existe outro <footer> dentro dele. Ele em si já tem o id o correto seria declarar assim footer#rodape-pagina{} ou #rodape-pagina.

Espero ter ajudado e bons estudos! :D