Entrar Ainda não tem acesso?
5
respostas

Website com menu lateral

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

por Douglas Willian e Oliveira Lopes
| 90.3k xp | 5 posts

Estou construindo uma página que possui uma menu lateral fixo á esquerda com aproximadamente 200px de largura. Desejo agora criar um footer do tamanho total da minha página menos esses 200px do menu lateral. Dado que já tenho o footer com as seguintes configurações:

position: absolute,
left: 0,
bottom: 0,
right: 0

Qual a melhor alternativa de alteração nesse elemento para que ele seja adaptado a essa minha realidade de não ocupar 100% da tela, apenas uma porção e com isso meu footer não ficar "atrás" do menu lateral por ser um position absolute?

5 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Douglas, tudo bem?

Eu sugeriria você a sua as medidas em rem quando se tratar de largura e altura em com vh, são medidas mais adequadas para proporções grandes e elas conseguem ser responsivas, veja mais aqui: https://www.w3schools.com/cssref/css_units.asp

Nesse caso, já que o seu menu lateral é fixo, porque não está usando o position fixed? No caso de um menu fixo o position fixedé o idicado. E sobre as medidas, pode ser assim:

.menuLateral{
    width: 20rem;
}

.layout{
    width: 80rem;
}

.footer{
    width: 80rem;
}

O position absolute causa muito efeito colateral, evite usar ele para criar um menu fixo, pois evitará que o footer fica em cima do contexto do menu.

Se precisar de lguma ajuda é só falar :}

por Douglas Willian e Oliveira Lopes
| 90.3k xp | 5 posts

Obrigado Laís!

Então você sugere que eu utilize um position fixed no footer ? Outra coisa, a medida que eu for pensando responsivamente, terei que altera esses valores de largura do meu footer pensando em cada tamanho de tela pra celular neh ?

Outra coisa, em todos os casos ou em quais casos é melhor px, rem, vw ou vh ?

por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Douglas!

Isso vai depender se o seu footer vai ser fixo, se sim, coloque o position fixed.

Sim, essas medidas serão alteradas, mas não é nada complicado demais, você vai colocar as medidas proprocionais ao devices que queira que o seu site sejs responsivo.

Sobre as medidas, o rem eu gosto de utilizar para larguras assim como porcentagens, pois elas respondem bem ao responsivo. O rem - o r* vem de *root: root em(no caso, em é a medida em) que é igual ao tamanho da fonte fixada ao elemento-raiz (quase sempre html ou body. rem também é muito bom para display grids e flex por sua resposta ao layout flexivel.

A vh e vw são medidas que, assim como o rem respondem ao responsivo, a vh para altura e vw para largura, ambas as medidas pegam as medidas da viewport da tela, ou seja, a medida vw é igual a 1/100 da largura da viewport. por exemplo, se a largura do navegador é 900px, 1vw equivale a 9px e, analogamente, se a altura da viewport é 750px, 1vw equivale a 7.5px.

Com prática e testes vocês vai entender melhor o funcionamento de cada medida, mas sempre consultar a documentação, vai ter ajuda muito: https://www.w3schools.com/cssref/css_units.asp

Espero ter te ajudado!

por Douglas Willian e Oliveira Lopes
| 90.3k xp | 5 posts

Obrigado Laís!

Sim o meu footer e o meu menu lateral vão ser fixos e mudei a posição, mas uma coisa que queria confirmar, na primeira resposta você sugeriu: 

// tamanho do menua
.menuLateral{
     position:fixed
    width: 20rem;
}

.layout{
    width: 80rem;
}

// fotter com a diferença do tamanho do meu lateral
.footer{
     position: fixed
    width: 80rem;
}

Essa classe layout você se refere ao que ?

por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Douglas, eu acima fiz um adaptação de uma lógica a ser seguida de um layout, veja esse exemplo que fiz, pensando no seu problema:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      div {
        min-height: 100vh;
        width: 100%;
      }
      .menuLateral {
        position: fixed;
        height: 45rem;
        width: 10rem;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: violet;
      }

      .layout {
        width: 67.3rem;
        height: 50rem;
        background-color: tomato;
        left: 0;
        padding-right: 9.5rem;
      }

      .footer {
        position: fixed;
        width: 67.3rem;
        height: 5rem;
        background-color: turquoise;
        bottom: 0;
        right: 0;
      }
    </style>
    <div>
      <section class="layout">
        <aside class="menuLateral"></aside>
        <footer class="footer"></footer>
      </section>
    </div>
  </body>
</html>

Não está totalmente ok pois falta o reset.css, mas dá para compreender melhor o que discutimos nesse tópico. Coloquei uma altura e uma largura total para página dentro da tag div e dentro dela eu separei pedaços para as seções do site. Teste e me fala se conseguiu compreender melhor as divisões do layout :}