2
respostas

Footer não fica lá em baixo

Meu footer só fica no topo e escondido. Eu acho que é pq eu usei position: absolute; em umas div dentro da mainInsira aqui a descrição dessa imagem para ajudar na acessibilidade

Não estou conseguindo mandar o codigo aqui. Está ultrapassando o numero de caracteres. Então vou deixar no meu drive o projeto inteiro https://drive.google.com/drive/folders/1obZsksD3lSEkAhbQ4LYJavj7vVCJPgQe?usp=sharing

2 respostas

Olá, meu chará Renan.

Tudo bem?

Você pode resolver utilizando o display-flex. Você tem duas classes que estão com o position-absolute a classe: .principal_capaHorizontal e a .principal_capaVertical, eu alterei de absolute para relative. Ai na main que já tem uma classe .principal eu coloquei o display-flex, por último eu comentei a div que tem a classe .principal_capaHorizontal no HTML pois ela estava empurrando os elementos ai você precisa ver e ajustar.

Vou deixar aqui os códigos completos do arquivo curriculo.html e style.css com as alterações que eu fiz.

Você pode baixar o seu projeto com as alterações feitas por mim nesse link:

https://github.com/Renangenito/Portif-lio-curricuo-chara-Renan/archive/refs/heads/main.zip

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Resultado:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Agora você precisa ajustar alguns espaçamentos e o que mais preferir. Tem que tomar muito cuidado quando for utilizar o position: absolute e saber utilizá-lo, pois ele tira essa hierarquia das ordens das tags, e podemos se perder facilmente. O ideal se puder, é tentar resolver com o display-flex mesmo, além de ser mais prático, fica mais organizado.

Lembrando que eu só ajustei os arquivos: curriculo.html e style.css.

Espero ter ajudado. Valeu Renan.

eu dei uma olhada no seu código, e realmente o position absolute estava causando esse erro. Então eu removi ele de todo código e substitui pelo display grid.

utilizei esse código para corrigir esse erro.

.principal {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: 10% 30% 30% 30%;
}

.principal_capaHorizontal {
    width: 100%;
    background-color: #272727;
    padding-top: 2em;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
    text-align: center;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

.principal_capaVertical {
    background-color: #22D4FD;
    width: 20%;
    display: grid;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 5;
}

.principal_capaVertical {
    background-color: #22D4FD;
    width: 20%;
    display: grid;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 5;
}

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