Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Por que meu footer está com a borda no topo dele?

Não estou conseguindo achar o porquê do meu footer estar com a borda cinza fixada no topo dele, mesmo usando a resolução do exercício proposta.

https://gist.github.com/vkindrat/02543eb3557908242c77af68b4f94200

5 respostas

Oi, Vitor, boa noite.

É em qual página que isso tá acontecendo? Na blog?

Aguardo :}

Sim, na página blog.html.

Oi, Vitor.

Então, vi o teu código, vou te sugerir que você desmembre o seu arquivo cssblog.css e se atentar a mistura de estilização de classes em arquivos diferentes, como por exemplo, a classe leia-mais que deveria estar separada e junta da classe post-blog + .post-blog, num arquivo separado, porém, ela tá no arquivo site.

O que pode estar acontecendo é sobreposição de estilização e a sua alteração não está conseguindo ser lida. No final, você vai refatorar o seu código. Separar o código css é um boa prática.

Espero ter te ajudado! :}}}

Não entendi muito bem... Você poderia me explicar melhor? Eu retirei o leia-mais do site.css e coloquei somente no arquivo blog.css e não mudou nada.

solução!

Oi, Vitor, desculpa se não fui clara.

O seu desejo é qué a borda do seu footer fique igual a da página do instrutor? Eu to usando como referência a sua página: https://vkindrat.github.io/

No caso, a do instrutor, o footer fica no canto inferior esquerdo, com um efeito, não é?

O seu arquivo cssblog.css pode está dando esse problema. Observe que ele, por exemplo, está com:

<footer id="rodape-pagina">

Que tem a tag footer e a id rodape-pagina se referenciando à tag footer, certo? O seu arquivo CSS tem valores espalhados para tag footer assim como a id rodape-pagina. Isso pode estar em conflito:

footer {
    clear: both;
    position: fixed;
    bottom: 0;
    width: 100%

}
 aside, footer {
    padding: 20px;
}
#rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
}
footer{
color: #F2FFFC;
}

O CSS trabalha em cascata, ele vai lendo a sua estilização e adicionando. Ele tá lendo a sua esstilização mas está havendo um conflito de valores e níveis de especificidade. O que é especificidade: é que tag, id, class tem valores diferentes e isso vai influenciar na aplicação da sua estilização na página. Quando você usa id tem um valor, class tem outro, seletores universais outro... Veja aqui nesse link: https://developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity

Eu sugiro que você refatore o seu CSS, analise-o, use o código do instrutor como referência e vá testando.

Espero ter te ajudado e bons estudos! :}