Josenildo2016 0 Denunciar post Postado Julho 30, 2016 Olá galera, estou com um problema ao criar esse site, com o menu fixo e responsivo. Tudo parece ok, mas quando dimensiono a página, o menu vaza para a esquerda.Alguém ajuda?<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="jquery-1.11.1.min.js"></script> <style> body { margin: 0; padding: 0; font-family: tahoma; height: 1600px; background-color: #f5f5f5; } #top { width: 960px; height: 150px; margin: 0 auto; } #top img { margin-top: 30px; } #menuHeader { position: relative; width: 100%; height: 50px; background-color: #2D3F50; } #menuHeader ul { width: 960px; margin: 0 auto; list-style: none; } #menuHeader ul li { float: left; } #menuHeader ul li a { padding: 15px 30px; line-height: 50px; border-left: 1px solid #464A4E; border-right: 1px solid #0E3457; text-decoration: none; color: #fff; } #menuHeader ul li:first-child a { border-left: 0; } #menuHeader ul li:last-child a { border-right: 0; } #menuHeader ul li a:hover { background-color: #4aa6e0; } .fique-olho { position: absolute; width: 300px; top: 50px; left: 20%; } .seta-down { position: absolute; width: 400px; bottom: 0; left: 40%; } .fim { position: absolute; width: 300px; bottom: -650px; left: 40%; } .menu-fixo { position:fixed !important; top: 0; z-index: 99; } </style> <script> $(function(){ var nav = $('#menuHeader'); $(window).scroll(function () { if ($(this).scrollTop() > 150) { nav.addClass("menu-fixo"); } else { nav.removeClass("menu-fixo"); } }); }); </script> </head> <body> <header> <div id="top"> <img src="logo.png" alt=""> </div> <nav id="menuHeader"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Produtos</a></li> <li><a href="#">Lojas</a></li> <li><a href="#">Empresa</a></li> <li><a href="#">Contato</a></li> </ul> <img class="fique-olho" src="fique-olho.png" alt=""> </nav> </header> <div class="content"> <img class="seta-down" src="seta-down.png" alt=""> <img class="fim" src="fim.png" alt=""> </div> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
codercss 14 Denunciar post Postado Julho 31, 2016 Olá, Primeiro tem que utilizar esta propriedade para que o tamanho do elemento fique igual ao tamanho com a sua borda e padding: * { box-sizing: border-box; } Segundo, se deseja um site responsivo tem que ter em atenção às larguras. Não utilize px, mas sim %. Estudo o seu código aqui: https://jsfiddle.net/ededev/yedqo9zp/ Veja as diferenças, converti as larguras para 100%! Bons estudos! Compartilhar este post Link para o post Compartilhar em outros sites
Josenildo2016 0 Denunciar post Postado Julho 31, 2016 Valeu, obrigadão pela ajuda :) Compartilhar este post Link para o post Compartilhar em outros sites
