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

[Bug] Incômodo com o FOOTER das páginas "login" e "cadastro"

Não é relevante para o conteúdo do curso em si, mas uma coisa que me incomodou muito visualmente é fato do footer não estar no fim da página.

O fato do footer estar posicionado incorretamente me dá um pouco de angústia, kkk. Eu sei um pouco de HTML e CSS e tentei resolver de múltiplas maneiras utilizando meus parcos conhecimentos, mas nada que desse algum resultado. Alguém conseguiu resolver esse bug?

2 respostas

Olá, Miguel! Entendo que o posicionamento incorreto do rodapé (footer) pode ser visualmente incômodo. Aqui estão algumas sugestões de como você pode corrigir isso usando CSS:

Posicionamento Fixo: Você pode fazer o rodapé permanecer na parte inferior da página, independentemente do conteúdo da página, usando a propriedade position: fixed; no CSS. Aqui está um exemplo de como você pode fazer isso:

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

Posicionamento Absoluto: Se você quiser que o rodapé seja empurrado para baixo quando o conteúdo excede a altura da página, você pode usar a propriedade position: absolute; em combinação com bottom: 0;. Por favor, note que a estrutura do seu HTML pode afetar a maneira como essas soluções funcionam. Se nenhuma dessas soluções funcionar para você, pode ser necessário ajustar a estrutura do seu HTML. Espero que isso ajude a resolver o seu problema!

solução!

Obrigado pela resposta! Consegui resolver o problema.

Sua dica foi muito valiosa, mas tive que seguir alguns passos para efetivamente aplicá-la nos templates do Alura Space:

  1. Criar uma pasta partials em alura-space/templates/usuarios;
  2. Criar dois novos templates: base.html no diretório usuarios e footer.html na pasta partials;

Pasta "partials" dentro dos templates dos usuários

3 - Modificar o footer.html, aplicando as mudanças sugeridas no tópico acima. Eis o que fiz:

<!-- Através da propriedade "style", aplicada na tag <footer>, defini uma posição absoluta (position: absolute) em conjunto com "bottom: 0", assim como recomendado -->
<footer class="rodape" style="position: absolute; bottom: 0;">
    <div class="rodape__icones">
        <a href="https://twitter.com/AluraOnline" target=”_blank” >
            <img src="{% static '/assets/ícones/1x/twitter.png' %}" alt="ícone twitter">
        </a>
        <a href="https://www.instagram.com/aluraonline/" target=”_blank” >
            <img src="{% static '/assets/ícones/1x/instagram.png' %}" alt="ícone instagram">
        </a>
    </div>
    <p class="rodape__texto">Desenvolvido por Fernando Flores | Estudante Alura</p>
</footer>
</footer>```

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