-
Conteúdo Similar
-
Por Vitor Correa
Olá, estou criando uma página em html e estou tendo dificuldade em achar uma solução para esse problema, como faço para que o menu fique fixo em todas as páginas desse site sem que seja necessário refazer todo o código? Segue abaixo o código do meu menu e do css:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./../css/header.css"> <title></title> </head> <body> <header> <img src="./../img/fundo.png"> <nav> <ul> <li><a href="sla.html" class="active">Início</a></li> <li><a href="pps.html">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> <li><a href="#">Teste</a></li> </ul> </nav> </header> </body> </html> img { width: 100px; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; font-weight: bold; } li { float: left; border-right: 0px solid #333; } li: last-child { border-right: none; } li a { display: block; padding: 10px 15px; color: white; text-align: center; text-decoration: none; } li a:hover:not(.active){ background-color: #111; } .active { background-color: #FF0000; float: right; color: #111; }
-
Por Lucas Shimura
Olá, estou trabalhando em um site que o HTML do Menu não é alterável. Eu quero que quando o usuário rolar o scroll do mouse até a barra de menu, ela se torne fixa no topo da página. Respeitando a distância de outra barra que está funcionando e já se fixa automaticamente.
HTML do MENU (Não alterável):
<nav class="menu_component" id="component_37548"> <div class="menu-head"> <span> Menu </span> <button class="hamburger hamburger--spin-r" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"> </span> </span> </button> </div> <div class="menu-panel"> <menu class="expanded hamburger-menu"> <li id="menu_item_39037" class="sub"> <a alt="O SIENPRO" title="" target="" class="empty-href"> O SIENPRO </a> <menu class="submenu"> <li id="menu_item_41614" class=""> <a alt="SOBRE" title="" target="" class="" href="/p/21374-sobre-o-sienpro"> SOBRE </a> </li> <li id="menu_item_39038" class=""> <a alt="COMITÊ" title="" target="" class="" href="/p/23834-comite-2018"> COMITÊ </a> </li> </menu> </li> <li id="menu_item_41615" class=""> <a alt="TEMA" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#tema"> TEMA </a> </li> <li id="menu_item_41616" class=""> <a alt="PRINCIPAIS DATAS" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#datas"> PRINCIPAIS DATAS </a> </li> <li id="menu_item_39040" class="sub"> <a alt="EDIÇÕES SIENPRO" title="" target="" class="empty-href"> EDIÇÕES SIENPRO </a> <menu class="submenu"> <li id="menu_item_41593" class=""> <a alt="I SIENPRO - 2017" title="" target="" class="" href="/p/23811-i-sienpro-2017"> I SIENPRO - 2017 </a> </li> <li id="menu_item_41605" class=""> <a alt="II SIENPRO - 2018" title="" target="" class="" href="/p/23814-ii-sienpro-2018"> II SIENPRO - 2018 </a> </li> </menu> </li> <li id="menu_item_39041" class=""> <a alt="CONTATO" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#contato"> CONTATO </a> </li> <li id="menu_item_41617" class="sub"> <a alt="ARTIGOS" title="" target="" class="empty-href"> ARTIGOS </a> <menu class="submenu"> <li id="menu_item_41618" class=""> <a alt="REGRAS PARA SUBMISSÃO" title="" target="" class="empty-href"> REGRAS PARA SUBMISSÃO </a> </li> <li id="menu_item_41619" class=""> <a alt="ORIENTAÇÃO PARA APRESENTAÇÃO" title="" target="" class="empty-href"> ORIENTAÇÃO PARA APRESENTAÇÃO </a> </li> </menu> </li> <li id="menu_item_41620" class=""> <a alt="PROGRAMAÇÃO" title="" target="" class="empty-href"> PROGRAMAÇÃO </a> </li> <li id="menu_item_41621" class=""> <a alt="LOCAL" title="" target="" class="empty-href"> LOCAL </a> </li> </menu> </div> </nav>
CSS da variável de fixação:
.fixar{ position: fixed; width: 100%; top: 37px; z-index: 999; }
Javascript para tentar fixar o menu:
<script type="text/javascript"> jQuery("document").ready(function($){ var offset = $('.menu_component').offset().top; var nav = $('.menu_component'); $(document).on('scroll', function () { if (offset <= $(window).scrollTop()) { nav.addClass('fixar'); } else { nav.removeClass('fixar'); } }); }); </script>
Pensei que estava certo o Javascript, mas não está funcionando de maneira alguma. Link para acessar o site: https://sienpro.catalao.ufg.br/
Não sei se é classe que estou tentando alterar que está errada, se é classe da <nav>, da <div>, ou do <menu> que eu tenho que alterar com o javascript. Ou se tem que ser uma cascata entre todas elas.
Desde já, agradeço.
-
Por cesarhtc
Bom dia tenho esse código abaixo, como posso fixar o tamanho com 10 posições quando o campo tiver em branco.
<span id="formata-valor"> </span>
#formata-valor
{
font-size: 11pt;
font-family: FonteLogo, "Open Sans" ,Arial;
color:#000000;
margin-top:-15px;
margin-left: 4px;
margin-bottom: 15px;
width:15%;
font-weight: normal;
padding:5px;
border:1px solid #cccccc;
/* background-color:#f5f5f5;
border-top-left-radius: 0em;
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
border-bottom-left-radius: 0em;
background-image:-ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image:-webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image:-o-linear-gradient(top, #ffffff, #e6e6e6);
background-image:linear-gradient(top, #ffffff, #e6e6e6);
background-image:-moz-linear-gradient(top, #ffffff, #e6e6e6);
background-repeat:repeat-x;*/
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
-
Por zetabyte00
Porque mesmo com a marcação e estilos abaixo e não consigo colocar o elemento <p> no topo da página??? Somente definindo no arquivo de estilo, "top: -17px;" é que consigo. Poderiam me explicar?
<!DOCTYPE html> <html> <head> <title>Página Exemplo</title> <link rel="stylesheet" type="text/css" href="styles/style.css" media="screen"> <meta charset="UTF-8"> </head> <body> <div id="teste"> <p>teste</p> </div> </body> </html> body { position: relative; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; top: 0px; left: 0px; height: 100%; width: 100%; background-color: orange; } #teste { background-color: green; }
-
Por Gabriel Orlando
Bom dia pessoal,
Site: http://www.connectwebmarketing.com.br/theotherside/
Estou com um problema em deixar o topo do meu site responsivo, gostaria de deixar um campo de busca (que se encontra no topo do site) no canto direito, e arrumar o "quebramento do topo do site quando vou diminuindo a resolução... alguém tem alguma solução?"
-
