Jump to content

MarcusLucena

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

0 Comum

About MarcusLucena

  1. MarcusLucena

    Dúvida com código

    Fala FxDev, cara deu uma olhada no seu código e vi que você está usando um hrfe com uma url valida, para ficar na mesma pagina você tem que usar # dentro do href, fica assim: <a href='#' class='botao'>Desliga</a>; Quando usamos # o link fica na mesma pagina Veja como ficou seu código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Teste</title> <script type="text/javascript"> function AlteraRele1(){ var estado = document.getElementById("estado").innerHTML; if(estado == "0"){ document.getElementById("estado").innerHTML="1"; document.getElementById("rele").innerHTML="<div class='rele1_ligado'></div>"; document.getElementById("botao").innerHTML="<a href='#' class='botao'>Desliga</a>"; } else { document.getElementById("estado").innerHTML="0"; document.getElementById("rele").innerHTML="<div class='rele1_desligado'></div>"; document.getElementById("botao").innerHTML="<a href='#' class='botao'>Liga</a>"; } } </script> <style type="text/css"> root { display: block; } body { margin: 0; padding: 0; } #wrapper { padding-top: 40px; position: relative; width: 530px; height: 600px; margin-right: auto; margin-top: 0; margin-left: auto; font-size: 30px; color: black; text-align: center; font-family: arial; } div.rele1_ligado { position: absolute; right: -190px; top: 40px; width: 300px; height: 206px; border: none; margin:auto; background:url(Img/lampada_on.png) no-repeat left top; } div.rele1_desligado { position: absolute; right: -190px; top: 40px; width: 300px; height: 206px; border: none; background:url(Img/lampada_off.png) no-repeat left top; } #div1 { position: absolute; right: 340px; top: 180px; border-radius: 25px; border: 2px solid #000; width: 520px; height: 230px; } #botao{ position: absolute; right: 378px; top: 119px; width: 128px; height: 36px; } .botao { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 0px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.1, #16ADFF), color-stop(1, #26A8FF) ); background:-moz-linear-gradient( center top, #16ADFF 5%, #26A8FF 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#16ADFF', endColorstr='#26A8FF'); background-color:#ededed; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; color:#ffffff; font-family:arial; font-size:28px; font-weight:bold; padding:0px 0px; text-decoration:none; text-shadow:0px 0px 0px #ffffff; width: 140px; text-align: center; } }.botao:active { position:relative; top:1px; } </style> </head> <body> <div id="div1"> <div id='rele'></div> <div id='estado' style='visibility: hidden;'></div> <div id='botao' onclick="AlteraRele1();"></div> <script>AlteraRele1()</script></div> </body> </html>
  2. MarcusLucena

    Juntar menu horizontal com imagem do topo

    Fala maretones, cara existem diversas maneiras de se resolver isso, vou passar uma delas. Primeiramente em sua classe .mae você deve colocar a propriedade box-sizing: border-box, essa propriedade vai deixar todo conteúdo de seus elementos filhos contidos no elemento pai. O segundo passo é você definir as propriedades para a tag img, colocando uma posição absoluta, alinhamento e a distancia das margens. O código fica assim: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>História Halloween</title> <style> body { margin:0 100px; background-color: #000000; color: #000000; text-align: justify; } .mae { background-color: #ff9933; box-sizing: border-box; } .mae > img { position: absolute; align-content: flex-start; padding: 5px; } .conteudo { padding: 2% 8%; } h1, h2, h3 { text-align: center; } .menu ul{ margin: 0; background-color: #ff5544; list-style-type: none; text-align: center; } .menu ul li{ display: inline; } .menu ul li a{ font-size:26px; padding:2px 30px; display: inline-block; text-decoration: none; } </style> </head> <body> <div class="mae"> <img src="images/cemitery02.jpg" alt="logo" width="100%" height="500px"> <nav class="menu"> <ul> <li><a href="">História</a></li> <li><a href="">Curiosidades</a></li> <li><a href="">Filmes</a></li> <li><a href="">À definir</a></li> <li><a href="">À definir</a></li> </ul> </nav> </div> </body> </html>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.