gilbertoteix 0 Denunciar post Postado Junho 6, 2016 Ola Pessoal, boa noite! Tenho esse codigo que segue abaixo, e preciso centralizar na tela este menu, e por falta de conhecimento, não estou conseguindo. Agradeço qualquer ajuda. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <!DOCTYPE html> <html lang="en"> <head> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <title>Menu Example</title> <style type="text/css"> /* General menu styling */ .nav { line-height: 22px; margin-top: 0px; margin-left: auto; margin-right: auto margin-top: 0px padding: 0; position: relative; /* or absolute */ } /* The main navigation link containers */ .nav>li { display: block; float: left; /* Displaying them on the same line */ margin: 0; padding: 0; } /* The main navigation links */ .nav>li>a { /* Layout */ display: block; position: relative; padding: 10px 20px; /* Text */ font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif; color: #fff; font-size: 12px; text-decoration: none; /* Background */ background: black; /* For older browsers */ background: rgba(0, 0, 0, .6); /* Transparent background for modern browsers */ /* Making the color to change on hover with a transition */ -webkit-transition: color .3s ease-in; -moz-transition: color .3s ease-in; -o-transition: color .3s ease-in; -ms-transition: color .3s ease-in; } /* Changing the color on hover */ .nav>li>a:hover, .nav>li:hover>a { color: #0fd0f9; } /* The links which contain dropdowns menu are wider, because they have a little arrow */ .nav>.dropdown>a { padding: 10px 30px 10px 20px; } /* The arrow indicating the dropdown */ .dropdown>a::after { content: ""; position: absolute; top: 17px; right: 10px; width: 7px; height: 7px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); border-bottom: 1px solid #fff; border-right: 1px solid #fff; } /* Changing the color of the arrow on hover */ .dropdown>a:hover::after, .dropdown:hover>a::after { border-color: #0fd0f9; } /* The submenus */ .nav ul { position: relative; text-align: center; margin: 0; padding: 0; list-style: none; display: block; } /* General layout settings for the link containers of the submenus */ .nav ul li { position: absolute; top: -9999px; /* Hiding them */ height: 0px; display: block; margin: 0; padding: 0; /* Making them to expand their height with a transition, for a slide effect */ -webkit-transition: height .2s ease-in; -moz-transition: height .2s ease-in; -o-transition: height .2s ease-in; -ms-transition: height .2s ease-in; } /* Displays the submenu links, by expading their containers (with a transition, previously defined) and by repositioning them */ .dropdown:hover>ul>li { height: 30px; position: relative; top: auto; } /* The submenu links */ .nav ul li a { /* Layout */ padding: 4px 20px; width: 120px; display: block; position: relative; /* Text */ font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif; color: #bbb; text-decoration: none; font-size: 12px; /* Background & effects */ background: black; background: rgba(0, 0, 0, .6); -webkit-transition: color .3s ease-in, background .3s ease-in; -moz-transition: color .3s ease-in, background .3s ease-in; -o-transition: color .3s ease-in, background .3s ease-in; -ms-transition: color .3s ease-in, background .3s ease-in; } /* Changing the link's color and background on hover */ .nav ul li:hover>a, .nav ul li a:hover { color: #0fd0f9; background: rgba(0, 0, 0, .75); } /* Making the level 2 (or higher) submenus to appear at the right of their parent */ .nav ul .dropdown:hover ul { left: 160px; top: 0px; } /* The submenu links have a different arrow which indicates another dropdown submenu */ .nav ul .dropdown a::after { width: 6px; height: 6px; border-bottom: 0; border-right: 1px solid #fff; border-top: 1px solid #fff; top: 12px; } /* Changing the color of the arrow on hover */ .nav ul .dropdown:hover>a::after, .nav ul .dropdown>a:hover::after { border-right: 1px solid #0fd0f9; border-top: 1px solid #0fd0f9; } </style> </head> <body> <ul class="nav"> <li><a href="#">HOME</a></li> <li><a href="#">EMPRESA</a></li> <li class="dropdown"> <a href="#">PRODUTOS</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">UX Design</a></li> <li><a href="#">Development</a></li> <li><a href="#">Identity</a></li> </ul> <li><a href="#">EMPRESA</a></li> <li><a href="#">EMPRESA</a></li> <li><a href="#">EMPRESA</a></li> </ul> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-36251023-1']); _gaq.push(['_setDomainName', 'jqueryscript.net']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
thyquevedo 6 Denunciar post Postado Junho 7, 2016 Olá Gilberto, tudo certo? Altere a primeira linha do seu CSS para esta a seguir: .nav { line-height: 22px; margin:0px auto; width:470px; } Seu código estava com um ; faltando, e não estava declarando o tamanho da classe .nav Veja se resolve seu problema. Abraço. Compartilhar este post Link para o post Compartilhar em outros sites
gilbertoteix 0 Denunciar post Postado Junho 7, 2016 Obrigado pela resposta! Quase deu, agora ele centralizou mas fica desconfigurado. Compartilhar este post Link para o post Compartilhar em outros sites
Carlos Henrique A. 7 Denunciar post Postado Junho 8, 2016 @gilbertoteix Procure manusear o atributo: width: 470px; Acredito que, aumentando o tamanho dele conseguirá arrumar. Compartilhar este post Link para o post Compartilhar em outros sites
L. Henrique 179 Denunciar post Postado Junho 9, 2016 Gilberto,Existem algumas formas de centralizar algum elemento. Você pode fazer isso com: left: ...; + transform: translate (...); ou margin: 0 auto;. Veja alguns exemplos que preparei como demo no JSFiddle. Abraços! Compartilhar este post Link para o post Compartilhar em outros sites
gilbertoteix 0 Denunciar post Postado Junho 12, 2016 Obrigado pela ajuda! consegui resolver com as dicas. Valeu!! Compartilhar este post Link para o post Compartilhar em outros sites