Pesquisar na Comunidade
Mostrando resultados para as tags ''HTML 5''.
Encontrado 7 registros
-
Estou montando um blog e quero um display de posts estilo magazine. Adicionei um layout pronto .xml, mas não consigo ajustar o display no widget. Alguém sabe?
-
Eu fiz um componente que consiste em uma caixa que vai ser exibida dentro do meu background. Eu preciso de 4 dessas caixas e para isso, usei o v-for para não precisar criar 4 componentes basicamente iguais. Só que, com isso, as caixas não estão ficando posicionadas corretamente e o meu fundo não acompanha a adição de componentes na tela. Defini a position do componente (box) como absoluta já que foi a única maneira de colocá-las dentro do background, contudo, as 4 caixas ficam sobrepostas e eu preciso de movê-las pela tela. As demais posições fazem com que elas fiquem a cima do fundo, num espaço em branco da tela. Como posso resolver isso? Não gostaria de criar componentes iguais para resolver esse problema. Background CSS: <style> *{ margin: 0; padding: 0; } .background{ height: 100vh; background-color: #3B3B3B; } .title{ border: 1px solid #707070; border-left: none; border-right: none; padding-top: 5em; } .title h2{ text-align: left; color: #B16DFF; padding-top: 0.8em; font-size: 2em; padding-bottom: 0.5em; margin-left: 1.5em; font-weight: 600; } @media(max-width: 600px){ .title h2{ font-size: 1.17em; } } </style> Component (box) CSS: <style scoped> *{ margin: 0; padding: 0; } .box{ display: flex; flex-direction: column; position: absolute; z-index: 10; width: 45em; height: 30em; margin-left: 1.5em; margin-top: 12em; background-color: #232323; } .title{ border-bottom: 1px solid #707070; } .title p{ padding: 0.2em 0.8em; font-size: 1.5em; font-weight: 600; color: white; text-align: left; } </style> Vue.App CSS: <style> html, body { margin: 0; padding: 0; box-sizing: border-box; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; } -
javascript Redirecionamento da pagina não funciona
uma questão postou Falsecoder Ajax, JavaScript, XML, DOM
Boa tarde, Não estou conseguindo fazer este redirecionamento de pagina,consegui fazer na primeira vez normalmente. mas depois que introduzi o bootstrap não consigo utilizar este comando. segue os codigos: index.html <!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="main.js"></script> <meta> <title>Teste</title> </head> <body> <form> <input type='text' id='nome' > <input type="password" id='senha'> <button onclick="teste();"> Teste</button> </form> </body> </html> teste.html <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="main.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Fonts --> <link rel="dns-prefetch" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css"> <script type="text/javascript" src="main.js"></script> <link rel="icon" href="Favicon.png"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script type="text/javascript" src="main.js"></script> <title>Laravel</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light navbar-laravel"> <div class="container"> <a class="navbar-brand" href="#">Laravel</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Register</a> </li> </ul> </div> </div> </nav> <main class="login-form"> <div class="cotainer"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Register</div> <div class="card-body"> <form action="" method=""> <div class="form-group row"> <label for="email_address" class="col-md-4 col-form-label text-md-right">E-Mail Address</label> <div class="col-md-6"> <input type="text" id="email_address" class="form-control" name="email-address" required autofocus> </div> </div> <div class="form-group row"> <label for="password" class="col-md-4 col-form-label text-md-right">Password</label> <div class="col-md-6"> <input type="password" id="password" class="form-control" name="password" required> </div> </div> <div class="form-group row"> <div class="col-md-6 offset-md-4"> <div class="checkbox"> <label> <input type="checkbox" name="remember"> Remember Me </label> </div> </div> </div> <div class="col-md-6 offset-md-4"> <button type="submit" onclick="teste2();" class="btn btn-primary"> Register </button> <a href="#" class="btn btn-link"> Forgot Your Password? </a> </div> </div> </form> </div> </div> </div> </div> </div> </main> </body> </html> JAVASCRIPT.html -> que deveria fazer a função function teste() { var nome = document.getElementById("nome").value; var senha = document.getElementById("senha").value; if(nome == 'admin' && senha == '12345' ) //validação { window.location.replace("https://www.google.com"); //transferir pagina } } function teste2() { var email = document.getElementById("email_address").value; if(email == 'administrador') { window.location.href = "http://pt.stackoverflow.com"; } } alguém PODERIA ME INFORMAR ONDE EU ESTOU ERRANDO?OBRIGADO -
Olá Boa Noite, estou trabalhando em uma aplicação simples que faz a leitura de arquivos XML, pego os dados faço o processamento e depois mostro na tela os dados que quero dos XML, toda via estou mostrando em uma tabela e o cabeçalho está se repentindo devido está dentro do foreache, se eu tirar a tabela do foreach não mostra os dados, alguém sabe como mostrar apenas o cabecalho e apenas os dados se repetirem ? Vou deixar a imagem de como a tabela e mostrada e uma parte do codigo <?php error_reporting(0); ini_set(“display_errors”, 0 ); //Instanciando o OBJ $xml = new DOMdocument(); //Pegando o TMP do FORM $arquivo = $_FILES['entXML']['tmp_name']; //Total de todos os XML $totArquivos = 0; $arquivos = $arquivo; //Navegando no Nodes(Nós) foreach( $arquivos as$arquivos){ //Carregando o XML $xml ->load($arquivos) or die(" "); //Entra dentro do NÓ pai do XML $arquivos = $xml->getElementsByTagName( "nfeProc" ); //Pega Nome $nomes = $xml->getElementsByTagName( "xNome" ); $nome = $nomes->item(0)->nodeValue; //Pega CNPJ $cnpjS = $xml->getElementsByTagName( "CNPJ" ); $cnpj = $cnpjS->item(0)->nodeValue; //Mostra dados do Emitente echo"<header class='text-center'>"; echo"<div class='col-sm-6 Dempresa'><b>Empresa(Razão):</b> <p>$nome</p></div>"; echo"<div class='col-sm-4 Dempresa'><b>Cnpj:</b> <p>$cnpj</p></div>"; echo"</header>"; break; } //RECURSO DESESPERADO02 kk $arquivo = $arquivo; //RODANDO TODOS OS ENDEREÇOS DOS ARQUIVOS for($i = 0; $i < count($arquivo);$i++ ){ $totArquivos +=count($arquivo); //Total dos arquivos Carregados //Entra dentro do NODE "ide" foreach( $arquivo as $arquivo[$i]){ //Carregando o XML $xml ->load($arquivo[$i]) or die(" "); //Entra dentro do NÓ pai do XML $arquivo[$i] = $xml->getElementsByTagName( "nfeProc" ); //Pega Data de Emissão da NF $chaveS = $xml->getElementsByTagName("infNFe"); $chave = $chaveS->item(0)->getAttribute("Id"); //Pega Data de Emissão da NF $dataEMS = $xml->getElementsByTagName( "dhEmi" ); $dataEmi = $dataEMS->item(0)->nodeValue; //Pega CFOP $cfopS = $xml->getElementsByTagName( "CFOP" ); $cfop = $cfopS->item(0)->nodeValue; //Pega Modelo $modeloS= $xml->getElementsByTagName( "mod" ); $modelo = $modeloS->item(0)->nodeValue; //Mostra Tabela na Tela echo "<table class='table table-striped table-bordered table-hover table-sm'>"; echo"<thead class='thead-light'>"; echo "<tr>"; echo "<th scope='row'>CHAVE DE ACESSO</th>" ; echo "<th class='text-center meu'>Data Emissão</th>" ; echo "<th class='text-center'>CFOP</th>" ; echo "<th>Valor</th>" ; echo "<th>Modelo</th>" ; echo "<th>Status</th>" ; echo "</tr>"; echo'</thead>'; echo"<tr>"; echo"<td>$chave</td>"; echo"<td class='text-center'>".date('d/m/y',strtotime($dataEmi))."</td>";//formato de data brasileiro echo"<td class='text-center'>$cfop</td>"; echo"<td>".number_format($vaPag, 2)."</td>";//Formato moeda com 2 casas(Americano) echo"<td class='text-center'><b>$modelo<b> </td>"; echo"<td>$motivo </td>"; echo"</tr>"; echo "</table>";
-
Tenho um trabalho para entregar amanhã (Curso - sou iniciante), porém estou com um problemas, porque a imagem que eu coloquei no Section está sobrepondo o meu Header quando eu rolo a página. Qual comando posso utilizar para deixar ela em "segundo plano"? A imagem era para estar abaixo da parte preta
-
Eu estou fazendo uma página pra faculdade que só pode ser usado HTML e CSS, e nessa página eu gostaria de ter um scrolls, Porém, ao invés de usar o scroll do mouse, usar um botão dentro da própria página levando ela ao conteúdo desejado. No caso, a página seria uma só e teriam algumas camadas, a camada da página inicial que conteria todos os botões levando a todas as outras camadas, camada de baixo com algum conteúdo, outra camada com outro conteúdo... Como posso fazer? Além de querer saber como criar os scrolls, queria saber como criar backgrounds separados, página inicial de uma cor, conteúdo de outra, assim como no site. Desde já, agradeço. Site de exemplo: Arcadis.com
-
Erro na manipulação do arquivo CSS em JavaScript
uma questão postou K00PA Ajax, JavaScript, XML, DOM
E ai pessoal, tudo certo? Estou com um problema para manipular algumas propriedades do CSS pelo JavaScript. Trecho JavaScript: function rodadas(){ for(i=0;i<=9;i++){ for(novaRodada=0;novaRodada<5;novaRodada++){ if (cacheGame[i] == 1){ document.getElementById('janela1').style.display='block'; //erro: Uncaught TypeError: Cannot read property 'style' of null //alert("abrir janela1"); break; } if (cacheGame[i] == 2){ //document.getElementById('janela2').style.display='block'; alert("abrir janela1"); break; } if (cacheGame[i] == 3){ alert("abra a janela 3!"); break; } if (cacheGame[i] == 4){ alert("abra a janela 4!"); break; } if (cacheGame[i] == 5){ alert("abra única porta!"); break; } } } } Trecho CSS: #janela1{ float: left; width: 260px; height: 218px; position: relative; left: 180px; top: 57px; background: url(../imagens/Janela.png); display: none;/* ESTOU TENTANDO PASSAR DE "none" PARA "block" VIA JAVASCRIPT*/ }
