MarcusLucena
-
Total de itens
2 -
Registro em
-
Última visita
Sobre MarcusLucena
-
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>
-
Juntar menu horizontal com imagem do topo
MarcusLucena respondeu ao tópico de maretones em Desenvolvimento frontend
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>