Site com 3 colunas verticais, podendo trocar rapidamente as laterais (fixas ou responsivas)
Após muita, muita pesquisa, vou deixar um código de um template com 3 colunas verticais, sendo que a coluna do meio responde ao tamanho da janela e as laterais podem responder ao tamanho ou serem fixas (vai do gosto do desenvolvedor). Há também a possibilidade de alterar rapidamente a posição entre as colunas laterais, bastando alterar o float de cada uma delas, sem mexer na marcação. Motivo do post: Pode ser que ajude alguém com o mesmo problema. Postarei também para minhas consultas futuras. Motivo 2: O site do Maujor tem um bom exemplo (https://www.maujor.com/tutorial/qqer-ordem-3colunas.php), porém não consegui manter as colunas laterais fixas. Além disso, para alterar as colunas de lugar é necessário fazer contas, mexer com números, distância dos widths, etc. Não é complexo, mas considerei o código abaixo mais simples, pois basta alterar os floats conforme descrito abaixo. Deixo a referência do site a quem interessar. Motivo 3: Ainda no site do Maujor (https://www.maujor.com/layout3col.shtml) há esse exemplo que quase atendeu o meu problema, porém é muito complexo e a maneira que encontrei também considerei mais fácil (já utilizei muito esse esquema em projetos anteriores, porém complica na responsividade). Motivo 4: Principal referência que resolveu todos os meus problemas: https://www.richardbarros.com.br/css/css-truques-para-dominar-a-propriedade-float. Esse site foi a "Eureka" para eu deixar exatamente conforme eu queria. Segue o código: CSS:
<style>
#navGlobal { height:400px. }
#navEsquerda { float:left. width:250px. /*Está em pixels, mas poderia deixar em porcentagem: ex: 20% */ background:#FFF. height:100%. }
#navDireita { /*margin-left:var(--margemEsquerda). Opcional*/ word-break: break-all. word-wrap: break-word. height:100%. }
#navLinks { float:right. width:200px. /*Está em pixels, mas poderia deixar em porcentagem: ex: 20% */ height:100%. background:#CCC. }
#navConteudo { overflow:auto. height:100%. background:#EFEFEF. }
</style> HTML: <div id="navGlobal"> <div id="navEsquerda">Menu</div> <div id="navDireita"> <div id="navLinks">Links</div> <div id="navConteudo">Conteúdo do meu site</div> </div>
</div> Nos comentários do código, informei o que alterar para manter as colunas laterais fixas ou em porcentagem, bem como para trocá-las de lugar uma lateral com o outra. Deixei cores vibrantes como modelo para o usuário alterar depois. Abraços a todos(as).Discussão (1)
Carregando comentários...