DiogoJefferson 0 Denunciar post Postado Janeiro 18, 2016 Olá, Estou criando um menu com 100% de largura dividido em 5 botões, cada um com 20% (totalizando 100% da tela). O problema é que ao aplicar o zoom na página, o menu "quebra" e desce, minha intenção é que o menu cresça na horizontal, assim criando a barra de rolagem. Segue o código: <html xmlns="http://www.w3.org/2015/xhtml" lang="pt-br" xml:lang="pt-br"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title></title> <style> *{ margin: 0; padding: 0; } .menu{ min-width: 100%; height: 50px; text-align: center; font-size: 100%; color: #FFF; font-family: 'Calibri Light'; } .menu div{ min-width: 20%; height: 50px; float: left; font-size: 100%; } .menu span{ line-height: 50px; font-size: 100%; } .botoes_inicio{ background-color: red; } .botoes_equipe{ background-color: yellow; } .botoes_servicos{ background-color: pink; } .botoes_produtos{ background-color: orange; } .botoes_contato{ background-color: green; } </style> </head> <body> <div class="menu"> <div class="botoes_inicio"><span>INÍCIO</span></div> <div class="botoes_equipe"><span>EQUIPE</span></div> <div class="botoes_servicos"><span>SERVIÇOS</span></div> <div class="botoes_produtos"><span>PRODUTOS</span></div> <div class="botoes_contato"><span>CONTATO</span></div> </div> </body> </html> Pensei que a propriedade min-width faria crescer na horizontal. O que estou errando? Compartilhar este post Link para o post Compartilhar em outros sites
Junior Varoni 9 Denunciar post Postado Janeiro 18, 2016 Não é problema com a propriedade min-width, o problema está no font-size:100% do menu span. O comportamento de font em relação a % é diferente. A unica maneira de resolver seu problema, é recorrendo as media queries do css3. .menu span{ line-height: 50px; font-size: .9em; } @media screen and (max-width: 780px) { .menu span{ font-size: .7em; } } @media screen and (max-width: 480px) { .menu span{ font-size: .5em; } } Você pode utilizar 'px' no lugar de 'em' Esse artigo tem umas coisas interessantes sobre design responsivo. Recomendo a leitura. Compartilhar este post Link para o post Compartilhar em outros sites
DiogoJefferson 0 Denunciar post Postado Janeiro 18, 2016 Cara, resolveu o problema. Duvidava que fosse o font-size: 100%. Vou procurar entender sobre seu uso em '%', 'px' e 'em'. Obrigado pela força, e também pela indicação de leitura sobre o artigo, com certeza irei ler. Abraço! Compartilhar este post Link para o post Compartilhar em outros sites
