brunogbomfim
-
Posts
4 -
Cadastrado em
-
Última visita
-
CSS Design Responsivo - Conteúdo da div desconfigurado
brunogbomfim postou um tópico em Web e banco de dados
Pessoal, Eu sou iniciante nesta área e criei um layout simples de site pra testar meus conhecimentos e tentar deixá-lo responsivo, porém estou preso a área do menu, que não consigo deixar responsivo. Estabeleci no CSS que quando a tela chegasse na largura máxima de 1050px, que a div do menu deveria reduzir para 808px. Isso até acontece, mas aí o conteúdo fica todo desconfigurado, sendo que eu atribuí a largura do conteúdo em porcentagem. Poderiam me ajudar? Esta é a imagem com o navegador maximizado: Esta é a imagem com a tela do navegador reduzida: Código HTML: <html> <head> <title>Projeto Clash</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="Clash.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="banner"> <img src="../../Imagens/Mais-banner.jpg" alt="Clash Royale"/> </div> <div class="bannermenu"> <div class="menutrans"> <div class="logo"> <img src="../../Imagens/Novo-logo.png" alt="Clash Royale"/> </div> <div class="listamenu"> <nav> <ul> <li>HOME</li> <li>CADASTRE-SE</li> <li>TORNEIO</li> <li>BATALHAS</li> <li>CONTATO</li> </ul> </nav> </div> <div class="search"> <form> Busca: <input type="search" placeholder="Encontrar na página"/> <input type="submit" value="Search"/> </form> </div> </div> </div> </body> </html> Código CSS: body{ margin:0; padding:0; } *{ box-sizing:border-box; font-family:Comic Sans MS; } .banner{ height:200px; background-color:#99ff99; } .banner img{ position:relative; top:50%; left:50%; transform:translate(-50%,-50%); } .bannermenu{ height:80px; background-color:red; } .menutrans{ width:1050px; margin:auto; } .logo img{ float:left; padding-top:5px; height:80px; width:20%; } .listamenu{ color:white; font-size:14px; float:left; padding-left:5px; font-weight:bold; width:45%; height:80px; } .listamenu li, .listamenu ul{ margin:0; padding:0; list-style:none; } .listamenu li{ float:left; line-height:80px; padding-left:10px; padding-right:10px; } .listamenu li:hover{ color:black; cursor:pointer; } .listamenu li:active{ color:black; } .search{ float:left; padding-left:10px; color:white; font-size:14px; line-height:80px; font-weight:bold; width:35%; height:80px; } @media only screen and (max-width:1050px){ .menutrans{ width:808px; } } Muito obrigado!
Sobre o Clube do Hardware
No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais
Direitos autorais
Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais
