Pesquisar na Comunidade
Mostrando resultados para as tags ''site 3 colunas''.
Encontrado 1 registro
-
Site com 3 colunas verticais, podendo trocar rapidamente as laterais (fixas ou responsivas)
klonder postou um tópico no fórum Desenvolvimento frontend
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).